Use echarts in applets

Original link: https://www.jianshu.com/p/a2ab21bc7e9e

We often use line charts, histograms, dashboards, etc. to display data in the web system. We often use echarts in the browser page for convenience. The official website tutorial is also very clear.

But we also have this requirement in the WeChat applet, so if you use canvas directly, it will be too much trouble for a long time, maybe a broken line drawing all morning! , All the moments will think of frameworks such as echarts, but the official website of echarts does not have a small program version, but! ! ! Someone has released a small program version of echarts on github. . Thanks for sharing.

First, download the echarts WeChat version address: https://github.com/ecomfe/echarts-for-weixin

Open after downloading, as shown in the figure:

 

Put the ec-canvas directory in the downloaded file in the applet project directory. As shown below:

 

Then you can import it where you need it, and make a line chart below .

1. Start using echarts on the page

For example, if you use echarts in the ceshi page of the page directory, you need to add the following configuration in ceshi.json.

 

"usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }

2. Introduce

Introduce echarts.js in ceshi.js

 

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

3.wxml element

Create an element in ceshi.wxml and wrap it with view in the outer layer to easily set the width and height of the echarts element.

 

  <view class="echart_panel">
    <ec-canvas></ec-canvas>
  </view>

4. Start writing chart line chart

I wrote a function directly in ceshi.js, passing some parameters, and returning an option. As for the option of echarts, please refer to the api documentation on the official website of echarts.

 

function getOption(xData, data_cur, data_his) {
  var option = {
    backgroundColor: "#f5f4f3",
    color: ["#37A2DA", "#f2960d", "#67E0E3", "#9FE6B8"],
    title: {
      text: '实时运行速度',
      textStyle: {
        fontWeight: '500',
        fontSize: 15,
        color: '#000'
      },
      x:'center',
      y:'0'
    },
    legend: {
      data: ['今日', '昨日'],
      right: 10
    },
    grid: {
      top: '15%',
      left: '1%',
      right: '3%',
      bottom: '60rpx',
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData||[],
      axisLabel: {
        interval: 11,
        formatter: function (value, index) {
          return value.substring(0, 2) * 1;
        },
        textStyle: {
          fontsize: '10px'
        }
      }
    },
    yAxis: {
      x: 'center',
      name: 'km/h',
      type: 'value',
      min: 0,
      max: 120
    },
    series: [{
      name: '今日',
      zIndex:2,
      type: 'line',
      smooth: true,
      symbolSize: 0,
      data: data_cur||[]
    },{
        name: '昨日',
        zIndex: 1,
        type: 'line',
        smooth: true,
        symbolSize: 0,
        data: data_his||[]
    }]
  };
  return option;
}

Then you can configure the initialization in the data in the page page. How to initialize?

First create a global variable (note that you need to place it outside the page, you need a global variable, otherwise you can't modify the chart data dynamically after the page is loaded, so it's more convenient),

Then initialize the echats object ecLine in the data, name it whatever you want, and just follow the official writing method. There are three parameters in the onInit function, canvas, width, and height, all of which do not need to be managed, directly initialize the echats element. Just copy and paste.

 

let chartLine;
Page({
    data: {
        ecLine: {
            onInit: function (canvas, width, height){
                //初始化echarts元素，绑定到全局变量，方便更改数据
                chartLine = echarts.init(canvas, null, {
                    width: width,
                    height: height
                });
                canvas.setChart(chartLine);

                //可以先不setOption，等数据加载好后赋值，
                //不过那样没setOption前，echats元素是一片空白，体验不好，所有我先set。
                var xData = [1,2,3,4,5......];  // x轴数据 自己写
                var option = getOption(xData);
                chartLine.setOption(option);
            }
        }
    }
})

Then bind the created echats object to the echarts element, as follows:

 

<view class="echart_panel">
    <ec-canvas ec="{
   
   { ecLine }}"></ec-canvas>
  </view>

 

Then you can assign option to the chart after the data is loaded, or reset the data of setOption.

 

//ajax请求好数据后，调用获取option函数，传一些数据，
//然后用全局变量echarts元素chartLine 来 setOption即可。
// 三个参数： x轴数据，第一条线数据，第二条数据。 随意，echarts就跟正常用随便写就行
// 随便写几个假数据
var xData=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
var data_cur=[55,67,66,78,55,67,66,78,55,67,66,78,55,67,66,78,55,67,66,78,65,66,65,54];
var data_his=[67,66,78,65,66,65,54,67,66,78,65,66,65,54,67,66,78,65,66,65,54,67,66,78];
// 方法一：
var option = getOption(xData, data_cur, data_his);
chartLine.setOption(option);
// 方法二：
//如果上面初始化时候，已经chartLine已经setOption了，
//那么建议不要重新setOption，官方推荐写法，重新赋数据即可。
chartLine.setOption({
    xAxis: {
        data: xData
    }, 
    series: [{
        data: data_cur
    }, {
        data: data_his
    }]
});

The effect is as follows:

 

For line charts written by examples and other types of charts, please refer to the echarts official website document.

Because there are many types of echarts.js downloaded from github, if the code is uploaded for publishing, it prompts that the echarts file is too large and can be ignored.

Or re-download the components needed for echarts customization. If I need a line chart, I can customize the one with a line chart. Then directly replace echarts.js in the folder.

Download customized echarts official website link: http://echarts.baidu.com/builder.html

That's it, it's over.