多个legend对应多个name的echarts图形

有人说，不就是个图嘛，复制粘贴就使用不就完了，哈哈哈哈，好像也不是不可以，不过echars难点不在于用，而在于根据UI设计的图行来造，这里就说几个最近我常用的点。

1.legend的修改

如果是想对legend进行改变，则采用的方式如下

legend: {
                icon: "circle", //改变前面图标的形状，如圆形，正正方形等
                orient: 'vertical', //纵向排列
                left: '2%',
                top:'16%',
                itemGap:30,   //legend中几个选项之间的间距
                itemHeight:10,  //改变前面图标形状的宽高
                itemWidth:10,
                data:[xxx]   //此处的data数据要与下面series里面的name对应
            },

注意，有时候会发现，legend和图形表格之间间距过密的情况，此时需要通过gird去控制表格

 grid: {
                left: '3%',
                right: '4%',
                top:'3%',
                height: '40%',
                containLabel: true
            },

2.如果要实现多个数据的legend，就需要在series用多个name名称

series: [
                {
                    //此name名称需要与legend中的data数据对应
                    name: 'xxx',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [xxx]
                },
                {
                    name: 'xxx',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [xxx]
                },
                {
                    name: 'xxx',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [xxx]
                },
                {
                    name: 'xxx',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [xxx]
                },
                {
                    name: 'xxx',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [xxx]
                }
            ],

案例图，适合以上所提到的情况

代码

var echarts = require('echarts');

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category'
  },
  legend: {
    icon: 'circle', //改变前面图标的形状，如圆形，正正方形等
    orient: 'vertical', //纵向排列
    left: '2%',
    top: '16%',
    itemGap: 30, //legend中几个选项之间的间距
    itemHeight: 10, //改变前面图标形状的宽高
    itemWidth: 10,
    data: ['a', 'b', 'c', 'd', 'e'] //此处的data数据要与下面series里面的name对应
  },
  yAxis: {
    type: 'value'
  },
  grid: {
    left: '20%',
    right: '4%',
    top: '3%',
    containLabel: true
  },
  series: [
    {
      //此name名称需要与legend中的data数据对应
      name: 'a',
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      emphasis: {
        focus: 'series'
      },
      data: [123]
    },
    {
      name: 'b',
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      emphasis: {
        focus: 'series'
      },
      data: [231]
    },
    {
      name: 'c',
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      emphasis: {
        focus: 'series'
      },
      data: [342]
    },
    {
      name: 'd',
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      emphasis: {
        focus: 'series'
      },
      data: [231]
    },
    {
      name: 'e',
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      emphasis: {
        focus: 'series'
      },
      data: [342]
    }
  ]
};

option && myChart.setOption(option);

效果图