这篇文章给大家分享的是有关微信小程序中如何使用ECharts 异步加载数据的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为台江企业提供专业的成都做网站、网站建设，
台江网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
官网例子都是同步的，怎么引入及同步demo请移步官网
import * as echarts from '../../ec-canvas/echarts';
Page({
data: {
ecBar: {
lazyLoad: true // 延迟加载
},
ecScatter: {
lazyLoad: true
}
},
onLoad(){
this.barComponent = this.selectComponent('#mychart-dom-multi-bar');
this.scaComponnet = this.selectComponent('#mychart-dom-multi-scatter');
this.init_bar();
this.init_sca();
},
init_bar: function (){
this.barComponent.init((canvas, width, height) => {
// 初始化图表
const barChart = echarts.init(canvas, null, {
width: width,
height: height
});
barChart.setOption(this.getBarOption());
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return barChart;
});
},
init_sca: function () {
this.scaComponnet.init((canvas, width, height) => {
// 初始化图表
const scaChart = echarts.init(canvas, null, {
width: width,
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: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
axisLine: {
lineStyle: {
color: '#999'
}
},
axisLabel: {
color: '#666'
}
}
],
series: [
{
name: '热度',
type: 'bar',
label: {
normal: {
show: true,
position: 'inside'
}
},
data: [300, 270, 340, 344, 300, 320, 310]
},
{
name: '正面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: [120, 102, 141, 174, 190, 250, 220]
},
{
name: '负面',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
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),
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 异步加载数据”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
名称栏目：微信小程序中如何使用ECharts异步加载数据-创新互联
新闻来源：
http://www.cdkjz.cn/article/dcdsjg.html
