Echarts环形饼状图双线

echarts yekong

Echarts环形饼状图双线

function getecharts5() {
        var chartDom = document.getElementById('echarts5');
        var myChart = echarts.init(chartDom);
        var labelData = [];
        var labelData1 = [];
        option = {
            title: [{
                text: '64',
                x: '49%',
                y: '37%',
                textAlign: 'center',
                textStyle: {
                    fontSize: '40',
                    fontWeight: '700',
                    color: '#0373E5',
                    textAlign: 'center',
                    fontFamily: 'DigitalDismay',
                },
            }, {
                text: '正常',
                left: '49%',
                top: '52%',
                textAlign: 'center',
                textStyle: {
                    fontSize: '18',
                    fontWeight: '400',
                    color: '#C7CFDC',
                    textAlign: 'center',
                    fontFamily: 'DigitalDismay',
                },
            }],
            polar: {
                radius: ['60%', '70%'],
                center: ['50%', '50%'],
            },
            angleAxis: {
                max: 100,
                show: false,
                startAngle: 0,
            },
            radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,

                },
                axisTick: {
                    show: false
                },
            },
            series: [
                {
                    name: '',
                    type: 'bar',
                    roundCap: true,
                    radius: ['55%', '100%'],
                    barWidth: 100,
                    showBackground: true,
                    backgroundStyle: {
                        color: '#142D5D',
                    },
                    data: [64],
                    coordinateSystem: 'polar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 0,
                                color: 'rgba(1, 90, 207, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(2, 129, 242, 1)'
                            }]),
                        }
                    }
                },
                {
                    hoverAnimation: false,
                    type: 'pie',
                    z: 2,
                    data: labelData,
                    radius: ['55%', '100%'],
                    zlevel: -2,
                    itemStyle: {
                        normal: {
                            borderColor: '#1f1e26',
                            borderWidth: 20,
                        }
                    },
                    label: {
                        normal: {
                            position: 'inside',
                            show: false,
                        }
                    },
                },
                {
                    hoverAnimation: false,
                    type: 'pie',
                    z: 1,
                    data: labelData1,
                    radius: ['50%', '70%'],
                    zlevel: -2,
                    itemStyle: {
                        normal: {
                            borderColor: '#1f1e26',
                            borderWidth: 20,
                        }
                    },
                    label: {
                        normal: {
                            position: 'inside',
                            show: false,
                        }
                    },
                },
                {
                    type: 'pie',
                    radius: ['48%', '55%'],
                    center: ['50%', '50%'],
                    data: [{
                        hoverOffset: 1,
                        value: 100,
                        name: '',
                        itemStyle: {
                            color: '#F16439',
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            normal: {
                                smooth: true,
                                lineStyle: {
                                    width: 0
                                }
                            }
                        },
                        hoverAnimation: false,
                    },
                        {
                            label: {
                                show: false
                            },
                            labelLine: {
                                normal: {
                                    smooth: true,
                                    lineStyle: {
                                        width: 0
                                    }
                                }
                            },
                            value: 100 - 64,
                            hoverAnimation: false,
                            itemStyle: {
                                color: '#3c3a48',
                            },
                        }
                    ]
                },
                {
                    type: 'pie',
                    name: '饼状背景',
                    radius: ['0%', '43%'],
                    center: ['50%', '50%'],
                    startAngle: 110,
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                                offset: 0,
                                color: '#07275B'
                            }, {
                                offset: 1,
                                color: '#06326E'
                            }]),
                        }
                    },
                    tooltip: {
                        show: false,
                    },
                    label: {
                        show: false
                    },
                    data: [50]
                },
            ]
        };
        myChart.clear()
        myChart.resize()
        option && myChart.setOption(option);
    }
喜欢