Wechat applet chart development (eCharts)

1, Description

Here we download the version of echarts that others have adapted on the applet. Download address

Extract the downloaded ecrats for Weixin master package, and then copy all the files in the EC canvas folder directly to the applet. Here I copy them to the utils directory.

First of all, you need to reference the relevant modules in the page. Here, you create a new page named echarts.json

{ "navigationBarTitleText": "Pie chart implementation", "usingComponents": { "ec-canvas": "../../utils/ec-canvas/ec-canvas" } }

Here is the code for echarts.wxml

<view> <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas> </view>

Be sure to pay attention to the style of the control, because the length and width settings are not good, which may lead to the chart can not be displayed, and be sure to pay attention to the difference between rpx and px, especially when using wxcharts, otherwise the format on different phones will be very messy. Here is the code for eckarts.wxss:

/* pages/echarts/echarts.wxss */ ec-canvas { width: 100%; height: 300px; } .econtainer { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 30rpx 0; box-sizing: border-box; }

The following is the code of the echarts.js file:

// pages/echarts/echarts.js import * as echarts from '../../utils/ec-canvas/echarts' const app = getApp(); function initPie(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { title: { text: 'Pie chart', subtext: 'Pure fiction', left: 'center' }, tooltip: { trigger: 'item', formatter: ' : (%)' }, legend: { orient: 'vertical', left: 'left', data: ['Direct access', 'Mail marketing', 'Alliance advertising', 'Video advertising', 'Search Engines'] }, series: [ { name: 'Item:', type: 'pie', radius: '55%', center: ['50%', '60%'], label: { show: true, formatter: '(%)' }, data: [ { value: 335, name: 'Direct access' }, { value: 310, name: 'Mail marketing' }, { value: 234, name: 'Alliance advertising' }, { value: 135, name: 'Video advertising' }, { value: 1548, name: 'Search Engines' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initPie } }, onReady() { } });

The following is the screenshot of the operation, debugging and running on the computer, some of which are not fully displayed:

If you follow the above steps, you can directly copy the above code and run it.

At this time, we will have a question, what if we change to other charts? We combed the echarts.js file and found that, in fact, we can change the option in the initPie method to other charts except for the whole framework. However, one thing we should pay attention to is that the var definition in front of the option should not be removed, otherwise the chart cannot be displayed. The following is the framework of echarts.js:

import * as echarts from '../../utils/ec-canvas/echarts' const app = getApp(); function initPie(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initPie } }, onReady() { } });

Why echarts is powerful? Not only is it more beautiful, but also we can directly echartsjs official website The above example code (note that it must be the chart of option code, and others should be adapted by yourself) is copied to the option of initPie method of echarts.js. Some of the simpler charts can be directly copied for use, and then the data can be changed to the data you want.

Another problem is how to load two or more charts on the same page?

Just add a label to the echarts.wxml file:

<!--index.wxml--> <view> <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas> </view> <view> <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ cl }}"></ec-canvas> </view>

Then add a method in echarts.js, and initialize it in page data. The following is the complete code of echarts.js with two charts:

// pages/echarts/echarts.js import * as echarts from '../../utils/ec-canvas/echarts' const app = getApp(); function initPie(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { title: { text: 'Pie chart', subtext: 'Pure fiction', left: 'center' }, tooltip: { trigger: 'item', formatter: ' : (%)' }, legend: { orient: 'vertical', left: 'left', data: ['Direct access', 'Mail marketing', 'Alliance advertising', 'Video advertising', 'Search Engines'] }, series: [ { name: 'Item:', type: 'pie', radius: '55%', center: ['50%', '60%'], label: { show: true, formatter: '(%)' }, data: [ { value: 335, name: 'Direct access' }, { value: 310, name: 'Mail marketing' }, { value: 234, name: 'Alliance advertising' }, { value: 135, name: 'Video advertising' }, { value: 1548, name: 'Search Engines' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; chart.setOption(option); return chart; } function initClomn(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { title: { text: 'Cylindrical graph' }, color: ["#ff9966"], tooltip: { show: true, trigger: 'axis' }, legend: { data: ['Sales volume'] }, xAxis: { data: ["shirt", "Cardigan", "Chiffon shirt", "trousers", "High-heeled shoes", "Socks"] }, yAxis: {}, series: [{ name: 'Sales volume', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initPie }, cl: { onInit: initClomn } }, onReady() { } });

Screenshots:

• Give the thumbs-up
• Collection
• share
• • Article report

14 January 2020, 05:15 | Views: 6769