Echarts 一个option控制多个图表及横坐标全部显示

贴一下代码怕自己忘了

今天写项目的时候，要求多个柱状图，但是单写option太多了，查了一下可以用grid放在同一个option中，只需要设置gridIndex即可，也可以实现单个控制。

要求的结果图如下：

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);
    },