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

最新推荐文章于 2023-10-17 17:06:11 发布

原创

最新推荐文章于 2023-10-17 17:06:11 发布 · 4.4k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #v-for #动态

本文详细介绍了使用Echarts在Vue中动态渲染多个图表的实现过程，强调了for循环内初始化图表的重要性，并分享了如何处理内部滚动条问题，确保多图表展示时的自适应性。同时提到了在数据更新时清空图表数据来实现图表的重新渲染，以保持内部滚动条的正确显示。

效果图

在这里插入图片描述

代码

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: