echarts动态循环出多个相同图表但不同数据动态渲染图表

效果图

代码

html部分

    <!-- 图表 -->
    <div
      style="height: 60vh; margin-top: 70px"
      v-for="(item, index) in aaa"
      :key="index"
    >
      <div style="height: 100%; width: 100%" class="roseChart"></div>
    </div>

js部分

data（）{
	return{
	//假数据模拟
	aaa: [
        {
          //图表标题
          text: "16吋口指标均值趋势",
          //图表legend
          legenddata: ["16UP+LOW", "16UP+LOW指标"],
          //Y轴刻度
          yAxis: {
            min: 0.5,
            max: 3.5,
            interval: 0.5,
          },
          //每条数据名字
          series: {
            name1: "16UP+LOW",
            name2: "16UP+LOW指标",
          },
                    //每条数据均值
          a: [
            0.97, 0.95, 0.97, 1.01, 0.95, 0.98, 0.99, 0.92, 0.94, 0.92, 0.97,
            0.99, 0.98, 0.99, 0.99, 0.99,
          ],
          //每条数据标准值
          b: [
            1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2,
            1.2, 1.2, 1.2,
          ],
        },
        {
          a: [
            0.99, 0.99, 0.99, 1.01, 0.99, 0.98, 0.99, 0.92, 0.94, 0.92, 0.97,
            0.99, 0.98, 0.99, 0.99, 0.99,
          ],
          b: [
            1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2,
            1.2, 1.2, 1.2,
          ],
          text: "20吋口指标均值趋势",
          legenddata: ["20UP+LOW", "20UP+LOW指标"],
          yAxis: {
            min: 0.5,
            max: 3.5,
            interval: 0.5,
          },
          series: {
            name1: "20UP+LOW",
            name2: "20UP+LOW指标",
          },
        },
      ],
}}


methods:{
    //图表
    topGraph(timearr) {
    //用ByClassName获取元素。
      var roseCharts = document.getElementsByClassName("roseChart");
      //循环元素
      for (var i = 0; i < roseCharts.length; i++) {
      //初始化每一个图表
        var myChart = echarts.init(roseCharts[i]);
        //在配置内把需要的属性动态添加进去
        var option = {
          title: {
            text: this.aaa[i].text,
            left: "center",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: this.aaa[i].legenddata,
            bottom: 10,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: 80,
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            //X轴刻度信息
            data: timearr,
            axisLabel: {
              interale: 0, //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签
              rotate: 40, //设置日期显示样式（倾斜度)
            },
          },
          yAxis: [
            {
              type: "value",
              min: this.aaa[i].yAxis.min,
              max: this.aaa[i].yAxis.max,
              interval: this.aaa[i].yAxis.interval,
              axisLabel: {
                formatter: "{value} ",
              },
            },
          ],
          series: [
            {
              name: this.aaa[i].series.name1,
              type: "line",
              data: this.aaa[i].a,
              color: "#0000FF",
              label: {
                show: true,
                formatter: function (data) {
                  return data.value;
                },
              },
            },
            {
              name:  this.aaa[i].series.name2,
              type: "line",
              data: this.aaa[i].b,
              lineStyle: {
                color: "#FF0000",
                width: 2,
                type: "dashed",
              },
            },
          ],
        };
        //初始化表格
        myChart.setOption(option);
        //监听，根据视口变化动态从新渲染表格
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },
}

注意项：

这循环一定要用getElementsByClassName，不能用id的，因为class是多选的，id只能一个，如果你用id的选择方法，就会后面的图把前面的图覆盖

容易踩坑的点：

这一段，尤其myChart.setOption(option);这句话，一定要注意，都是放在for循环内的，不要放在外面了，像我就复制自己的代码用的时候被坑了，因为是复制的，没有注意，把这段代码写在了for的括号外面，然后我一直循环出来后只出现最后一个图，前面的图不显示，我想了好久也没想明白，我复制的一样的代码为啥就不生效了。然后仔细比对发现写在外面了，淦！

        //初始化表格
        myChart.setOption(option);
        //监听，根据视口变化动态从新渲染表格
        window.addEventListener("resize", function () {
          myChart.resize();
        });

如果需要增加内部滚动条的注意事项：

需求要这个页面一个图的时候正常显示，多个图表的时候Y轴滚动条是内部滚动条，而不是整个网页的滚动条，那我的做法肯定就是给这个套一个大的div限定一个宽高，然后overflow:auto;就实现了内部的滚动条，但是这样就会出现一个问题，我选一个条件出来了图，然后我再次多选一个条件，搜索后第一个图没有自适应大小，还是按照全屏的来的，而第二个图以后开始就按照有内部滚动条的大小自适应了，这时候需要做的是在发送请求时先把循环div的aaa给清空，然后再赋值。这样就可以把所有的图都从新生成一次。也就自适应了。