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

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} 
{b} : {c}元 ({d}%)", //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比
        textStyle : {
            fontSize : 16,
        },
        //formatter: function(data){
            //return data.seriesName + "
"+ data.name+ " : " + data.value + "辆  ("+data.percent.toFixed(0)+"%)";
        //},  //自定义百分比保留位数
    },
    //图例
    legend: {
        //data中的名字要与series-data中的列名对应，方可点击操控
        data: ['底盘','车身','五金','电气','通用件'],
        orient: 'vertical', //图例垂直排列
        right: '2%',
        top: '4%',
        // orient: 'vertical', //图例垂直排列
        // left: '8%',  //图例组件离容器左侧的距离
        // align: 'right',  //图例标记和文本的对齐
        // padding: [80, 0],  //设置上下左右的内边距
        // itemWidth: 50,  //图例标记的图形宽度
        // itemHeight: 18,  //图例标记的图形高度
        // itemGap: 30,  //图例每项之间的间隔
        // 图例横向排列图标对齐
        // formatter: function( name ) {
        //      return '{a|' + name + '}';
        // },
        // textStyle: {
        //     rich:{
        //         a: {
        //             width: 100
        //         }
        //     },
        //     color : '#',
        //     fontSize : 16,
        // }
        textStyle : {
            color : '#',
            fontSize : 16,
        },
    },
    series : [
        {
            name: '单车结构',
            type: 'pie', //饼状图
            clockwise: false, //饼图的扇区是否是顺时针排布，默认true
            hoverOffset: 10, //高亮扇区的偏移距离，默认10
            startAngle: 90, //起始角度，默认90度(12点钟方向)
            radius : '75%',
            center: ['44%', '50%'],
            /**
	         *  是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
	         * 'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
	         * 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
	         */
            roseType : 'radius',  //是否展示成南丁格尔图：radius 半径模式；area 面积模式
            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}',
                      fontSize: 16,
                    }, 
                },
                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值计算百分比
            //         formatter: function(data){
            //             return data.percent.toFixed(0)+"%";  //百分比不要小数点
            //         },
            //         textStyle : { //标签样式
            //             align : 'center',
            //             baseline : 'middle',
            //             fontFamily : '微软雅黑',
            //             fontSize : 15,
            //             fontWeight : 'bolder'
            //         }
            //     },
            // },
        }
    ],
};