Echarts中实现一个初始化有默认选中的内容的饼图

先上图:

这是实现的效果

JS代码部分

pieCharts() {
    let chartDom = echarts.init(document.getElementById('pieEcharts'))
    // 整理的数据格式
    let dataSource = [
        { value: 1048, name: '发文管理', "total": '200件', "ZCZB": "200件", "ZCBJ": "100件", "YQZB": "109件", "YQBJ": "10件" },
        { value: 735, name: '收文管理', "total": '200件', "ZCZB": "21件", "ZCBJ": "100件", "YQZB": "111件", "YQBJ": "11件" },
        { value: 580, name: '行政事务', "total": '200件', "ZCZB": "220件", "ZCBJ": "100件", "YQZB": "112件", "YQBJ": "12件" },
        { value: 484, name: '督办管理', "total": '230件', "ZCZB": "230件", "ZCBJ": "100件", "YQZB": "113件", "YQBJ": "13件" },
        { value: 300, name: '会议管理', "total": '200件', "ZCZB": "240件", "ZCBJ": "100件", "YQZB": "114件", "YQBJ": "14件" }
    ]
    chartDom.dispatchAction({
        type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0,
        });
        let option = {
            color: ['#73a0fa', '#73deb3', '#7585a2', '#f7c739', '#eb7e65'],
            tooltip: {
                show: false,
                trigger: 'item'
            },
            legend: {
                bottom: '10%',
                right: '2%',
                orient: 'vertical',
                icon: 'circle',
                itemHeight: getFontSize(14),
                itemWidth: getFontSize(14),
                fontSize:getFontSize(14)
            },
            series: [{
                type: 'pie',
                radius: [getFontSize(100), getFontSize(140)],
                center: ['40%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: getFontSize(2)
                },
                label: {
                    show: false,
                    position: 'center',
                    formatter: params => {
                        return `{title|${params.data.name}}\n{list|全部文件}:{content|${params.data.total}}\n{list|正常在办}:{content|${params.data.ZCZB}}{list|\n正常办结}:{content|${params.data.ZCBJ}}\n{list|逾期在办}:{content|${params.data.YQZB}}\n{list|逾期办结}:{content|${params.data.YQBJ}}`
                    },
                    rich: {
                        title: {
                            fontFamily: 'PingFangSC-Medium',
                            fontSize: getFontSize(14),
                            color: '#333333',
                            fontWeight: 700,
                            align: 'left',
                            lineHeight: getFontSize(18),
                        },
                        list: {
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: getFontSize(14),
                            color: '#333333',
                            fontWeight: 500,
                            align: 'left',
                            lineHeight: getFontSize(18),
                        },
                        content: {
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: getFontSize(14),
                            color: '#333333',
                        }
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        formatter: params => {
                            return `{title|${params.data.name}}\n{list|全部文件}:{content|${params.data.total}}\n{list|正常在办}:{content|${params.data.ZCZB}}{list|\n正常办结}:{content|${params.data.ZCBJ}}\n{list|逾期在办}:{content|${params.data.YQZB}}\n{list|逾期办结}:{content|${params.data.YQBJ}}`
                        },
                        rich: {
                            title: {
                                fontFamily: 'PingFangSC-Medium',
                                fontSize: getFontSize(14),
                                color: '#333333',
                                fontWeight: 700,
                                align: 'left',
                                lineHeight: getFontSize(18),
                            },
                            list: {
                                fontFamily: 'PingFangSC-Regular',
                                fontSize: getFontSize(14),
                                color: '#333333',
                                fontWeight: 500,
                                align: 'left',
                                lineHeight: getFontSize(18),
                            },
                            content: {
                                fontFamily: 'PingFangSC-Regular',
                                fontSize: getFontSize(14),
                                color: '#333333',
                            }
                        }
                    }
                },
                labelLine: {
                    show: false
                },
                data: dataSource
            }]
        };
        chartDom.clear()
        chartDom.setOption(option);
        chartDom.dispatchAction({
            type: 'highlight',
                seriesIndex: 0,
                dataIndex: 0,
            });
            //hover选中
            chartDom.on('mouseover', function(e) {
                if (e.dataIndex != index) {
                    chartDom.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: index,
                    });
                }
             });
             chartDom.on('mouseout', function(e) {
                    index = e.dataIndex;
                    chartDom.dispatchAction({
                      type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: index,
                    });
            });
        window.addEventListener("resize", function () {
            chartDom.resize();
        });
}复制