最近一直處于開發(fā)大屏的項目，在開發(fā)中遇到了一個小知識點，在大屏中如何實現(xiàn)人體動態(tài)圖。然后看了下echarts官方文檔，根據(jù)文檔中的示例調(diào)整出來自己想要的效果。

根據(jù)文檔上發(fā)現(xiàn) series 中 type 類型設(shè)置為 象形柱形圖，象形柱圖是可以設(shè)置各種具象圖形元素（如圖片、SVG PathData 等）的柱狀圖。然后邊采用SVG PathData來實現(xiàn)，通過SVG PathData實現(xiàn)后發(fā)現(xiàn)圖片更省事。這也算是長見識了，哈哈。

詳細(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)", //單獨控制顏色},},},{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,},{// 設(shè)置背景底色，不同的情況用這個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方式實現(xiàn)，
另外后面優(yōu)化代碼采用了 圖片方式，其實與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)", //單獨控制顏色},},},{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,},{// 設(shè)置背景底色，不同的情況用這個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%'],},],},],	};