Learn how to use echarts charts in WeChat mini programs

Preface

Data statistics is our For frequently used functions, we generally use them more on the PC side. Most of them are used for statistical data analysis in the management system. Recently, we have encountered the same demand when making WeChat mini programs. We collect data statistics on the mini program side. Displayed in the form of a chart, record your own configuration and usage process here.

Preparation

First of all, Baidu’s echarts does not provide a mini program version, find it here A packaged warehouse applet version of echarts that can be used on WeChat. Download the latest package through this link. After decompression, there is a ec-canvas folder that contains the encapsulated components. Place them in the component folder directory of the mini program for use. use.

├── ec-canvas
│   ├── ec-canvas.js
│   ├── ec-canvas.json
│   ├── ec-canvas.wxml
│   ├── ec-canvas.wxss
│   ├── echarts.min.js
│   └── wx-canvas.js
复制代码

Use

1. Configure on the page you need to use The chart component is introduced in the file

"usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
复制代码

2. index.wxml. We created a component:

  
复制代码

3. Where ec is an object we define in index.js, which enables the chart to be initialized and set after the page is loaded. The structure of index.js is as follows:

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  onLoad(){
      // 在需要的地方获取dom
      this.echartsComponnet1 = this.selectComponent('#mychart-dom-bar1')
      this.init_echarts1({ value: res.data.rotateSpeed || 0, name: 'x1000' })
  }
  // 初始化
    init_echarts1 (data) {
      this.echartsComponnet1.init((canvas, width, height) => {
        // 初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        this.chart = chart
        // setGaugeChartOption1获取到基础配置
        chart.setOption(setGaugeChartOption1(data))
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart
      })
    },
});
复制代码

Related learning recommendations: WeChat Mini Program Tutorial

The above is the detailed content of Learn how to use echarts charts in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!