echarts set of Legend

echarts set of Legend
- A Case Study of the histogram

1-> Normal Histogram

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, three groups of legend:

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

Summary: The
legend corresponds to the Option Legend-> data, the series of correspondence {}, i.e. series [0], series [1 ]. And xAxis data corresponding to the series [0] [ 'data' ]. Length this length.

Ps:
Stacked Column:
added in series in the {}: stack: 'sum', can. 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
        }

    ]
};

Guess you like

Origin www.cnblogs.com/LittleBugProducer/p/11570010.html