echarts 异步数据获取、通过切换搜索条件后重复渲染问题、添加loading

本文链接：https://blog.youkuaiyun.com/qq_42103673/article/details/116007144

本文探讨了在ECharts中处理数据请求前置、同步渲染失败的问题，提出使用Promise.all管理和重绘策略。同时，讲解了如何避免重复渲染，提高性能，并解决了坐标系语言显示问题和警告。关键词：ECharts、异步请求、折线图、重用策略、性能优化、多语言支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.同一坐标系渲染多条折线

问题：在数据请求回来之前已经开始画线，导致线条画不上的问题

解决：

    // 曲线图1
    actulePriceList1(){
      return new Promise((resolve, reject) => {
        priceClient.findActulePriceListByName(StringValue.of(this.condition.varietyNameCode)).then(res=>{
          resolve(/*你需要返回的数据*/)
        })
      })
    },
    // 曲线图2
    actulePriceList2(){
      return new Promise((resolve, reject) => {
        priceClient.findActulePriceListByName(StringValue.of(this.condition.varietyNameCode)).then(res=>{
          resolve(/*你需要返回的数据*/)
        })
      })
    },

//调用请求方法重渲染
 initChart(){
      Promise.all([
        this.actulePriceList1(),
        this.actulePriceList2(),
      ]).then(res => {
        this.option.series[0].data=res[0]
        this.option.series[1].data=res[1]
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(document.getElementById('container'))
        // 根据this.option的数据绘制图表
        this.myChart.setOption(this.option,true) 
      })
    },

2.解决重复渲染

当通过切换品种时重新渲染图线时会出现如下问题：

    initChart(){
      this.myChart = this.$echarts.init(document.getElementById('container'))
      this.myChart.showLoading()//添加loading
      Promise.all([
        this.actulePriceList1(),
        this.actulePriceList2(),
      ]).then(res => {
        .......
        this.myChart.dispose(); // 销毁掉原实例
        this.myChart = this.$echarts.init(document.getElementById('container'))// 再重新创建实例
        // 根据this.option的数据绘制图表
        this.myChart.setOption(this.option,true) 
        this.myChart.hideLoading()//隐藏loading
      })
    },

loading的添加可参考官方文档：https://echarts.apache.org/zh/api.html#echartsInstance.showLoading

3.坐标系显示英文问题

如图：

解决：

可在实例时传入如下配置项

注：echarts中内置了中英文语言包，若要其他语言需自己配置其它语言包

  this.myChart = this.$echarts.init(document.getElementById('targetPriceContainer'),'',{ locale: "ZH" })

4.报如下警告

在实例化的时候加入下判断

 this.myChart = this.$echarts.getInstanceByDom(document.getElementById('container')); 
        if(this.myChart==null){
          this.myChart = this.$echarts.init(document.getElementById('container'))
        }