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 @   hong_li  阅读(559)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示