echarts-for-weixin

This project lets developers add interactive charts to WeChat Mini Programs by bringing in Apache ECharts, a widely used charting library originally built for web browsers. WeChat Mini Programs are small apps that run inside the WeChat messaging platform, which is enormously popular in China. Because the WeChat canvas environment works differently from a regular browser, standard ECharts cannot be dropped in directly, so this library provides a custom component called ec-canvas that bridges the gap.

To use it, you download this project and copy the ec-canvas folder into your own Mini Program. That folder contains an echarts.js file and the component code. You then reference ec-canvas in your page configuration, place it in your page layout like any other element, and write a short initialization function in JavaScript that tells ECharts how to draw on the canvas. From that point on, you configure charts exactly as you would with normal ECharts: pick a chart type, define your data and visual options, and the component handles the rest.

The project ships with working examples for bar charts, line charts, scatter plots, pie charts, and several other types. There is also an example for saving a chart as an image, for loading charts lazily after data arrives, and for showing multiple charts on one page. Tooltips are supported as well, though the version of echarts.js bundled in this project must be used for them to work correctly in WeChat.

The component requires WeChat version 6.6.3 or higher and the corresponding base library version 1.9.91 or higher. Newer base library versions (2.9.0 and up) unlock a Canvas 2D mode that improves rendering and is recommended. Most ECharts features work in this environment; the known exception is multi-layer rendering using multiple zlevel values. There are also a few visual bugs on Android and iOS related to transforms, semi-transparency, and gradient colors that do not affect basic chart use.