微信小程序中使用ECharts 异步加载数据的方法
发布时间：2020-12-14 20:07:18 所属栏目：资源 来源：网络整理
导读：官网例子都是同步的，怎么引入及同步demo请移步官网 { // 初始化图表 const barChart = echarts.init(canvas,null,{ width: width,height: height }); barChart.setOption(this.getBarOption()); // 注意这里一定要返回 chart 实例，否则会影响事件处理等 re
|
官网例子都是同步的，怎么引入及同步demo请移步官网 {
// 初始化图表
const barChart = echarts.init(canvas,null,{
width: width,height: height
});
barChart.setOption(this.getBarOption());
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return barChart;
});
},init_sca: function () {
this.scaComponnet.init((canvas,height) => {
// 初始化图表
const scaChart = echarts.init(canvas,height: height
});
scaChart.setOption(this.getScaOption());
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return scaChart;
});
},getBarOption:function(){
//return 请求数据
return {
color: ['#37a2da','#32c5e9','#67e0e3'],tooltip: {
trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},legend: {
data: ['热度','正面','负面']
},grid: {
left: 20,right: 20,bottom: 15,top: 40,containLabel: true
},xAxis: [
{
type: 'value',axisLine: {
lineStyle: {
color: '#999'
}
},axisLabel: {
color: '#666'
}
}
],yAxis: [
{
type: 'category',axisTick: { show: false },data: ['汽车之家','今日头条','百度贴吧','一点资讯','微信','微博','知乎'],series: [
{
name: '热度',type: 'bar',label: {
normal: {
show: true,position: 'inside'
}
},data: [300,270,340,344,300,320,310]
},{
name: '正面',stack: '总量',label: {
normal: {
show: true
}
},data: [120,102,141,174,190,250,220]
},{
name: '负面',position: 'left'
}
},data: [-20,-32,-21,-34,-90,-130,-110]
}
]
};
},getScaOption:function(){
//请求数据
var data = [];
var data2 = [];
for (var i = 0; i < 10; i++) {
data.push(
[
Math.round(Math.random() * 100),Math.round(Math.random() * 100),Math.round(Math.random() * 40)
]
);
data2.push(
[
Math.round(Math.random() * 100),Math.round(Math.random() * 100)
]
);
}
var axisCommon = {
axisLabel: {
textStyle: {
color: '#C8C8C8'
}
},axisTick: {
lineStyle: {
color: '#fff'
}
},axisLine: {
lineStyle: {
color: '#C8C8C8'
}
},splitLine: {
lineStyle: {
color: '#C8C8C8',type: 'solid'
}
}
};
return {
color: ["#FF7070","#60B6E3"],backgroundColor: '#eee',xAxis: axisCommon,yAxis: axisCommon,legend: {
data: ['aaaa','bbbb']
},visualMap: {
show: false,max: 100,inRange: {
symbolSize: [20,70]
}
},series: [{
type: 'scatter',name: 'aaaa',data: data
},{
name: 'bbbb',type: 'scatter',data: data2
}
],animationDelay: function (idx) {
return idx * 50;
},animationEasing: 'elasticOut'
};
},});
注意：异步加载时，ec-canvas标签加载显示要先于this.scaComponnet.init，否则会报错。 总结以上所述是小编给大家介绍的微信小程序中使用ECharts 异步加载数据的方法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |