This article will share with you some methods of using echarts in WeChat mini programs and a summary of problems, so that you can avoid pitfalls and thunderstorms. I hope it can help you!

How to use the WeChat mini program and some pitfalls, I hope it can help you

Using echarts in the WeChat mini program

1. Download the mini program version of echarts

Download address: https://github.com/ecomfe/echarts- for-weixin

2. Use steps

##1.Introduce project dependencies

小program development tutorial】

Introduce echarts into the json file of the page where echarts is used. The imported path is imported according to your own project structure.

Introduce echarts into the js file of the page using echarts. The imported path is imported according to your own project structure

Use the component in wxml, Both id and canvas-id can be named by yourself

js code

import * as echarts from '../../ec-canvas/echarts'; const app = getApp(); function initChart(canvas, width, height, dpr) { //主要是这个 echarts 的创建 const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); // option 的配置可以根据自己的需求去 echarts 官网查看配置的属性方法 var option = { backgroundColor: "#ffffff", series: [{ label: { normal: { fontSize: 14 } }, type: 'pie', center: ['50%', '50%'], radius: ['20%', '40%'], data: [{ value: 55, name: '北京' }, { value: 20, name: '武汉' }, { value: 10, name: '杭州' }, { value: 20, name: '广州' }, { value: 38, name: '上海' }] }] }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initChart } }, onReady() { } });

Copy after login

css code

.container{ width: 100%; height: 100vw; } ec-canvas { width: 100%; height: 100%; }

1. Regarding the introduction of dependencies, introduce Library, after using it according to the official usage method, the problem of echarts picture not being displayed

Solution: When using echarts in HTML, the width and height of the view tag wrapped in the outer layer must also be set (The official method style does not set the width and height of the outer element, but it can be displayed in the official example, which misleads many people and will lead to a trap)

2 , About the role of

You can see that when echarts is initially created in the official code, the code is as shown below. After you set devicePixelRatio, the chart of echarts can be seen in the WeChat developer tools The pixels of the echarts chart are very poor. When previewed on a mobile phone, they are very clear. After removing the devicePixelRatio, the pixels of the echarts chart seen in the WeChat developer tools become very clear, but the pixels seen on the mobile phone are poor. , so this should be adapted to the pixels of the chart according to the pixel unit of the device

For more programming-related knowledge, please visit:

! !

The above is the detailed content of How to use echarts in the WeChat mini program and possible pitfalls, come and collect it to avoid lightning! !. For more information, please follow other related articles on the PHP Chinese website!