Echarts one option controls multiple charts and displays all abscissas

Paste the code for fear that I will forget

When writing a project today, multiple histograms are required, but there are too many single-write options. After checking, you can use grid to put them in the same option. You only need to set the gridIndex, and you can also achieve single control.

The required result graph is as follows:

methods: {
    initCharts() {
//初始化图表，并挂载到DOM树中
      var Map = echarts.init(document.getElementById("map"));
      var option = {
//由grid控制各个图表，x，y为与左上角顶点的距离，控制各个图表的位置及大小
        grid: [
          { x: "2%", y: "5%", width: "40%", height: "18%" },
          { x: "50%", y: "5%", width: "40%", height: "18%" },
          { x: "2%", y: "45%", width: "40%", height: "18%" },
          { x: "50%", y: "45%", width: "40%", height: "18%" },
          { x: "2%", y: "75%", width: "40%", height: "18%" }
        ],

        title: [
          { text: "林长总数" },
          { text: "护林员总数", left: "50%" },
          { text: "监督员总数", top: "40%" },
          { text: "技术员总数", left: "50%", top: "40%" },
          { text: "警员总数", top: "70%" }
        ],
//xAxis控制横坐标
        xAxis: [
          {
            data: this.areaNameList,
//由不同的gridIndex对应x轴，y轴及数据
            gridIndex: 0,
//axisTick控制刻度线，alignWithLabel控制标签与刻度线对齐，interval为刻度的间隔，设为0就可以显示所有刻度
            axisTick: { alignWithLabel: true, interval: 0 },
//interval控制标签之间的间隔，设0将显示所有标签
            axisLabel: {
              interval: 0,
//formatter格式化，将原标签纵向展示（split方法为拼接字符串，将每一个字用\n拼接就可以纵向展示
              formatter: function(value) {
                return value.split("").join("\n");
              }
            }
          },
          {
            data: this.areaNameList,
            gridIndex: 1,
            axisTick: { alignWithLabel: true, interval: 0 },
            axisLabel: {
              interval: 0,
              formatter: function(value) {
                return value.split("").join("\n");
              }
            }
          },
          {
            data: this.areaNameList,
            gridIndex: 2,
            axisTick: { alignWithLabel: true, interval: 0 },
            axisLabel: {
              interval: 0,
              formatter: function(value) {
                return value.split("").join("\n");
              }
            }
          },
          {
            data: this.areaNameList,
            gridIndex: 3,
            axisTick: { alignWithLabel: true, interval: 0 },
            axisLabel: {
              interval: 0,
              formatter: function(value) {
                return value.split("").join("\n");
              }
            }
          },

          {
            data: this.areaNameList,
            gridIndex: 4,
            axisTick: { alignWithLabel: true, interval: 0 },
            axisLabel: {
              interval: 0,
              formatter: function(value) {
                return value.split("").join("\n");
              }
            }
          }
        ],

        yAxis: [
//minInterval控制最小间隔，不设置的话会有小数，同样由gridIndex绑定各个图表
          { gridIndex: 0, minInterval: 1 },
          { gridIndex: 1, minInterval: 1 },
          { gridIndex: 2, minInterval: 1 },
          { gridIndex: 3, minInterval: 1 },
          { gridIndex: 4, minInterval: 1 }
        ],
        series: [
          {
            type: "bar",
            data: this.lzCountList,
//此处的两个index必须一致，否则会报错
            xAxisIndex: 0,
            yAxisIndex: 0
          },
          {
            type: "bar",
            data: this.forestRangerCountList,
            xAxisIndex: 1,
            yAxisIndex: 1
          },
          {
            type: "bar",
            data: this.supervisorCountList,
            xAxisIndex: 2,
            yAxisIndex: 2
          },
          {
            type: "bar",
            data: this.fuzzCountList,
            xAxisIndex: 3,
            yAxisIndex: 3
          },
          {
            type: "bar",
            data: this.technicianCountList,
            xAxisIndex: 4,
            yAxisIndex: 4
          }
        ]
      };

      Map.setOption(option);
    },