1. 程式人生 > >ECharts圖表常用屬性參考 -- 餅圖Pie

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} <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'
            //         }
            //     },
            // },
        }
    ],
};