微信小程序中使用ECharts 异步加载数据的方法

官网例子都是同步的，怎么引入及同步demo请移步官网<viewclass="container"><ec-canvasid="mych

官网例子都是同步的，怎么引入及同步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'
 }
 },
 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 异步加载数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！