echarts 饼图

Posted 2020-11-25 getcharzp

echarts.init(document.getElementById(id)).setOption({
    backgroundColor: ‘#2c343c‘, // 背景颜色
    textStyle: {
        color: ‘rgba(255, 255, 255, 0.3)‘, // 文本颜色
        fontSize: 12 // 文本带下
    },
    title: {
        text: ‘设备 (ID：‘+ title +‘)‘, // 标题
        x: ‘center‘, // 位置
        textStyle: {
            color: ‘white‘, // 标题颜色
            fontSize: 13 // 标题大小
        },
        padding: [20, 20, 20, 20] // 通过padding对标题定为
    },
    series : [
        {
            type: ‘pie‘, // 指定图表为饼图
            radius: ‘50%‘, // 饼图相对于容器的大小
            center: [‘50%‘, ‘55%‘], // 饼图相对于容器的位置[左右， 上下]
            label: {
                normal: {
                    formatter: "{b}:{d}%", // 文字类型 {a}=> 标题 ，{b} => data中的name，{c} => data中的value，{d} => 百分比
                },
            },
            data:data // 数据，由name和value组成
        }
    ]
});

参考文档