echarts-for-weixin

Introduction to eCharts-for-Weixin

eCharts-for-Weixin is a specialized project designed for integrating the Apache ECharts library into WeChat Mini Programs. This enables developers to create visually appealing charts using familiar ECharts configurations without having to learn a new system. It simplifies the development of various visualizations within a WeChat ecosystem.

Experience the Demo

Developers and users can experience the capabilities of the eCharts-for-Weixin project by scanning a specific QR code available on its resources. This demo provides a hands-on understanding of implementing ECharts within a WeChat Mini Program.

Download and Setup

To facilitate compatibility with WeChat Mini Program’s Canvas, the project offers a handy component called ec-canvas. This component is the centerpiece of the project, enabling straightforward integration of ECharts.

To begin:

1. Download the eCharts-for-Weixin project.
2. The ec-canvas folder contains the crucial echarts.js file, updated with the latest version of ECharts with each project release. Developers can opt to download specific versions of ECharts to reduce file size or customize builds directly from the ECharts official website.

Incorporating the Component

For incorporating eCharts within a WeChat Mini Program, developers can either:

• Completely replace a new WeChat project with eCharts-for-Weixin and edit accordingly.
• Copy the ec-canvas directory into an existing project and adjust the configurations.

It is crucial to modify the project.config.json to match the specific app ID from the WeChat public platform. Unnecessary files and pages can be removed from the pages directory to streamline the application.

Building a Chart

The chart development process involves:

• Creating several files (index.js, index.json, index.wxml, index.wxss) in a specified directory (pages/bar).

• Editing the index.json to include:

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

• Developing a <ec-canvas> component within index.wxml.

For precise chart display, developers must ensure the appropriate styling in app.wxss.

The index.js file must define an initChart function responsible for customizing the chart’s settings, sizes, and pixel ratio (dpr).

Chart Customization

Customizing the chart is as simple as changing the option object within index.js. For guidance on ECharts options, developers are advised to refer to the ECharts configuration documentation.

Troubleshooting and Advanced Features

• Chart Instance Access: Obtainable via the echarts.init function as shown in pages/bar/index.js.
• Lazy Loading: Option available for loading charts only after data retrieval, demonstrated in pages/lazyLoad.
• Multiple Charts: Load multiple chart instances on a single page, as shown in pages/multiCharts.
• Tooltip Use: ECharts Tooltips are supported, with implementation examples in pages/line/index.js.
• Saving as Image: Methods to save charts as images are provided in pages/saveCanvas.

Performance Optimization

For reducing file size, developers can benefit from different ECharts versions, opting for compressed files during releases. The online ECharts builder tool provides further customization by selecting only necessary components.

System Requirements and Versioning

To take advantage of the new Canvas 2d properties in WeChat, ensure the WeChat foundation library version is >= 2.9.0. This offers improved rendering performance and solves rendering layer issues. Lower versions can operate with configurations to use the older canvas model.

Unsupported Features and Known Issues

Some ECharts features, such as multiple zlevel layering, are not yet supported in the WeChat Mini Program version. Known bugs vary across platforms, affecting items like gradient drawing and label placements.

Apache ECharts Trademarks

Apache ECharts and related logos are trademarks of the Apache Software Foundation. Developers are encouraged to contribute feedback and report issues on the eCharts-for-Weixin GitHub repository to help prioritize future enhancements.