Wechat small program is an out-of-the-box application that does not need to be downloaded and installed, and can realize 70% of the functions of current APP applications. Users can scan or search for it and use it. It is fast and convenient, making wechat small program widely used in our lives. In order to meet the needs of wechat applets developers, Echarts and the official team of wechat applets have cooperated to provide the wechat applets version of Echarts. Developers can use the familiar ECharts configuration to quickly develop charts for a variety of visualization needs. This blog post records the use of Echarts chart library in wechat applet

1. Create a small program project of wechat

First, we create a wechat applets project without cloud development using wechat Developer tools (as shown in Figure 1), and the newly created wechat applets directory structure (as shown in Figure 2).

2. Download the official Echarts project to your local PC

To use the Echarts chart library, you need to download the Echarts component locally. You can find the github chart component download address from the Echarts website (Figure 3) (Figure 4). Here are two links:

Echarts official address: Echarts official introduction to wechat applet using Echarts

Chart component download address:Download the ecomfe/ Echarts-for-Weixin project on github website

Note: Github is a foreign website, most likely not accessible, you can go to meUploading resourcesdownload

3. Copy and paste the Echarts component into the project

3.1 We unzip the downloaded code into the Echarts-for-Weixin-master folder (as shown in Figure 5), open it with wechat developer tools, and you can see the example of wechat small program with an Echarts chart (as shown in Figure 6).

3.2 We copied and pasted the ec-Canvas chart component core file in the echarts-for-Weixin-master folder into the root directory of our new project (as shown in Figure 7)

4. Code to create charts

To download and copy the chart folder successfully, we need to modify the WXML under the Index page. Json. Js and WXSS implementation diagram presentation

4.1 Modifying the index.json code

We need to introduce the EC-Canvas component in the page JSON file as follows:

{
  "usingComponents": {
    "ec-canvas": ".. /.. /ec-canvas/ec-canvas"}}Copy the code

4.2 Modify the index. HTML code

Index. HTML displays the chart with the component tag, specifying the ID; Canvas – id; Ec, which reads as follows:

<view class="echarts">
<ec-canvas id="echarts" canvas-id="echarts" ec="{{ec}}"></ec-canvas>
</view>
Copy the code

4.3 Modify the index.js code

Index.js introduces echarts.js to get echarts instances, define binding data ec, and initialize functions to get chart data

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

let chart = null;

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

// Initialize the chart function
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })

  canvas.setChart(chart)

  // To display Echarts chart type information, you can go to the Echarts official website to copy and paste
  let option = {
    xAxis: {
      type: 'category'.data: ['Mon'.'Tue'.'Wed'.'Thu'.'Fri'.'Sat'.'Sun']},yAxis: {
      type: 'value'
    },
    series: [{
      data: [120.200.150.80.70.110.130].type: 'bar'.showBackground: true.backgroundStyle: {
        color: 'rgba (180, 180, 180, 0.2)'
      }
    }]
  }

  chart.setOption(option);
  return chart;
}
Copy the code

4.4 Modify the index. WXSS code

We need to style the View container and the EC-Canvas component to display the chart

.echarts{
  width: 800rpx;
  height: 800rpx;
}
ec-canvas{
  width: 100%;
  height: 100%;
}
Copy the code

5. Compile and run

The chart information is copied from the bar chart information, so the bar chart is displayed. You can go to the Echarts official website to copy and paste the style

6. Wechat applet uses Echarts to summarize

Echarts charts are interesting and worth learning. Using some visual charts to show the data is more intuitive and has a sense of accomplishment. Introduction of charts requires some basic knowledge of Echarts