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]
        }]
    }]
};

加油加油