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
        }

    ]
};