一 、说明
本篇文章主要记录微信小程序开发过程中对图表的使用。这里主要说明eCharts的使用，最后也会讲一下wecharts的使用。至于两者的区别，echarts更强大，但是体积更大，导进来有500K以上了，即便导入自定义的组件，也很大；而wxcharts虽然没有那么强大，但是体积比较小，特别是轻量版只有30K多一点，非常适用于对大小要求比较高的小程序。
1. echarts使用
（1）下载
这里下载的echarts是别人在小程序上面做过适配的版本。下载地址
（2）把echarts导入小程序
把下载好的echarts-for-weixin-master压缩包解压，然后把里面的ec-canvas文件夹全部文件直接复制到小程序当中，我这里复制到了utils目录下。
（3） 进行相关配置和开发
首先，要在页面中引用相关模块，这里新建了一个名为echarts的页面，echarts.json的相关代码：
{
"navigationBarTitleText": "饼状图实现",
"usingComponents": {
"ec-canvas": "../../utils/ec-canvas/ec-canvas"
}
}
下面为echarts.wxml的代码
<view class="econtainer">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{
{ ec }}"></ec-canvas>
</view>
一定要注意好控件的样式，因为长宽设置不好可能会导致图表无法显示，而且，一定要注意rpx和px的却别，特别是使用wxcharts的时候，不然在不同手机上面格式会很乱。下面为echarts.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;
}
以下为echarts.js文件的代码：
// 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: '饼状图',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '项目：',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
label: {
show: true,
formatter: '{b}({d}%)'
},
data: [
{
value: 335, name: '直接访问' },
{
value: 310, name: '邮件营销' },
{
value: 234, name: '联盟广告' },
{
value: 135, name: '视频广告' },
{
value: 1548, name: '搜索引擎' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initPie
}
},
onReady() {
}
});
以下为运行截图，在电脑上面调试运行，有些显示不全：
（4）注意事项
如果按照上面的步骤来，直接把上面的代码对应复制过去应该就可以运行了。
这个时候我们会有一个疑问，如果换成其它图表怎么办？我们对echarts.js文件进行梳理发现，其实这里我们除了整个框架不变，把initPie方法里面的option换成其它图表就行，但是有个地方，注意一下，就是option前面的var定义不要去掉，不然无法显示图表。下面为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() {
}
});
为什么说echarts强大，不仅是因为更加美观，而且，我们可以直接把echartsjs官网上面的实例代码（注意一定要是option代码的图表，其它的应该要自己去适配）复制到echarts.js的initPie方法的option里面，里面一些比较简单的图表都可以直接复制过来用，然后把数据改成自己想要的数据就行。
还有一个问题就是，怎么在同一个页面中加载两个或以上图表？
只需要在echarts.wxml文件加上一个标签：
<!--index.wxml-->
<view class="econtainer">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{
{ ec }}"></ec-canvas>
</view>
<view class="econtainer">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{
{ cl }}"></ec-canvas>
</view>
然后再在echarts.js中再添加一个方法，然后再在page的data里面进行初始化，以下为加上两个图表的echarts.js的完整代码：
// 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: '饼状图',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '项目：',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
label: {
show: true,
formatter: '{b}({d}%)'
},
data: [
{
value: 335, name: '直接访问' },
{
value: 310, name: '邮件营销' },
{
value: 234, name: '联盟广告' },
{
value: 135, name: '视频广告' },
{
value: 1548, name: '搜索引擎' }
],
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: '柱形图'
},
color: ["#ff9966"],
tooltip: {
show: true,
trigger: 'axis'
},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initPie
},
cl: {
onInit: initClomn
}
},
onReady() {
}
});
截图：
2. wxcharts
首先下载wxcharts，然后把wxcharts.js文件复制到utils文件夹下面。
因为wxcharts代码比较好理解，就是定义一个标签，然后在js文件中根据数据把图表绘画出来，所以直接上代码了。
wxcharts.wxml文件代码：
<view class="mycontainer">
<canvas canvas-id="feiyu1" class="canvas"></canvas>
</view>
<view class="mycontainer">
<canvas canvas-id="feiyu2" class="canvas"></canvas>
</view>
<view class="mycontainer">
<canvas canvas-id="feiyu3" class="canvas"></canvas>
</view>
wxcharts.wxss文件代码：
.canvas {
width: 750rpx;
height: 500rpx;
}
.mycontainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 30rpx 0;
box-sizing: border-box;
}
最后是wxcharts.js文件的代码，有三个图表：
//wxcharts.js
const util = require('../../utils/util.js');
var wxCharts = require('../../utils/wxcharts-min.js');
Page({
data: {
},
onReady: function (e) {
var windowWidth = 320;
var windowHeight = 150;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
windowHeight = res.windowHeight;
} catch (e) {
console.error('getSystemInfoSync failed!');
}
new wxCharts({
animation: true, //是否有动画
canvasId: 'feiyu1',
type: 'pie',
series: [{
name: '成交量1',
data: 15,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}],
width: windowWidth,
height: 200,
dataLabel: true,
});
new wxCharts({
animation:true,
canvasId: 'feiyu2',
type: 'line',
categories: ['2015', '2016', '2017', '2018', '2019', '2020'],
series: [{
name: '成交量1',
data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
format: function (val) {
return val.toFixed(2) + '万';
}
}, {
name: '成交量2',
data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
format: function (val) {
return val.toFixed(2) + '万';
}
}],
yAxis: {
title: '成交金额 (万元)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: windowWidth,
height: 200
});
new wxCharts({
canvasId: 'feiyu3',
type: 'column',
animation: true,
categories: ['2013', '2014', '2015', '2016', '2017'],
series: [{
name: '订单量',
color: '#188df0',
data: [23, 28, 35, 54, 95],
format: function (val, name) {
return val.toFixed(2) + '万';
}
}],
yAxis: {
format: function (val) {
return val + '万';
},
min: 0
},
xAxis: {
disableGrid: false,
type: 'calibration'
},
extra: {
column: {
width: 15,
},
legendTextColor: '#000000'
},
width: windowWidth,
height: 200,
});
}
});
效果截图：
