在微信小程序开发中如何给Echarts加载动态数据?从云服务器中读取数据并缓存,定义全局变量,然后在series中加载此数据即可。
import * as echarts from '../ec-canvas/echarts';
...
//定义全局变量newdata,用于存储数据
var newdata=[];
Page(
{
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
// 查询所有数据
onLoad: function (options) {
//查询语句
})
newdata=[res[0].one,res[0].two,res[0].three,res[0].four,res[0].five]
//将获取到的信息存到缓存中
wx.setStorage({
key: 'newdata',
data: res
})
try {
wx.setStorageSync('newdata', res)
} catch (e) {
}
})
},
data: {
ec: {
onInit: initChart
}
},
onReady() {
},
echartInit(e) {
initChart(e.detail.canvas, e.detail.width, e.detail.height);
}
});
function initChart(canvas, width, height) {
var that=this;
const chart = echarts.init(canvas, null, {
width:width,
height:height,
});
canvas.setChart(chart);
//以下为图示代码
var option = {
tooltip: {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)",
rich:{} //保证在手机端显示正常
},
color: ['#c23531', '#2f4554','#91c7ae', '#61a0a8', '#d48265', ],
// 图例组件lengend
legend: {
//样式设置
},
series: [
{
//测试数据
data: [
{ value:newdata[0], name: '字段一' },
{ value:newdata[1], name: '字段二' },
{ value:newdata[2], name: '字段三' },
{ value:newdata[3], name: '字段四' },
{ value:newdata[4], name: '字段五' },
],
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
fontsize:12,
fontFamily:'Microsoft YaHei', //字体样式
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
itemStyle: {
normal: {
label: {
show: true,
formatter: '{d}%',
rich:{} //保证在手机端显示正常
}
},
labelLine: { show: true}
}
}
]
};
chart.setOption(option);
return chart;
}