About the use of ecarts wechat applet

First of all, at present, wechat applets support the introduction and use of ecarts. In fact, many people will not introduce and use eacharts. This article mainly talks about how to introduce eacharts. For more details, please move to the official website

The first open official document address is Examples - Apache ECharts Open the following user manual

Click on wechat applet in the second application

Third, clone or download the files inside to your desktop

Fourth, copy the entire EC canvas file and paste it in the root directory of the applet you need

Fifthly, I introduce the following example through the modularization of es6 in js file, and then declare a variable to hold the whole ecarts. I like a global variable, so I declare it as follows


The specific directory should be based on your actual file situation

Then the following is a configuration of echarts

In wxml

Note that id, canvas and ec must be written. The suggestion is to wrap it in a box, which is conducive to adjusting the width and height

How to write in js file

Because the above words of wxml declare ec, we should also configure the corresponding ec. The writing method is as follows

initChart is a function. We need to write a configuration of echarts for it. Next, we need to configure it directly outside the life cycle of the applet

function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // pixel

    let option = getItemInfo()
    return chart;

function getItemInfo() {
    return {

        title: {
            text: 'Basic Radar Chart'
        radar: {
            // shape: 'circle',
            indicator: [{
                    name: `Language: 123`+`Stage row: 321`,
                    max: 6500
                    name: `Mathematics: 123`+`Stage row: 321`,
                    max: 16000
                    name: `English: 123`+`Stage row: 321`,
                    max: 30000
                    name: `History: 123`+`Stage row: 321`,
                    max: 38000
                    name: `Politics: 123`+`Stage row: 321`,
                    max: 52000
                    name: `French: 123`+`Stage row: 321`,
                    max: 25000
            //Debug font color, etc
            axisName: {
                color: '#fff',
                backgroundColor: '#666',
                borderRadius: 3,
                height: 50,
                formatter: function (params, indicator) {
                    let newParamsName = "";
                    let paramsNameNumber = params.length;
                    let provideNumber = 6;  //Show a few words on a line
                    let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (let p = 0; p < rowNumber; p++) {
                            let tempStr = "";
                            let start = p * provideNumber;
                            let end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            newParamsName += tempStr;
                    } else {
                        newParamsName = params;
                    return newParamsName

        series: [{
            name: 'Budget vs spending',
            type: 'radar',
            data: [{
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: 'Allocated Budget'
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: 'Actual Spending'

Do you think you've finished writing here?

In fact, it's still one step away. Maybe after you configure it, you will find that there are no errors but they are not displayed. What's the reason?

In wxml, you can open the console and click on your ecarts. You will find that it has no width and height. At this time, I said to wrap it in a box. The code below wxss

    width: 750rpx;
    height: 1200rpx;

    width: 100%;
    height: 100%;

My class name is declared as follows. Configure it according to your personal configuration. Then the next step is to complete the configuration

Try it yourself



Tags: Javascript Mini Program

Posted by phprocket on Fri, 15 Apr 2022 10:26:29 +0930