ECharts图表常用属性参考 -- 饼图Pie

版权声明：JiahaoZhang原创文章，转载请注明出处 https://blog.csdn.net/GrootBaby/article/details/84324345

option = {
    color: ['#5697d0', '#56cfd0', '#56d078', '#a9d056', '#d0b856',
             '#d07b56', '#a656d0', '#d056a1', '#d05656', '#5673d0'],
    title : {
        text: '单位：元',
        textStyle: {
            color: '#000',
            fontSize: 14,
            fontWeight: 500,
        },
        x:'left',
    },
    //提示框组件,鼠标移动上去显示的提示内容
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}元 ({d}%)", //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比
    },
    //图例
    legend: {
        //data中的名字要与series-data中的列名对应，方可点击操控
        data: ['底盘','车身','五金','电气','通用件'],
        orient: 'vertical', //图例垂直排列
        right: '2%',
        top: '4%',
        textStyle : {
            color : '#',
            fontSize : 16,
        },
    },
    series : [
        {
            name: '单车结构',
            type: 'pie', //饼状图
            radius : '75%',
            center: ['44%', '50%'],
            data:[
                {value:335, name:'底盘'},
                {value:310, name:'车身'},
                {value:234, name:'五金'},
                {value:135, name:'电气'},
                {value:148, name:'通用件'}
            ],
            itemStyle: {
                normal:{ 
                    labelLine : {show:true},
                    label:{
                      show: true, 
                      formatter: '{b}：{c}' 
                    }, 
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            //标签 设置label标签之后，itemStyle样式会被覆盖
            // label: {
            //     normal: {
            //         show: true, //标签是否显示
            //         position: 'inside', //标签显示位置
            //         formatter: '{d}%', //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
            //         textStyle : { //标签样式
            //             align : 'center',
            //             baseline : 'middle',
            //             fontFamily : '微软雅黑',
            //             fontSize : 15,
            //             fontWeight : 'bolder'
            //         }
            //     },
            // },
        }
    ],
};