动态图饼图

 

 

let value = 65.23;
let title = 'vision';
let int = value.toFixed(2).split('.')[0];
let float = value.toFixed(2).split('.')[1];
option = {
    backgroundColor: '#020f18',
    title: {
        text: '{a|' + int + '}{b|.' + float + '}\n{c|' + title + '}',
        x: 'center',
        y: 'center',
        textStyle: {
            rich: {
                a: {
                    fontSize: 48,
                    color: '#fff',
                    fontWeight:'600',
                },
                b: {
                    fontSize: 20,
                    color: '#fff',
                    padding: [0, 0, 14, 0]
                },
                c: {
                    fontSize: 20,
                    color: '#fff',
                    padding: [5, 0]
                }
            }
        }
    },
    series: [
        {
            type: 'gauge',
            radius: '60%',
            clockwise: false,
            startAngle: '90',
            endAngle: '-269.9999',
            splitNumber: 30,
            detail: {
                offsetCenter: [0, -20],
                formatter: ' '
            },
            pointer: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: [
                        [0, '#2CFAFC'],
                        [36.7 / 100, '#0ff'],
                        [1, '#0f232e']
                    ],
                    width: 20
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                length: 100,
                lineStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 255, 255, 1)',
                    shadowOffsetY:'0',
                    color: '#020f18',
                    width: 2
                }
            },
            axisLabel: {
                show: false
            }
        },
        {
            type: 'pie',
            radius: ['44%', '45%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    color: '#0C355E'
                }
            },
            label: {
                show: false
            },
            data: _dashed()
        },
        
        {
            type: 'pie',
            radius: [0, '30%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    shadowBlur: 20,
                    shadowColor: '#000',
                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                        offset: 0,
                        color: '#0FF',
                    }, {
                        offset: 1,
                        color: '#060f20'
                    }])
                }
            },
            label: {
                show: false
            },
            data: [100]
        },
        {
            type: 'pie',
            radius: ['64%', '65.5%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 255, 255,.3)',
                    color: '#0f232e'
                }
            },
            label: {
                show: false
            },
            data: [100]
        },
        {
            type: 'pie',
            radius: ['68%', '69.5%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: { 
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 255, 255,.3)',
                    color: 'rgba(15, 35, 46,.6)',
                }
            },
            label: {
                show: false
            },
            data: [100]
        },
    ]
};

function _dashed() {
    let dataArr = [];
    for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
            dataArr.push({
                name: (i + 1).toString(),
                value: 20,
                itemStyle: {
                    normal: {
                        color: 'rgb(0,255,255,.3)',
                    }
                }
            })
        } else {
            dataArr.push({
                name: (i + 1).toString(),
                value: 20,
                itemStyle: {
                    normal: {
                        color: 'rgb(0,0,0,0)',
                        borderWidth: 1,
                        borderColor: "rgba(0,255,255,1)"
                    }
                }
            })
        }

    }
    return dataArr

}

function doing() {
    let option = myChart.getOption();
    option.series[1].startAngle = option.series[1].startAngle - 1;
    myChart.setOption(option);
}
function startTimer() {
    timer = setInterval(doing, 100);
}
setTimeout(startTimer, 0);