' + '

' + ' ' + v.seriesName + " : " + '' + v.value + "" + ' 个
' + '占比 : ' + pencent1 + " %" + "

" ); } else if (v.seriesName == "紫色") { return ( '

' + '

' + ' ' + v.seriesName + " : " + '' + datas.dataArr2 + "" + ' 个
' + '占比 : ' + pencent2 + " %" + "

" ); } else if (v.seriesName == "蓝色") { return ( '

' + '

' + ' ' + v.seriesName + " : " + '' + datas.dataArr3 + "" + ' 个
' + '占比 : ' + pencent3 + " %" + "

" ); } } }, series: [{ type: "pictorialBar", name: "绿色", barCategoryGap: 2, itemStyle: { normal: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "rgba(53, 195, 194, 1)" // 0% 处的颜色 }, { offset: 0.5, color: "rgba(223, 213, 252, 0.5)" // 50% 处的颜色 }, { offset: 1, color: "rgba(53, 195, 194, 1)" // 100% 处的颜色 } ], globalCoord: false // 缺省为 false } } }, symbol: "roundRect", symbolRepeat: "fixed", symbolClip: true, symbolSize: symbolSize, data: datas.dataArr1, z: 11 }, { type: "pictorialBar", barCategoryGap: 2, name: "紫色", itemStyle: { normal: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "rgba(159, 144, 205, 1)" // 0% 处的颜色 }, { offset: 0.5, color: "rgba(223, 213, 252, 0.5)" // 50% 处的颜色 }, { offset: 1, color: "rgba(159, 144, 205, 1)" // 100% 处的颜色 } ], globalCoord: false // 缺省为 false } } }, symbol: "roundRect", symbolRepeat: "fixed", symbolClip: true, symbolSize: symbolSize, data: [datas.dataArr1[0] + datas.dataArr2[0]], z: 10 }, { type: "pictorialBar", barCategoryGap: 2, name: "蓝色", itemStyle: { normal: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "rgba(125, 176, 235, 1)" // 0% 处的颜色 }, { offset: 0.5, color: "rgba(195, 223, 255, 0.5)" // 50% 处的颜色 }, { offset: 1, color: "rgba(125, 176, 235, 1)" // 100% 处的颜色 } ], globalCoord: false // 缺省为 false } } }, symbolRepeat: "fixed", symbol: "roundRect", symbolSize: symbolSize, symbolClip: true, data: [total], z: 5 } ] }

Echarts在线免费图表