微信小程序中echarts动态加载数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hao_0420/article/details/80931339

前期准备

需求：需要在微信小程序中动态显示图表。

经查询，选择使用echarts插件。

在echarts官网中获取ec-canvas组件，放入至微信小程序中

实现如下：

完整实例：dynamic-echarts-demo

wxml

[code]<ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>

js

[code]import * as echarts from '../../../utils/ec-canvas/echarts'; //引入echarts.js
var dataList = [];
Page({
/**
* 页面的初始数据
*/
data: {
ec: {
lazyLoad: true // 延迟加载
},
}
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.echartsComponnet = this.selectComponent('#mychart');
this.getData(); //获取数据
},
getData: function () {
/**
* 此处的操作：
* 获取数据json
*/
wx.request({
url: url, //仅为示例，并非真实的接口地址
data: data,
method: 'POST',
header: { 'content-type': 'application/x-www-form-urlencoded' },
success: (res) => {
dataList = res.data;
this.init_echarts();//初始化图表
}
});
},
//初始化图表
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
const Chart = echarts.init(canvas, null, {
width: width,
height: height
});
Chart.setOption(this.getOption());
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return Chart;
});
},
getOption: function () {
//时间显示范围
var anchor = [
{ name: weekDate, value: [weekDate, 0] },  // 开始
{ name: nowDate, value: [nowDate, 0] }  // 结束
];
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: dataList,
type: 'line'
}]
}
return option;
},

})

-----------20181015更新-----------

发现现存问题：切换图表数据时，数据会回闪。

原因：每次切换数据时，都创建echarts实例，但是上一个实例未销毁。故现在更改为只创建一个echarts实例，每次切换数据时，只重新setOption，并在此操作前clear图表。新的代码如下：

[code]import * as echarts from '../../utils/ec-canvas/echarts'; //引入echarts.js
var dataList = [];
var k = 0;
var Chart = null;
Page({
/**
* 页面的初始数据
*/
data: {
ec: {
lazyLoad: true // 延迟加载
},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.echartsComponnet = this.selectComponent('#mychart');
this.getData(); //获取数据
},
getData: function () {
/**
* 此处的操作：
* 获取数据json
*/
if(k % 2){
dataList = [1, 2, 3, 4, 5, 6];
}else{
dataList = [7, 6, 9, 2, 5, 6];
}
k++;
//如果是第一次绘制
if (!Chart){
this.init_echarts(); //初始化图表
}else{
this.setOption(Chart); //更新数据
}
/*  wx.request({
url: url, //仅为示例，并非真实的接口地址
data: data,
method: 'POST',
header: { 'content-type': 'application/x-www-form-urlencoded' },
success: (res) => {
dataList = res.data;
this.init_echarts();//初始化图表
}
});  */
},
//初始化图表
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
Chart = echarts.init(canvas, null, {
width: width,
height: height
});
// Chart.setOption(this.getOption());
this.setOption(Chart);
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return Chart;
});
},
setOption: function (Chart) {
Chart.clear();  // 清除
Chart.setOption(this.getOption());  //获取新数据
},
getOption: function () {
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: dataList,
type: 'line'
}]
}
return option;
},

})

 

 

阅读更多