将多个图例装入一个echarts实例

需求:将四类数据放入 一个echarts表格中进行对比.

1.因为是四个数据,所以我先用gird对图形位置进行了划分,此时grid使用的是数组,而非一个对象.

2.将位置划分好后,x轴与y轴数据也同样需要使用数组包含每个图形.

3.设置了数据视图的表格新样式.

4.可以直接将以下代码放置echarts代码编辑中预览效果

var dataList = [120, 132, 101, 134, 190, 230, 210];
function handleData() {
  let arr = dataList.map((item) => {
    return -item;
  });
  return arr;
}
option = {
  title: {
    text: 'xxx'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // 对tooltip中数值部分格式化
    valueFormatter: function (value) {
      if (value < 0) {
        return -value;
      } else {
        return value;
      }
    }
  },
  toolbox: {
    show: true,
    feature: {
      dataView: {
        // 表格部分
        optionToContent: function (value) {
          var newArr = [];
          var axisData = value.xAxis[0].data;
          var series = value.series;
          // 表头
          var tdHeaders =
            '<td style="padding: 5px 15px;background-color:rgb(204,204,204);"></td>';
          axisData.forEach(function (item) {
            // 组装表头
            tdHeaders +=
              '<td style="padding: 5px 15px;background-color:rgb(204,204,204);">' +
              item +
              '</td>';
          });

          var table = `
                  <div class="table-responsive">
                  <table class="table table-bordered table-striped table-hover" border style="text-align:center;cellpadding:1;border-collapse:collapse; cellspacing:1;width:100%;">
                  <tbody>
                  <tr> 
                    ${tdHeaders}
                  </tr>
                  `;
          var tdBodys = ''; // 数据
          for (let i = 0; i < series.length; i++) {
            // 右边的合计
            let totalPrice = 0;
            for (let j = 0; j < axisData.length; j++) {
              // totalPrice += series[i].data[j]
              tdBodys +=
                '<td style="padding: 5px 15px">' + series[i].data[j] + '</td>'; // 组装表数据
            }
            // tdBodys += '<td style="padding: 5px 15px;">' + totalPrice + '</td>'
            table +=
              '<tr><td style="padding: 5px 15px">' +
              series[i].name +
              '</td>' +
              tdBodys +
              '</tr>';
            tdBodys = '';
          }
          table += '</tbody></table></div>';
          return table;
        }
      }
    }
  },
  // 划分四个图例的位置
  grid: [
    {
      left: '7%',
      top: '7%',
      width: '90%',
      height: '60%'
    },
    {
      left: '7%',
      top: '67%',
      width: '90%',
      height: '40%'
    },
    {
      left: '7%',
      top: '7%',
      width: '90%',
      height: '60%'
    },
    {
      left: '7%',
      top: '7%',
      width: '90%',
      height: '60%'
    }
  ],
  xAxis: [
    {
      gridIndex: 0,
      show: true,
      // 坐标轴线
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          color: '#58A2F8'
        }
      },
      // 坐标轴刻度
      axisTick: {
        show: false
      },
      // 坐标轴刻度标签
      axisLabel: {
        show: false
      },
      data: ['奶茶', '可乐', '冰淇淋', '牛奶', '燕麦', '瓜子', '杨梅']
    },
    {
      gridIndex: 1,
      show: true,
      position: 'bottom',
      // 坐标轴线
      axisLine: {
        show: false
      },
      // 坐标轴刻度
      axisTick: {
        show: false
      },
      // 坐标轴刻度标签
      axisLabel: {
        // show: false
        color: '#333'
      },
      data:  ['奶茶', '可乐', '冰淇淋', '牛奶', '燕麦', '瓜子', '杨梅']
    },
    {
      gridIndex: 2,
      show: false,
      data:  ['奶茶', '可乐', '冰淇淋', '牛奶', '燕麦', '瓜子', '杨梅']
    },
    {
      gridIndex: 3,
      show: false,
      data: ['奶茶', '可乐', '冰淇淋', '牛奶', '燕麦', '瓜子', '杨梅']
    }
  ],
  yAxis: [
    {
      gridIndex: 0,
      // 坐标轴线
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          color: '#58A2F8'
        }
      },
      // 坐标轴刻度
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#333'
      }
    },
    {
      gridIndex: 1,
      // 坐标轴线
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          color: '#58A2F8'
        }
      },
      // 坐标轴刻度
      axisTick: {
        show: false
      },
      // 坐标轴刻度标签
      axisLabel: {
        color: '#333',
        //把x轴的负数改成正数，毕竟对比不需要负数，如果需要负数把axisLabel删掉就行
        formatter: function (value) {
          if (value < 0) {
            return -value;
          } else {
            return value;
          }
        }
      }
    },
    { gridIndex: 2, max: 100, show: false },
    { gridIndex: 3, max: 100, show: false }
  ],
  series: [
    {
      name: '销量',
      type: 'bar',
      xAxisIndex: 0,
      yAxisIndex: 0,
      label: {
        show: true,
        position: 'top',
        color: '#63A4F8'
      },
      emphasis: {
        focus: 'series'
      },
      data: [100, 302, 3401, 3074, 3090, 4500, 4020],
      // 渐变色
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: '#DA5583'
        },
        {
          offset: 1,
          color: '#CE70cb'
        }
      ])
    },
    {
      name: '店铺数量',
      type: 'bar',
      stack: 'Total',
      xAxisIndex: 1,
      yAxisIndex: 1,
      emphasis: {
        focus: 'series'
      },
      label: {
        show: true,
        position: 'bottom',
        color: '#76E632',
        formatter: function (value) {
          if (value.data < 0) {
            return -value.data;
          } else {
            return value.data;
          }
        }
      },
      data: handleData(),
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: '#70E326'
        },
        {
          offset: 1,
          color: '#A6FE6D'
        }
      ])
    },
    {
      name: '同比',
      type: 'line',
      data: [5, 15, 20, 16, 55, 68, 77],
      xAxisIndex: 2,
      yAxisIndex: 2,
      color: '#33BBB0',
      symbol: 'rect',
      symbolSize: 4
    },
    {
      name: '环比',
      type: 'line',
      data: [50, 25, 10, 16, 45, 28, 37],
      xAxisIndex: 3,
      yAxisIndex: 3,
      color: '#FFB518',
      symbol: 'rect',
      symbolSize: 4
    }
  ]
};