Echarts 环形饼状图实例效果

echarts yekong

Echarts 环形饼状图实例效果

    function getecharts4() {
        var chartDom = document.getElementById('echarts4');
        var myChart = echarts.init(chartDom);
        var color = [
            '#0265D9',
            '#F3713E',
        ];
        var seriesData = [
            {"name": "未评估", "value": 30},
            {"name": "已评估", "value": 10}
        ]

        var option = {
            color: color,
            title: [
                {
                    top: '38%',
                    x: '42%',
                    text: '365',
                    textStyle: {
                        fontSize: FontChart(44),
                        color: 'rgba(2, 116, 229, 1)',
                        fontFamily: 'DigitalDismay',
                    },
                }, {
                    top: '54%',
                    x: '43%',
                    text: '<70%',
                    textStyle: {
                        fontSize: FontChart(16),
                        color: '#DDEEFF',
                    },
                },
            ],
            grid: {
                top: '15%',
                left: 0,
                right: '1%',
                bottom: 5,
                containLabel: true,
            },
            series: [
                {
                    name: '需求类型占比',
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['45%', '62%'],
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            formatter: '{value|{c}}\n{label|{b}}',
                            rich: {
                                value: {
                                    padding: 5,
                                    align: 'center',
                                    verticalAlign: 'middle',
                                    fontSize: FontChart(32),
                                },
                                label: {
                                    align: 'center',
                                    verticalAlign: 'middle',
                                    fontSize: FontChart(16),
                                },
                            },
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: FontChart(12),
                            },
                        },
                    },
                    labelLine: {
                        show: false,
                        length: 0,
                        length2: 0,
                    },
                    data: seriesData,
                },
                {
                    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.setOption(option);

        getDefaultSelected(myChart)

        function getDefaultSelected(myChart) {
            let index = 0;
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: 0,
            });
            myChart.on('mouseover', (e) => {
                if (e.dataIndex !== index) {
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: index,
                    });
                }
            });
            myChart.on('mouseout', (e) => {
                index = e.dataIndex;
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: e.dataIndex,
                });
            });
        }

        myChart.clear()
        myChart.resize()
        option && myChart.setOption(option);
    }
喜欢