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
    });
    canvas.setChart(chart);

    let option = getItemInfo()
    this.chart=chart
    chart.setOption(option);
    
    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,
                lineHeight:18,
                width:10,
                height: 50,
                fontWeight:500,
                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

                }
            },
        },
        
        backgroundColor:"black",
        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

.container{
    width: 750rpx;
    height: 1200rpx;
}

ec-canvas{
    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