TESTecharts 球配置项内容和展示

      var value = 0.65;
var data = [value, value, value, ];
function Pie() {
    let dataArr = [];
    for (var i = 0; i < 150; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 25,
                itemStyle: {
                    normal: {
                        color: "#fff",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 10,
                itemStyle: {
                    normal: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)"
                    }
                }
            })
        }
    }
    return dataArr
}
var option = {
    backgroundColor:'#462f9b',
    title: [
        {
        text: 'MARGINAL COST✍',
        x: '50%',
        y: 30,
        textAlign: 'center',
        textStyle: {
            fontSize: '30',
            fontWeight: '100',
            color: '#fff',
            textAlign: 'center',
        },
    }, 
    {
        text: (value * 100).toFixed(0) + '%',
        left: '50%',
        top: '30%',
        textAlign: 'center',
        textStyle: {
            fontSize: '40',
            fontWeight: '400',
            color: '#fff',
            textAlign: 'center',
            textBorderColor:'rgba(0, 0, 0, 0)',
            textShadowColor:'#000',
            textShadowBlur:'0',
            textShadowOffsetX:0,
            textShadowOffsetY:1,
        },
    }, 
    ],
    series: [
        {
            type: 'liquidFill',
            radius: '70%',
            z: 6,
            center: ['50%', '50%'],
            amplitude: 20, 
            color: {
             type: 'linear',
             x: 0,
             y: 0,
             x2: 0,
             y2: 1,
             colorStops: [{
                 offset: 1,
                 color: 'rgba(250, 111, 202, 1)'
             }, {
                 offset: 0.5,
                 color: 'rgba(252, 140, 199, .5)'
             }, {
                 offset: 0,
                 color: 'rgba(255, 197, 196, 1)'
             }],
             globalCoord: false
         },
            data: [0.6, 
            {value: 0.5,
                direction: 'left',
            }, 0.4, 0.3,],
            backgroundStyle: {
                borderWidth: 1,
                color: 'transparent',
            },
            label: {
             normal: {
                 formatter: '',
             }
         },
            outline: {
                show: true,
                itemStyle: {
                    borderWidth: 0,
                },
                borderDistance: 0,
            }
        },
        {
            name: '4',
            type: 'pie',
            z: 1,
            radius: '70.5%',
            center: ["50%", "50%"],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                }
            },
            data: [{
                value: 100,
                itemStyle: {
                    normal: {
                        color: '#ac9ed1',
                    }
                }
            }]
        },
        {
            name: '5',
            type: 'pie',
            z: 1,
            radius: '70%',
            center: ["50%", "50%"],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                }
            },
            data: [{
                value: 100,
                itemStyle: {
                    normal: {
                        color: '#462f9b',
                    }
                }
            }]
        },
        {
            type: 'pie',
            zlevel: 0,
            silent: true,
            radius: ['60%', '61%'],
            z: 10,
            itemStyle: {
            normal: {
                areaColor: 'rgba(137, 137, 137, .3)',
                borderColor: '#888',
            },
            emphasis: {
                label: {
                    show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
            }
        },
            label: {
                normal: {
                    show: false
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: Pie()
        },
    ]
}