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