小程序使用echarts 在一个页面打印多个饼图的坑
一、下载echarts微信版
下载地址：https://github.com/ecomfe/echarts-for-weixin
或者直接云盘下载 https://pan.baidu.com/s/1iOXILEZlmGYzzSin_TK22A 提取码 fwhx
二、创建所需文件
同时将下载的echarts 文件拷入，目录如下
三、创建一个配置option 的js
echart-option-config.js 配置option相关数据
var getOption = function (title,seriesName, dataArray) {
var option = {
title: {
text: title ||'数据来源',
x: 'left',
textStyle:{
fontSize:36
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name: seriesName || '访问来源',
type: 'pie',
radius: ['30%', '55%'],
labelLine: { // 设置指示线的长度
normal: {
length: 8,
length2: 8
}
},
label: {
normal: {
formatter: '{b|{b}:}\n{c}\n{per|{d}%} ',
rich: {
b: {
fontSize: 12,
lineHeight: 20,
align: 'center' // 设置文字居中
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2,
align: 'center',
}
}
}
},
data: dataArray || [
{ value: 135, name: '视频广告' },
{ value: 148, name: '百度' },
{ value: 251, name: '谷歌' },
]
}
]
};
return option;
}
module.exports = getOption;
四、页面布局和具体实现
1、report-detail.wxml 布局页面
<view>
<view class="detail-head">
<text>{{caption}}月报</text>
</view>
<text class="caption-sub">数据来源</text>
<view class="desc">
<text>截止</text>
<text>{{caption}}</text>
<text> {{contentTxt}}</text>
<text class="data-list-num">{{spaceNum}}</text>
<text>条，其中：</text>
<view class="data-list">
<view>
<text>存量数据导入：</text>
<text class="data-list-num">{{stockNum}}</text>
<text>条；</text>
</view>
<view>
<text>异构接入数据：</text>
<text class="data-list-num">{{specialNum}}</text>
<text>条；</text>
</view>
<view>
<text>互联网抓取数据：</text>
<text class="data-list-num">{{internetNum}}</text>
<text>条；</text>
</view>
</view>
</view>
<view class="echart_panel">
<ec-canvas id="sorce-pie" canvas-id="source-pie" ec="{{ecLine}}" bind:init="echartInit_source"></ec-canvas>
</view>
<view class="hr"></view>
<view class="echart_panel">
<ec-canvas id="type-pie" canvas-id="type-pie" ec="{{ecLineSeason}}" bind:init="echartInit_type"></ec-canvas>
</view>
</view>
2、report-detail.js加载页面数据
import * as echarts from '../../../ec-canvas/echarts';
var getOptionByExternalJs = require('../../../echart-template/echart-option-config.js');
var optionConfig = new getOptionByExternalJs();
Page({
/**
* 页面的初始数据
*/
data: {
contentTxt: '平台通过存量数据导入，异构数据导入、异构系统/平台计入及互联网抓取方式，共汇集空间信息数据',
spaceNum: 23423,
stockNum: 234422,
specialNum: 347458,
internetNum: 89079,
ecLine: {},
ecLineSeason: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
// 接收上一个页面传入的年、季、月
var month = options.month;
var year = options.year;
var season = options.season;
// 将其挂载到data便于页面使用
this.setData({
caption: year + month
});
this.printPie(); // 打印饼图
},
/**
* 打印饼图
*
*/
printPie: function() {
let that = this;
// 初始化echarts ，同时挂载到data
wx.showLoading({
title: '数据加载中......',
})
// 此处假设我们使用wx.requiest请求后台获取到了所需数据，重置option
//打印第一个图形 [数据来源]
setTimeout(function() {
that.loadEchartsByBackstage(
that.data.initchartSource,
'数据来源',
'当月月报', [{
value: 9432,
name: '互联网抓取数据'
},
{
value: 24123,
name: '存量导入数据'
},
{
value: 14242,
name: '异构接入数据'
}
]);
//打印第二个图形【数据分类】
that.loadEchartsByBackstage(
that.data.initchartType,
'数据分类',
'当前季度', [{
value: 19432,
name: '春节'
},
{
value: 24123,
name: '秋季'
},
{
value: 14242,
name: '夏季'
},
{
value: 24242,
name: '冬季'
}
]);
wx.hideLoading();
}, 200);
},
/**
* 初始化echats
* @return {Object} echart
*
*/
initChart: function(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
chart.setOption(optionConfig);
return chart;
},
// 来源
echartInit_source(e) {
this.data.initchartSource = this.initChart(e.detail.canvas, e.detail.width, e.detail.height);
},
//分类
echartInit_type(e) {
this.data.initchartType = this.initChart(e.detail.canvas, e.detail.width, e.detail.height);
},
/**
* 从服务器获取数据
*
*/
loadEchartsByBackstage: function(echarCasch, title, seriesName, dataArray) {
echarCasch.setOption({
title: {
text: title
},
series: [{
name: seriesName,
data: dataArray
}]
});
}
})
3、report-detail.json 引入echarts
{
"navigationBarTitleText": "报告详情",
"usingComponents": {
"ec-canvas": "../../../ec-canvas/ec-canvas"
}
}
4、report-detail.wxss 设置页面样式
.detail-head {
margin-left: 12px;
font-weight: 700;
}
.caption-sub {
margin-left: 12px;
font-size: 12px;
font-weight: bold;
}
.desc {
margin: 12px;
font-size: 14px;
line-height: 28px;
}
.data-list{
display: flex;
flex-direction: column;
}
.data-list-num{
color:#3cbaff;
}
.echart_panel{
width: 100%;
height: 600rpx;
}
.hr {
border: 1px solid #ccc;
opacity: 0.2;
width: 78%;
margin: 0 auto;
background-color: red;
margin-bottom: 20px;
}
五、测试真机运行异常
上面代码在电脑模拟运行完全没问题，但是使用真机测试就会报错，如下图
WAService.js:1 thirdScriptError
Cannot read property 'setOption' of undefined;at pages/analysis-report/report-detail/report-detail onLoad function;at setTimeout callback function
TypeError: Cannot read property 'setOption' of undefined
at ge.loadEchartsByBackstage (weapp:///pages/analysis-report/report-detail/report-detail.js:110:16)
at Function.<anonymous> (weapp:///pages/analysis-report/report-detail/report-detail.js:54:12)
at WAService.js:1:102995
at Timeout._onTimeout (WAService.js:1:90534)
at listOnTimeout (internal/timers.js:535:17)
at processTimers (internal/timers.js:479:7)
一直纠结于为什么setOption未定义，找了好久都没明白为啥！
最后改了无数次代码，想到了可能是初始化echarts实例并未完成，就使用setTimeout模拟后台请求数据，
造成了在调用loadEchartsByBackstage时传入的that.data.initchartSource,
其实就是一个undefined（因为echartInit_source函数尚未初始完,
理所当然此时将ecahrts挂载到data中的操作也还没有执行）所以会有如上错误
最后我将setTimeout延时加长问题就没有了
/**
* 打印饼图
*
*/
printPie: function () {
let that = this;
// 初始化echarts ，同时挂载到data
wx.showLoading({
title: '数据加载中......',
})
// 此处假设我们使用wx.requiest请求后台获取到了所需数据，重置option
//打印第一个图形 [数据来源]
setTimeout(function () {
...
}, 2000);
但是这个肯定不是最终的处理办法（假如应用出现初始化卡顿，延时是否就不够了呢）！
最后想到了使用promise 来先获得echarts 实例
/**
* 初始化echats
* 使用promise获取初始化echarts 实例
* @return {Object} echart
*
*/
initChart: function (canvas, width, height) {
return new Promise(resolve => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
chart.setOption(optionConfig);
resolve(chart);
});
},
再将onload中的printPie()函数移到echarts的初始化中，再在data挂载变量标识printPie()是否已经被调用，如果未调用就调用该函数模拟获取数据重新渲染option；这样就OK了。
// 来源
echartInit_source(e) {
this.initChart(e.detail.canvas, e.detail.width, e.detail.height).then(res => {
this.data.initchartSource = res;
// 判断所以echarts 实例都初始完毕;并且invokePrintPie为false
if (this.data.initchartType && this.data.initchartSource && !this.data.invokePrintPie){
this.printPie(); // 打印饼图
this.data.invokePrintPie = true;
}
return res;
});
},
修改后的report-detail.js完整代码
import * as echarts from '../../../ec-canvas/echarts';
var getOptionByExternalJs = require('../../../echart-template/echart-option-config.js');
var optionConfig = new getOptionByExternalJs();
Page({
/**
* 页面的初始数据
*/
data: {
contentTxt: '平台通过存量数据导入，异构数据导入、异构系统/平台计入及互联网抓取方式，共汇集空间信息数据',
spaceNum: 23423,
stockNum: 234422,
specialNum: 347458,
internetNum: 89079,
invokePrintPie:false,//标识是否已经调用打印饼图操作
ecLine: {},
ecLineSeason: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 接收上一个页面传入的年、季、月
var month = options.month;
var year = options.year;
var season = options.season;
// 将其挂载到data便于页面使用
this.setData({
caption: year + month
});
//this.printPie(); // 打印饼图
},
/**
* 打印饼图
*
*/
printPie: function () {
let that = this;
// 初始化echarts ，同时挂载到data
wx.showLoading({
title: '数据加载中......',
})
// 此处假设我们使用wx.requiest请求后台获取到了所需数据，重置option
//打印第一个图形 [数据来源]
setTimeout(function () {
that.loadEchartsByBackstage(
that.data.initchartSource,
'数据来源',
'当月月报', [{
value: 9432,
name: '互联网抓取数据'
},
{
value: 24123,
name: '存量导入数据'
},
{
value: 14242,
name: '异构接入数据'
}
]);
//打印第二个图形【数据分类】
that.loadEchartsByBackstage(
that.data.initchartType,
'数据分类',
'当前季度', [{
value: 19432,
name: '春节'
},
{
value: 24123,
name: '秋季'
},
{
value: 14242,
name: '夏季'
},
{
value: 24242,
name: '冬季'
}
]);
wx.hideLoading();
}, 200);
},
/**
* 初始化echats
* 使用promise获取初始化echarts 实例
* @return {Object} echart
*
*/
initChart: function (canvas, width, height) {
return new Promise(resolve => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
chart.setOption(optionConfig);
resolve(chart);
});
},
// 来源
echartInit_source(e) {
this.initChart(e.detail.canvas, e.detail.width, e.detail.height).then(res => {
this.data.initchartSource = res;
// 判断所以echarts 实例都初始完毕;并且invokePrintPie为false
if (this.data.initchartType && this.data.initchartSource && !this.data.invokePrintPie){
this.printPie(); // 打印饼图
this.data.invokePrintPie = true;
}
return res;
});
},
//分类
echartInit_type(e) {
this.initChart(e.detail.canvas, e.detail.width, e.detail.height).then(res => {
this.data.initchartType = res;
// 判断所以echarts 实例都初始完毕;并且invokePrintPie为false
if (this.data.initchartType && this.data.initchartSource && !this.data.invokePrintPie) {
this.printPie(); // 打印饼图
this.data.invokePrintPie = true;
}
return res;
});
},
/**
* 从服务器获取数据
*
*/
loadEchartsByBackstage: function (echarCasch, title, seriesName, dataArray) {
echarCasch && echarCasch.setOption({
title: {
text: title
},
series: [{
name: seriesName,
data: dataArray
}]
});
}
})
六、修改后真机预览
预览如下图 ：
 加载之前使用默认数据 |
 模拟加载真实数据后 |
七、 字体大小无法控制
不知道大家又没注意到，echarts 的title 有些小呢？然而echarts 的optin中title 设置的字体大小是36了呢。
 运行时截图 |
 option字体设置如图 |
最终的解决办法是去官网定制了一个新的library;
也可以在云盘直接下载：云盘地址 https://pan.baidu.com/s/1kSsYfI0M36KVc1JdeEjvBA 提取码 lrpg
，如图：
 定制柱状、折线、饼图图表 |
 定制所需组件 |
 下载定制的library |
 编译完成自动下载 |
最后将下载的echarts-mini.js改名为echarts.js 替换ec-canvas目录下载的echarts.js即可
