在微信小程序中，免不了可视化图表相关的产品需求。

1. 可视化图表库

能在微信小程序中开箱即用、评分比较高的可视化图表库似乎有两个:

1. xiaolin3303/wx-charts

• 微信小程序图表 charts 组件
• github 上的 star 4K

• ECharts 的微信小程序版本
• github 上的 star 3.8K

由于以上两者 star 树相近，且后者有版本控制, 故选择了后者。

根据 https://github.com/ecomfe/echarts-for-weixin 的 readme 文档，即可安装与使用

相关示例可参考 https://github.com/ecomfe/echarts-for-weixin/tree/master/pages

参考这些文档与示例，即可在 wepy 中使用 echarts-for-weixin 。

下面举例，并说明注意要点。

2. Page 中简单使用

ChartExample.wpy

<template>
  <view class="chart-example">
    <ec-canvas
      id="mychart-dom-bar"
      canvas-id="mychart-bar"
      ec="{{ ec }}"
    >
    </ec-canvas>
  </view>
</template>
<script src="./ChartExample.comp.js"></script>
<style
  src="./ChartExample.comp.less"
  lang="less"
  scoped
></style>

ChartExample.comp.less

• 注意给ec-canvas 的父标签设置高度，否则渲染高度为 0，将看不到图表

.chart-example {
  height: 320px;
  ec-canvas {
    width: 100%;
    height: 100%;
  }
}

ChartExample.comp.js

• onInit 监听器 this.initChart.bind(this), 否则 initChart() 方法中 this 不是 wepy.page 实例
• initChart() 方法中注意要有返回值

import wepy from 'wepy'
import * as echarts from 'path/to/ec-canvas/echarts'
class ChartExample extends wepy.page {
  confg = {
    usingComponents: {
      'ec-canvas':
        'path/to/ec-canvas/ec-canvas',
    },
  }
  data = {
    ec: {
      onInit: this.initChart.bind(
        this,
      ),
    },
  }
  initChart(
    canvas,
    width,
    height,
  ) {
    const chart = echarts.init(
      canvas,
      null,
      {
        width: width,
        height: height,
      },
    )
    canvas.setChart(chart)
    var option = {
      // 数据在这里准备好
      // option 的使用方法参见 ECharts 配置项文档
      // https://www.echartsjs.com/zh/option.html
    }
    chart.setOption(option)
    // 注意这里一定要返回 chart 实例，
    // 否则会影响事件处理等
    return chart
  }
}
export default ChartExample

3. Page 中使用 lazyLoad

在实际的使用场景中，数据一般从后台异步获取；数据获取后，才去渲染图表。此时，需要使用lazyLoad 选项。

在 ChartExample.comp.js 文件中注意:

• 在 data 下配置 lazyLoad
• 在页面onReady 生命周期中获取 ec-canvas 组件, 并赋值给 this.ecComponent
• 获取数据后使用 this.ecComponent.init(...)

import wepy from 'wepy'
import * as echarts from 'path/to/ec-canvas/echarts'
class ChartExample extends wepy.page {
  confg = {
    usingComponents: {
      'ec-canvas':
        'path/to/ec-canvas/ec-canvas',
    },
  }
  data = {
    ec: {
      // 将 lazyLoad 设为 true 后
      // 需要手动初始化图表
      lazyLoad: true,
    },
  }
  onReady() {
    this.getChartComponent()
  }
  getChartComponent() {
    this.ecComponent = this.selectComponent(
      '#mychart-dom-bar',
    )
  }
  async onLoad() {
    await this.fetchData()
    this.initChart()
  }
  initChart() {
    this.ecComponent.init(
      (
        canvas,
        width,
        height,
      ) => {
        const chart = echarts.init(
          canvas,
          null,
          {
            width: width,
            height: height,
          },
        )
        canvas.setChart(chart)
        var option = {
          // 数据在这里准备好
          // option 的使用方法参见 ECharts 配置项文档
          // https://www.echartsjs.com/zh/option.html
        }
        chart.setOption(option)
        // 将图表实例绑定到 this 上，
        // 可以在其他成员函数（如 dispose）中访问
        this.chart = chart
        // 注意这里一定要返回 chart 实例，
        // 否则会影响事件处理等
        return chart
      },
    )
  }
  async fetchData() {
    // TODO 获取数据
  }
  dispose() {
    if (this.chart) {
      // TODO do something
    }
  }
}
export default ChartExample

4. 组件中使用 lazyLoad

在实际工程中，一般会将功能封装在组件中，而不是在页面中。如果在组件中使用 lazyLoad, 需要做一点调整。

在 ChartExample.comp.js 文件中注意:

• 在组件onLoad 生命周期中获取 ec-canvas 组件 (组件无 onReady 生命周期)
• 组件中使用this.$wxpage 访问 page 实例

class ChartExample extends wepy.component {
  // ...
  getChartComponent() {
    const page = this.$wxpage
    this.ecComponent = page.selectComponent(
      '#mychart-dom-bar',
    )
  }
  async onLoad() {
    this.getChartComponent()
    await this.fetchData()
    this.initChart()
  }
  // ...
}

5. 填坑总结

echarts-for-weixin 虽然开箱即用，但有小细节需要注意。

- END -

感谢阅读，如果你觉得值得一看

点击文章右上方的「关注」按钮

欢迎评论、点赞、转发以分享