explaingit

ecomfe/echarts-for-weixin

7,498JavaScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

A custom component that brings Apache ECharts charts into WeChat Mini Programs, letting you add interactive bar, line, pie, and other charts to WeChat apps.

Mindmap

mindmap
  root((echarts-for-weixin))
    What it does
      Adds charts to WeChat Mini Programs
      Bridges ECharts to WeChat canvas
    Setup
      Copy ec-canvas folder
      Reference in page config
      Initialize in JavaScript
    Chart types
      Bar and line charts
      Pie and scatter charts
      Multiple charts per page
    Features
      Tooltip support
      Save chart as image
      Lazy data loading
    Audience
      WeChat Mini Program developers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a bar chart to a WeChat Mini Program dashboard showing monthly sales data.

USE CASE 2

Display a pie chart inside a WeChat app to visualize survey results or spending categories.

USE CASE 3

Build a fitness tracking WeChat Mini Program with line charts showing activity trends over time.

USE CASE 4

Render a scatter plot of user data inside a WeChat app for data visualization purposes.

Tech stack

JavaScriptApache EChartsWeChat Mini Program

Getting it running

Difficulty · moderate Time to first run · 30min

Requires a WeChat developer account and the WeChat DevTools, must use the bundled echarts.js version for tooltip support.

Open source under a permissive license, use freely including in commercial projects.

In plain English

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.

Copy-paste prompts

Prompt 1
Show me step by step how to add a bar chart to my WeChat Mini Program using echarts-for-weixin.
Prompt 2
How do I configure the ec-canvas component to display a pie chart with data fetched from an API in a WeChat Mini Program?
Prompt 3
Write the JavaScript initialization code to display a line chart in a WeChat Mini Program using echarts-for-weixin.
Prompt 4
How do I enable Canvas 2D mode in echarts-for-weixin for WeChat base library version 2.9.0 or higher?
Prompt 5
Show me how to display multiple ECharts charts on a single WeChat Mini Program page using ec-canvas.
Open on GitHub → Explain another repo

← ecomfe on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.