在微信小程序中使用Echarts,主要分为以下几步:
2.在要实现echarts图的页面引入echarts.js文件,例如要在index页面中展现echarts图的话,就在index.js文件中引入。
import * as echarts from '../../utils/ec-canvas/echarts';
3.在index.json中设置使用组件组件。
{
"usingComponents": {
"ec-canvas": "../../utils/ec-canvas/ec-canvas"
}
}
4.在index.wxml中使用组件<ec-canvas>,ec1在js中设置,注意,echarts图的容器 .radar 必须有宽高,而且必须display不能为none。如果需要隐藏此图表的话,请先生成图表后再隐藏。ec=“{{ec}}”是在页面加载进来就已经执行了。
<view class='radar' style="width: 500rpx; height: 500rpx;">
<ec-canvas id="mychart-dom-radar" canvas-id='mychart-line' ec="{{ec}}"></ec-canvas>
</view>
5.在index.js中实现echarts具体设置,具体设置可参考echarts配置项手册和官方实例。
// pages/result/result.js
import * as echarts from '../../utils/ec-canvas/echarts';
import API from '../../utils/api.js';
var initChart = null;
var initChart1 = null;
var initChart2 = null;
var initChart3 = null;
Page({
/**
* 页面的初始数据
*/
data: {
recordId: '',
ec: {
onInit: function(canvas, width, height) {
initChart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(initChart);
return initChart;
}
},
firstData: {
}
},
/**
* 生命周期函数--监听页面加载完成
*/
onReady: function (options) {
var recordId = wx.getStorageSync('recordId');
this.setData({
recordId: recordId
});
var _this = this;
setTimeout(_this.getData, 500);
},
getData() {
var _this = this;
/**请求数据 */
API.firstPageResultReport({ recordId: _this.data.recordId }, function (res) {
// console.log('res', res);
if (res.head.code == 0) {
_this.setData({
firstData: res.body
});
/**设置第一个echart图 */
_this.initChartOption();
}
});
},
initChartOption: function() {
var twoLevelIndex = this.data.firstData.radarData;
initChart.setOption({
tooltip: {
show: false
},
radar: {
name: {
color: '#263C4E',
backgroundColor: '#FFFFFF',
fontWeight: 'bold',
fontSize: 12
},
indicator: [
{ name: '债务偿还能力', max: 100 },
{ name: '保障应\n急能力', max: 100 },
{ name: '财富积累能力', max: 100 },
{ name: '财富增长能力', max: 100 },
{ name: '财务自\n由能力', max: 100 }
],
splitArea: {
show: true,
areaStyle: {
color: ['rgba(74,144,226,1)', 'rgba(129,181,242,1)', 'rgba(180,215,255,1)', 'rgba(205,228,254,1)']
}
},
splitLine: {
show: false
},
axisLine: {
show: false
},
splitNumber: 4,
radius: '60%',
center: ['50%', '50%']
},
series: [{
type: 'radar',
data: [
{
value: twoLevelIndex,
name: '二级指标',
areaStyle: {
color: '#4A90E2'
},
lineStyle: {
color: '#FFFFFF',
width: 3
},
itemStyle: {
borderColor: '#FFFFFF',
borderWidth: 2
}
}
]
}],
animation: true,
animationDuration: 2000
});
}
})
最后结果为
注: 这样写的话可与微信小程序整合,官方给的写法和微信小程序页面的加载是异步进行的,像上述例子中请求数据需要调用wx.getStorageSync方法取出缓存中的内容,如果要是将方法写在page的外面的话,有的时候会请求不到数据。这样写的好处在于接口的有效利用。减少接口调用次数。可实现异步请求echarts数据。