echarts之圖例設置

echarts之圖例設置
——以柱狀圖為例

1->普通柱狀圖

var option = {
    title: {
        text: '月銷量'
    },
    tooltip: {},
    legend: {
        data: ['銷量']
    },
    xAxis: {
        data: ["1月","2月","3月","4月","5月"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: ["1","2","3","4","5"]
    }]
};

2、三組圖例：

var option = {
    legend: {
        orient: 'horizontal', // 'horizontal'
        data:['直接訪問','郵件營銷','聯盟廣告'],
        textStyle: {  // 圖列內容樣式
            color: '#000',  // 字體顏色
        },
        x: 'center',//圖例位置，設置right發現圖例和文字位置反了，設置一個數值就好了
        y: 'top'//延Y軸居中
    },
    xAxis : [ //橫坐標
        {
            type : 'category',
            data : [''],
            axisLine: {
                lineStyle: {
                    color: "#fff",//橫坐標線條顏色
                }
            }
        }
    ],
    yAxis : [ //縱坐標
        {
            type : 'value',
            axisLabel: {
                show:true,
                formatter: '{value}%',//給Y軸數值添加百分號
            },
            axisLine: {
                lineStyle: {
                    color: "#fff",//縱坐標線條顏色
                }
            }
        }
    ],
    color:['red','yellow','blue'],//柱狀圖的顏色
    series : [
        {
            type:'bar',
            name:'直接訪問',
            data:[12],
        },
        {
            type:'bar',
            name:'郵件營銷',
            data:[17],
        },
        {
            type:'bar',
            name:'聯盟廣告',
            data:[25],
        },
    ]
};

總結：
圖例對應Option中的Legend->data，與series中的{}一一對應，即series[0],series[1]。而xAxis的data對應series[0][‘data’].length這個長度。

Ps：
堆疊柱狀圖：
在series的{}中加入：stack:’sum’,即可。Code:

var option = {
    title: {
        text: '標題欄',
        left: 'center',
        top: 'top',
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {
            type : 'shadow'
        }
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        y: 'top',
        data:['料費','工費']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : dataMouth,
        }
    ],
    yAxis : [
        {
            type : 'value',
            data : dataMoney //可省略，只要type : 'value',會自適應數據設置Y軸
        }
    ],
    series : [
        {
            name:'料費',
            type:'bar',
            stack:'sum',
            itemStyle:{
                normal:{
                    label: {
                        show: true,//是否展示
                    },
                    color:'#F89733'
                }
            },
            data:data1
        },
        {
            name:'工費',
            type:'bar',
            stack:'sum',
            barWidth : 20,
            itemStyle:{
                normal:{
                    label: {
                        show: true,//是否展示
                    },
                    color:'#DF7010'
                }
            },
            data:data2
        }

    ]
};