微信小程序中使用微信小程序中使用ECharts 异步加载数据的方法异步加载数据的方法
主要介绍了微信小程序中使用ECharts 异步加载数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友
可以参考下
官网例子都是同步的，怎么引入及同步demo请移步官网
<view class="container">
<ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas>
<ec-canvas id="mychart-dom-multi-scatter" canvas-id="mychart-multi-scatter" ec="{{ ecScatter }}"></ec-canvas>
</view>
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'
}
评论0