echarts圆环象性图，实现从低向上渲染颜色

本文主要是介绍echarts圆环象性图，实现从低向上渲染颜色，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一效果图

场景应用图

二 代码

        let symbols = [// 'path://M480 64C250.24 64 64 250.24 64 480 64 709.76 250.24 896 480 896c229.76 0 416-186.24 416-416C896 250.24 709.76 64 480 64zM480 832C285.44 832 128 674.56 128 480 128 285.44 285.44 128 480 128 674.56 128 832 285.44 832 480 832 674.56 674.56 832 480 832z'`image://${figureBg}`,`image://${figureB}`,`image://${figureA}`,]

var symbols = ['path://M480 64C250.24 64 64 250.24 64 480 64 709.76 250.24 896 480 896c229.76 0 416-186.24 416-416C896 250.24 709.76 64 480 64zM480 832C285.44 832 128 674.56 128 480 128 285.44 285.44 128 480 128 674.56 128 832 285.44 832 480 832 674.56 674.56 832 480 832z'
];  //symbols里面需要一个svg背景图，这个可以去阿里图库，可以获取到svg的数据，这个时候需要取path里面的值就好了不能直接复制进去var bodyMax = 100;  //可以设置最大值参数option = {xAxis: {data: ['a'],show: false  //不需要x轴},yAxis: {max: bodyMax,splitLine: {show: false},show: false  //不需要Y轴},series: [{name: 'typeA',type: 'pictorialBar',symbolClip: true,symbolBoundingData: bodyMax,data: [{value: 43, //这个是参数就是占比symbol: symbols[0]}],z: 10}, {name: 'full',type: 'pictorialBar',symbolBoundingData: bodyMax,animationDuration: 0,itemStyle: {color: '#ccc'},data: [{value: 1, //背景图symbol: symbols[0]}]}]
};

加油加油

这篇关于echarts圆环象性图，实现从低向上渲染颜色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---