echarts series的遍历生成

---

前言

多种类柱状图的遍历，如果是按照echarts上面的写法，4种需要series写四个对象，代码就会很冗余。如下图

代码

这是在vue中使用的，echarts全局注册的

let color = [
        { s: '#2184F4', e: '#92BAFD' },
        { s: '#F88528', e: '#FFB77D' },
        { s: '#FF5563', e: '#FF8A94' },
        { s: '#66B3D8', e: '#BFE7FA' }
      ]
let dataObj = [
        { name: '雨天', data: [63, 38, 40] },
        { name: '阴天', data: [20, 32, 10] },
        { name: '多云', data: [68, 33, 86] },
        { name: '晴天', data: [18, 36, 86] },
      ]
      let chart = self.$echarts.init(document.getElementById('chart'));

      chart.setOption({
        title: {
          show: false
        },
        grid: {
          top: 60,
          left: 0,
          right: 15,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          data: ['2014年', '2015年', '2016年'],
          axisLabel: {
            textStyle: {
              color: '#76C0FF',
              fontSize: 20,
              fontWeight: 400
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#02567A',
              width: 2
            }
          },
          z: 10
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: "#003C56",
              width: 2
            },
          },
          axisLine: {
            lineStyle: {
              color: '#02567A',
              width: 2
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#76C0FF',
              fontSize: 18,
              fontWeight: 400
            }
          },
          max: 100,
        },
        legend: {
          itemHeight: 16,
          itemWidth: 16,
          itemGap: 8,
          textStyle: {
            fontSize: 16,
            fontWeight: 400,
            color: '#939BDA',
            lineHeight: 36
          }
        },
        series: function () {
          let serie = [];
          dataObj.map((item, index) => {
            let data = {
              name: item.name,
              type: 'bar',
              barWidth: 16,
              barGap: 0.5,  // 这是以barWidth为倍数的
              itemStyle: {
                color: new self.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: color[index].e },
                    { offset: 0.5, color: color[index].s },
                    { offset: 1, color: color[index].s }
                  ]
                )
              },
              data: item.data
            }
            serie.push(data);
          });
          return serie;
        }()
      }, true);