vue中使用echarts实现人体动态图-编程知识

vue中使用echarts实现人体动态图

最近一直处于开发大屏的项目，在开发中遇到了一个小知识点，在大屏中如何实现人体动态图。然后看了下echarts官方文档，根据文档中的示例调整出来自己想要的效果。
在这里插入图片描述
根据文档上发现 series 中 type 类型设置为象形柱形图，象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。然后边采用SVG PathData来实现，通过SVG PathData实现后发现图片更省事。这也算是长见识了，哈哈。
参考文档
详细的文档大家也可以参考下官方文档：https://echarts.apache.org/zh/option.html#series-pictorialBar

接下来还是老规矩，看代码：

let symbols = [/*这里我使用的是base64方式，大家也可以根据喜好设置为 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, //鼠标放上去显示悬浮数据},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: "{b}\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)", //单独控制颜色},},},{name: "正常",value: 25,symbol: symbols[1],itemStyle: {normal: {color: "rgba(98, 123, 81)", //单独控制颜色},},},{name: "超重",value: 20,symbol: symbols[2],itemStyle: {normal: {color: "rgba(163, 126, 46)", //单独控制颜色},},},{name: "肥胖",value: 30,symbol: symbols[3],itemStyle: {normal: {color: "rgba(180, 79, 33)", //单独控制颜色},},},],z: 10,},{// 设置背景底色，不同的情况用这个name: "",type: "pictorialBar", //异型柱状图 图片、SVG PathDatasymbolBoundingData: 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)", //单独控制颜色opacity: 0.4,},},value: 100,symbol: symbols[1],},{itemStyle: {normal: {color: "rgba(163, 126, 46,0.40)", //单独控制颜色opacity: 0.4,},},value: 100,symbol: symbols[2],},{itemStyle: {normal: {color: "rgba(180, 79, 33, 0.4)", //单独控制颜色opacity: 0.4,},},value: 100,symbol: symbols[3],},],},],
};

以上代码便是使用base64方式实现，
另外后面优化代码采用了图片方式，其实与base64方式区别在于引用。

const option = {tooltip: {show: false, //鼠标放上去显示悬浮数据},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: "{b}\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)", //单独控制颜色},},},{name: "正常",value: 25,symbol: 'image://' + require("../assets/images/2-image.png"),symbolSize: ['50%', '100%'],itemStyle: {normal: {color: "rgba(98, 123, 81)", //单独控制颜色},},},{name: "超重",value: 20,symbol: 'image://' + require("../assets/images/3-image.png"),symbolSize: ['50%', '100%'],itemStyle: {normal: {color: "rgba(163, 126, 46)", //单独控制颜色},},},{name: "肥胖",value: 30,symbol: 'image://' + require("../assets/images/4-image.png"),symbolSize: ['50%', '100%'],itemStyle: {normal: {color: "rgba(180, 79, 33)", //单独控制颜色},},},],z: 10,},{// 设置背景底色，不同的情况用这个name: "",type: "pictorialBar", //异型柱状图 图片、SVG PathDatasymbolBoundingData: 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%'],},],},],	};