码迷,mamicode.com
首页 > 其他好文 > 详细

echarts 饼图

时间:2019-12-31 12:37:18      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:ref   font   指定   com   chart   echart   参考   设备   相对   

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组成
        }
    ]
});

参考文档

echarts 饼图

标签:ref   font   指定   com   chart   echart   参考   设备   相对   

原文地址:https://www.cnblogs.com/GetcharZp/p/12123630.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!