This project is the wechat applets version of ECharts, as well as the examples used.

Developers can use the familiar ECharts configuration to quickly develop charts for a variety of visualization needs.

Experience the sample applet

To experience ECharts Demo, scan the following QR code in wechat:

download

To be compatible with the widget Canvas, we provide a widget component that makes it easy to use ECharts in this way.

First, download the project.

Ec-canvas is the component we provide, and other files are examples of how to use this component.

There is echarts.js in the EC-Canvas directory, and by default we replace it with the latest version of Echarts every time the echarts-for-Weixin project is released. If necessary, you can download the latest release from the ECharts project or customize it from the official website to reduce the file size.

The introduction of the component

The project creation of wechat applets can be found in the official documents of wechat public platform.

After the project is created, you can completely replace the newly created project with the downloaded ecomfe/ Echarts-for-Weixin project, and then modify the code; Or just copy the EC-Canvas directory to the new project and make adjustments accordingly.

For full replacement, replace the appID in project.config.json with the project ID applied on the public platform. Each folder in the Pages directory is a page. You can delete unwanted pages as required and delete corresponding pages in app.json.

If you are copying only the EC-canvas directory, you can refer to the pages/bar directory for a few files. Now, let’s be specific.

Create a chart

First, create the following files in the pages/bar directory: index.js, index.json, index. WXML, index. WXSS. Add ‘pages/bar/index’ to pages in app.json.

The configuration of index.json is as follows:

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

What this configuration does is allow us to use the

component in pages/bar/index.wxml. Note that the relative positions of the paths must be written correctly. If the directory structure is the same as in this example, it should be configured as above.

In index. WXML, we create a

component that looks like this:

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>Copy the code

Ec is an object we defined in index.js that enables the diagram to be initialized and set after the page loads. Index.js has the following structure:

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});Copy the code

This is common to all ECharts diagrams, and the user can change the diagram simply by modifying the option content above. Refer to the ECharts configuration item documentation for the use of option. For those unfamiliar with ECharts, see the 5 minute Getting Started ECharts tutorial.

See the ecomfe/ Echarts-for-Weixin project for a complete example.

Wechat version requirements

Support wechat version >= 6.6.3, corresponding to the base library version >= 1.9.91.

When debugging, you need to set the “Debug Base Library” under “Details” to version 1.9.91 or later in wechat developer tools.

Before the release, set Base Base Minimum Version Settings to 1.9.91 on the “Settings” page of mp.weixin.qq.com. When the wechat version of the user is too low, the user will be prompted to update.

Currently unsupported functions

Most of the features in ECharts are supported in the applets version, so this is just a description of the features that are not supported and the problems that exist.

The following functions are not supported yet. If you have relevant requirements, please feedback to us in the issue. The requirements with a large number of feedbacks will be preferentially supported:

  • Tooltip
  • The picture
  • Multiple ZLevel hierarchies

In addition, there are still some bugs that have not been fixed, some of which need support from the small program team, but it does not affect the basic use. Known bugs include:

  • Android platform: Transform problem (will affect the position of marks on both sides of the diagram, text position of the rising sun diagram, etc.)
  • IOS: Translucent slightly darker issues
  • IOS: Gradients appear outside the defined area

If you have any other questions, please feedback to us in the issue, thank you!