echarts 饼图在中间显示百分比

echarts饼图在中间显示百分比,使用graphic

setEchartOption(val) {
    const seriesData = [
        { value: 1048, name: '完成值' },
        { value: 735, name: '目标值' }
    ]
    const option = {
        grid: {
            containLabel: true
        },
        tooltip: {
            trigger: 'item'
        },
        color: ['#74A0FA', '#73DEB3'],
        series: [
            {
                type: 'pie',
                radius: ['50%', '80%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: seriesData
            }
        ],
        // 绘制中间的百分比
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: Math.round((seriesData[0].value / seriesData[1].value) * 100) + '%',
                textAlign: 'center',
                fill: '#666666',
                fontSize: 20
            }
        }
    }
    this[`chart${val}`].setOption(option)
}

 

posted @ 2024-11-14 17:44  hong_li  阅读(28)  评论(0编辑  收藏  举报