小程序中使用echarts

十一月 03, 2021 1329

1.引入ec-canvas组件

注：使用ec-canvas需要设置宽高

line.wxml
1
2
3
<view class="container">
  <ec-canvas id='lina-dom' ec="{{ec}}"></ec-canvas>
</view>
line.wxss
1
2
3
4
.container {
  width: 100%;
  height: 100%;
}

2.将data中的lazyLoad设置为true

1
2
3
4
5
6
7
8
data: {
  // 将 lazyLoad 设为 true 后，需要手动初始化图表
  ec: {
    lazyLoad: true
  },
  // 绑定图表，以便在其他地方通过this访问
  Chart: null
},

3.获取到数据后，初始化及更新图表的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 初始化方法
   initChart() {
     // 通过获取ec-canvas这个子组件实例对象
     //使用组件方法init获取canvas、width、height、dpr信息
      this.selectComponent("#lina-dom").init((canvas, width, height, dpr) => {
       // 使用echarts.init方法手动初始化echarts实例
       this.data.Chart = echarts.init(canvas, null, {
         width: width,
         height: height,
         devicePixelRatio: dpr // 像素
       })
       this.setOption()
       return this.data.Chart
     })
   },
   // 设置图表数据
   async setOption() {
     const res = await getCharts() //请求数据
     this.data.Chart.setOption(res)
   },

4. 初始化或更新图表数据

在页面中的show生命周期函数中判断是否有实例化的图表对象，没有则初始化，有则只更新数据

注：如在自定义组件中写在pageLifetimes里

1
2
3
4
5
6
7
8
show() {
     // 判断是否实例化
     if (!this.data.Chart) {
       this.initChart()
     } else {
       this.setOption()
     }
   },
查看评论