根据接口中的数据，循环出多个echarts图表

最新推荐文章于 2024-03-28 17:33:20 发布

Simplicity438

最新推荐文章于 2024-03-28 17:33:20 发布

阅读量598

点赞数 1

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/weixin_55966654/article/details/132054943

版权

文章介绍了如何在Vue应用中使用接口数据动态生成图表，重点展示了如何使用ECharts库，通过`$nextTick`确保DOM加载完成后再初始化图表并设置选项。

摘要由CSDN通过智能技术生成

1.效果图

在这里插入图片描述

2.接口数据

在这里插入图片描述

3.开发如下

<div class="chart-list">
  <div v-for="(item,index) in chartData" :key="index" style="margin-top:5px;">
    <div>{{item.title}}</div>
    <div  :id="'myChart'+index" style="width: 100%;height: 200px;margin-bottom: 10px;"></div>
  </div>
</div>

获取接口数据

getPredictionData() {
  getPredictionData({
    id: this.detector,
    type:this.detectorType,
  }).then(res => {
    this.content1 = res.content1
    this.content2 = res.content2
    this.chartData = res.list;
    this.forecastChartShow(this.chartData)
  }).catch(err => {
    // Message.error(err)
  })
},

生成图表,this.$nextTick是关键

forecastChartShow(data) {
  data.map((item, index) => {
    this.$nextTick(() =>{
      let myChart= echarts.getInstanceByDom(document.getElementById('myChart'+index)); //有的话就获取已有echarts实例的DOM节点。
      if (myChart== null) { // 如果不存在，就进行初始化。
        myChart= echarts.init(document.getElementById('myChart'+index));
      }
      myChart.setOption({
      ........
      })
    })
  });
},