Vue中使用echarts實(shí)現(xiàn)繪制人體動(dòng)態(tài)圖
更新時(shí)間：2024年03月05日 09:48:02 作者：小青年一枚
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用echarts實(shí)現(xiàn)繪制人體動(dòng)態(tài)圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
最近一直處于開發(fā)大屏的項(xiàng)目，在開發(fā)中遇到了一個(gè)小知識(shí)點(diǎn)，在大屏中如何實(shí)現(xiàn)人體動(dòng)態(tài)圖。然后看了下echarts官方文檔，根據(jù)文檔中的示例調(diào)整出來自己想要的效果。
根據(jù)文檔上發(fā)現(xiàn) series 中 type 類型設(shè)置為 象形柱形圖，象形柱圖是可以設(shè)置各種具象圖形元素（如圖片、SVG PathData 等）的柱狀圖。然后邊采用SVG PathData來實(shí)現(xiàn)，通過SVG PathData實(shí)現(xiàn)后發(fā)現(xiàn)圖片更省事。這也算是長見識(shí)了，哈哈。
詳細(xì)的文檔大家也可以參考下官方文檔：https://echarts.apache.org/zh/option.html#series-pictorialBar
接下來還是老規(guī)矩，看代碼：
let symbols = [
/*這里我使用的是base64方式，大家也可以根據(jù)喜好設(shè)置為 path://*/
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA",
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA",
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA",
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA",
];
option = {
tooltip: {
show: false, //鼠標(biāo)放上去顯示懸浮數(shù)據(jù)
},
grid: {
left: '5%',
right: '20%',
top: "20%",
bottom: "20%",
containLabel: true,
},
xAxis: {
data: ["a", "x", "b"],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
yAxis: {
max: 100,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "",
type: "pictorialBar",
symbolClip: true,
symbolBoundingData: 100,
label: {
normal: {
show: true,
position: "bottom",
offset: [0, 10],
formatter: "\n{c}%",
textStyle: {
fontSize: 16,
color: "#686868",
},
},
},
symbolSize: ['50%', '100%'],
data: [
{
name: "低體重",
value: 35,
//采用base64方式
symbol: symbols[0],
//symbolSize: ['50%', '50%'],
itemStyle: {
normal: {
color: "rgba(73, 107, 168)", //單獨(dú)控制顏色
},
},
},
{
name: "正常",
value: 25,
symbol: symbols[1],
itemStyle: {
normal: {
color: "rgba(98, 123, 81)", //單獨(dú)控制顏色
},
},
},
{
name: "超重",
value: 20,
symbol: symbols[2],
itemStyle: {
normal: {
color: "rgba(163, 126, 46)", //單獨(dú)控制顏色
},
},
},
{
name: "肥胖",
value: 30,
symbol: symbols[3],
itemStyle: {
normal: {
color: "rgba(180, 79, 33)", //單獨(dú)控制顏色
},
},
},
],
z: 10,
},
{
// 設(shè)置背景底色，不同的情況用這個(gè)
name: "",
type: "pictorialBar", //異型柱狀圖 圖片、SVG PathData
symbolBoundingData: 100,
animationDuration: 10,
z: 10,
symbolSize: ['50%', '100%'],
data: [
{
itemStyle: {
normal: {
color: "rgba(73, 107, 168, 0.2)",
opacity: 0.4,
},
},
value: 100,
symbol: symbols[0],
},
{
itemStyle: {
normal: {
color: "rgba(98, 123, 81,0.40)", //單獨(dú)控制顏色
opacity: 0.4,
},
},
value: 100,
symbol: symbols[1],
},
{
itemStyle: {
normal: {
color: "rgba(163, 126, 46,0.40)", //單獨(dú)控制顏色
opacity: 0.4,
},
},
value: 100,
symbol: symbols[2],
},
{
itemStyle: {
normal: {
color: "rgba(180, 79, 33, 0.4)", //單獨(dú)控制顏色
opacity: 0.4,
},
},
value: 100,
symbol: symbols[3],
},
],
},
],
};
以上代碼便是使用base64方式實(shí)現(xiàn)，
另外后面優(yōu)化代碼采用了 圖片方式，其實(shí)與base64方式區(qū)別在于引用。
const option = {
tooltip: {
show: false, //鼠標(biāo)放上去顯示懸浮數(shù)據(jù)
},
grid: {
left: '5%',
right: '25%',
top: "10%",
bottom: "20%",
containLabel: true,
},
xAxis: {
data: ["a", "x", "b"],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
yAxis: {
max: 100,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "",
type: "pictorialBar",
symbolClip: true,
symbolBoundingData: 100,
label: {
normal: {
show: true,
position: "bottom",
offset: [0, 10],
formatter: "\n{c}%",
textStyle: {
fontSize: 14,
color: "#fff",
},
},
},
data: [
{
name: "低體重",
value: 35,
symbol: 'image://' + require("../assets/images/1-image.png"),
symbolSize: ['50%', '100%'],
itemStyle: {
normal: {
color: "rgba(73, 107, 168)", //單獨(dú)控制顏色
},
},
},
{
name: "正常",
value: 25,
symbol: 'image://' + require("../assets/images/2-image.png"),
symbolSize: ['50%', '100%'],
itemStyle: {
normal: {
color: "rgba(98, 123, 81)", //單獨(dú)控制顏色
},
},
},
{
name: "超重",
value: 20,
symbol: 'image://' + require("../assets/images/3-image.png"),
symbolSize: ['50%', '100%'],
itemStyle: {
normal: {
color: "rgba(163, 126, 46)", //單獨(dú)控制顏色
},
},
},
{
name: "肥胖",
value: 30,
symbol: 'image://' + require("../assets/images/4-image.png"),
symbolSize: ['50%', '100%'],
itemStyle: {
normal: {
color: "rgba(180, 79, 33)", //單獨(dú)控制顏色
},
},
},
],
z: 10,
},
{
// 設(shè)置背景底色，不同的情況用這個(gè)
name: "",
type: "pictorialBar", //異型柱狀圖 圖片、SVG PathData
symbolBoundingData: 100,
animationDuration: 10,
z: 10,
data: [
{
itemStyle: {
normal: {
opacity: 0.6,
},
},
value: 100,
symbol: 'image://' + require("../assets/images/1-image.png"),
symbolSize: ['50%', '100%'],
},
{
itemStyle: {
normal: {
opacity: 0.6,
},
},
value: 100,
symbol: 'image://' + require("../assets/images/2-image.png"),
symbolSize: ['50%', '100%'],
},
{
itemStyle: {
normal: {
opacity: 0.6,
},
},
value: 100,
symbol: 'image://' + require("../assets/images/3-image.png"),
symbolSize: ['50%', '100%'],
},
{
itemStyle: {
normal: {
opacity: 0.6,
},
},
value: 100,
symbol: 'image://' + require("../assets/images/4-image.png"),
symbolSize: ['50%', '100%'],
},
],
},
],
};
到此這篇關(guān)于Vue中使用echarts實(shí)現(xiàn)繪制人體動(dòng)態(tài)圖的文章就介紹到這了,更多相關(guān)Vue echarts繪制人體動(dòng)態(tài)圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在 Vue Router 4 中,嵌套路由是一種非常重要的功能,它允許我們創(chuàng)建更復(fù)雜的 UI 結(jié)構(gòu),同時(shí)保持路由的清晰和易于管理,這篇文章主要介紹了Vue Router4 嵌套路由,需要的朋友可以參考下2024-04-04
VUE+Element UI實(shí)現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼
這篇文章主要介紹了VUE+Element UI實(shí)現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
在開發(fā)項(xiàng)目時(shí)遇到由于選擇了eslint導(dǎo)致的嚴(yán)格錯(cuò)誤提示,如多個(gè)空格和多行報(bào)錯(cuò),解決方案包括在webpack.base.conf.js中進(jìn)行配置修改,創(chuàng)建項(xiàng)目時(shí)避免選擇eslint,本文給大家介紹了Vue關(guān)閉eslint檢測的多種方法,需要的朋友可以參考下2025-03-03
vue-resource?獲取本地json數(shù)據(jù)404問題的解決
這篇文章主要介紹了vue-resource?獲取本地json數(shù)據(jù)404問題的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue安裝依賴npm install過程中報(bào)錯(cuò)npm ERR! cb() nev
這篇文章主要介紹了vue安裝依賴npm install過程中報(bào)錯(cuò)npm ERR! cb() never called!問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了Vue組件封裝方案實(shí)現(xiàn)，我們將從分析組件封裝的優(yōu)勢開始，然后依次介紹 vue.js 的基本概念，以及如何創(chuàng)建、封裝和使用自定義組件2023-03-03
react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
在 Vue 3 中,ref 和 reactive 都是用于創(chuàng)建響應(yīng)式數(shù)據(jù)的方法,但它們在使用方式、應(yīng)用場景等方面存在一些差異,下面給大家介紹Vue 3 中 ref 與 reactive 的對比分析,感興趣的朋友一起看看吧2025-05-05
vue前端路由以及vue-router兩種模式實(shí)例詳解
路由這個(gè)概念最先是后端出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue前端路由以及vue-router兩種模式的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
使用antv替代Echarts實(shí)現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實(shí)現(xiàn)數(shù)據(jù)可視化圖表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08