echarts小程序异步加载

最新推荐文章于 2024-04-25 22:02:20 发布

啊炳阿

最新推荐文章于 2024-04-25 22:02:20 发布

阅读量564

点赞数

分类专栏： echarts与小程序文章标签：小程序 echarts

本文链接：https://blog.youkuaiyun.com/weixin_45885731/article/details/119636216

版权

echarts与小程序专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在微信小程序中如何实现ECharts图表的异步加载，包括创建option，向后端请求数据，实例化ECharts，以及防止闪屏的处理。通过setData更新数据，init方法初始化图表，并使用clearOption清空旧数据，确保平滑过渡。同时，文章提到了导入echarts库和配置文件的方法。

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

如何实现异步加载？
第一步：创建option 方法设置好样式后返回option，异步的值可以通过传参的方法传入option。

第二步：向后段请求数据，当请求完毕后用setData方法保存数据

// 折线图图表
let tableChart = null;//在page外定义一个全局的变量
  getData () {
    this.data.timeList = [];
    this.data.valueList = [];
    wx.request({
      url: 'URL',
      data: '',
      success: (res) => {
        this.setData({
          valueList: res.valueList,
          timeList:res.timeList
        });
        this.tabelFrist();
      }
    });
  },

第三步：调用实例化echarts

tabelFrist () {
    this.chart = this.selectComponent('#mychart-dom-line'); // 去获取echarts  这里的id就是html中echarts的id
    this.chart.init((canvas, width, height, dpr) => {
    // 初始化图表
      tableChart = echarts.init(canvas, null, { // echarts会继承父元素的宽高
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素
      });
      this.clearOption();
      return tableChart; // 一定要return出去
    });
  },

第四步：实例化完成后，为了现实正常，添加了

tableChart.clear（）清除上一次加载的值，会不会闪屏这里很重要其实如果用户闲着没事做，一直狂点就会出现闪屏现象。这里的clear() 是一个重点。如果想防止用户暴力浏览，建议使用节流或者防抖控制用户点击频率，相关详细教程很快就出。

 clearOption () {
    tableChart.clear();
    tableChart.setOption(getTableOption(this.data.valueList, this.data.timeList));
  },

到这里已经能够实现异步加载数据了，在加一点，

不要忘记导入，echarts 。整个echarts导入方法在这！！！！https://blog.youkuaiyun.com/weixin_45885731/article/details/118604567

import * as echarts from '../../../assets/ec-canvas/echarts';

json文件不要忘记引入这个。

    "ec-canvas": "../../../../financeSection/assets/ec-canvas/ec-canvas"