echarts 实现分组和显示总数

echart 除了能显示坐标轴外，还可以对坐标轴进行分组，可以更直观的观察数 据，本博文记录一下关于分组的探索，先展示一下效果图：

// 直接复制到echarts官方示例中查看效果
let xAxisData = [];
let data1 = [];
let data2 = [];
let data3 = [];
let data4 = [];
let dataTotal = [];
for (let i = 0; i < 10; i++) {
  xAxisData.push('Class' + i);
  data1.push(+(Math.random() * 2).toFixed(2));
  data2.push(+(Math.random() * 5).toFixed(2));
  data3.push(+(Math.random() + 0.3).toFixed(2));
  data4.push(+Math.random().toFixed(2));
  dataTotal.push((data1[i] + data2[i] + data3[i] + data4[i]).toFixed(2));
}
var emphasisStyle = {
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  }
};
option = {
  legend: {
    data: ['bar', 'bar2', 'bar3', 'bar4'],
    left: '10%'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: [
    {
      data: xAxisData,
      name: 'X Axis'
    },
    {
      // 将组设置在底部，默认顶部
      position: 'bottom',
      // 偏移距离
      offset: 50,
      axisLine: {
        // 是否显示坐标轴轴线
        show: false
      },
      axisTick: {
        // 刻度线长度
        length: 50,
        inside: true,
        interval: (index, value) => {
          // 坐标轴刻度的显示间隔
          return index === 0 || index === 4 || index === 9;
        }
      },
      axisLabel: {
        textStyle: {
          fontSize: 12
        },
        // 刻度标签是否朝内，默认朝外
        inside: true,
        // 坐标轴刻度标签的显示间隔，强制显示所有标签
        interval: 0,
        // 刻度标签的内容格式器
        formatter: (val, index) => {
          if (val === 'Class1') {
            // 可以使用刻度数值，只能在某个刻度下面
            // 如果有偏移，请使用空格，也可以使用rich
            // return '                 group1';
            return '{centerStyle|group1}';
          } else if (index === 6) {
            // 可以使用索引
            return 'group2';
          } else if (index === 9) {
            return 'group3';
          }
        },
        rich: {
          centerStyle: {
            padding: [0, 0, 0, 60]
          }
        }
      },
      // 与x轴保持一致
      data: xAxisData
    }
  ],
  yAxis: {},
  series: [
    {
      // 象形柱图
      type: 'pictorialBar',
      name: 'Total',
      // 以最大值为基准，做一个直径为1的圆点
      symbolSize: [1, 1],
      symbolPosition: 'end',
      //   设置为透明色
      color: 'transparent',
      z: 2,
      label: {
        normal: {
          // 显示label，即总数
          show: true,
          position: 'top'
        }
      },
      data: dataTotal
    },
    {
      name: 'bar',
      type: 'bar',
      stack: 'one',
      emphasis: emphasisStyle,
      data: data1
    },
    {
      name: 'bar2',
      type: 'bar',
      stack: 'one',
      emphasis: emphasisStyle,
      data: data2
    },
    {
      name: 'bar3',
      type: 'bar',
      stack: 'one',
      emphasis: emphasisStyle,
      data: data3
    },
    {
      name: 'bar4',
      type: 'bar',
      stack: 'one',
      emphasis: emphasisStyle,
      data: data4
    }
  ]
};
myChart.on('brushSelected', function(params) {
  var brushed = [];
  var brushComponent = params.batch[0];
  for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
    var rawIndices = brushComponent.selected[sIdx].dataIndex;
    brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
  }
  myChart.setOption({
    title: {
      backgroundColor: '#333',
      text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
      bottom: 0,
      right: '10%',
      width: 100,
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    }
  });
});