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

这篇文章主要介绍了微信小程序中使用echarts 异步加载数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

官网例子都是同步的，怎么引入及同步demo请移步官网

 view >
import * as echarts from #39;../../ec-canvas/echarts #39;;
Page({
 data: {
 ecBar: {
 lazyLoad: true // 延迟加载
 ecScatter: {
 lazyLoad: true 
 onLoad(){
 this.barComponent = this.selectComponent( #39;#mychart-dom-multi-bar #39;);
 this.scaComponnet = this.selectComponent( #39;#mychart-dom-multi-scatter #39;);
 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: [ #39;#37a2da #39;, #39;#32c5e9 #39;, #39;#67e0e3 #39;],
 tooltip: {
 trigger: #39;axis #39;,
 axisPointer: { // 坐标轴指示器，坐标轴触发有效
 type: #39;shadow #39; // 默认为直线，可选为： #39;line #39; | #39;shadow #39;
 legend: {
 data: [ #39;热度 #39;, #39;正面 #39;, #39;负面 #39;]
 grid: {
 left: 20,
 right: 20,
 bottom: 15,
 top: 40,
 containLabel: true
 xAxis: [
 type: #39;value #39;,
 axisLine: {
 lineStyle: {
 color: #39;#999 #39;
 axisLabel: {
 color: #39;#666 #39;
 yAxis: [
 type: #39;category #39;,
 axisTick: { show: false },
 data: [ #39;汽车之家 #39;, #39;今日头条 #39;, #39;百度贴吧 #39;, #39;一点资讯 #39;, #39;微信 #39;, #39;微博 #39;, #39;知乎 #39;],
 axisLine: {
 lineStyle: {
 color: #39;#999 #39;
 axisLabel: {
 color: #39;#666 #39;
 series: [
 name: #39;热度 #39;,
 type: #39;bar #39;,
 label: {
 normal: {
 show: true,
 position: #39;inside #39;
 data: [300, 270, 340, 344, 300, 320, 310]
 name: #39;正面 #39;,
 type: #39;bar #39;,
 stack: #39;总量 #39;,
 label: {
 normal: {
 show: true
 data: [120, 102, 141, 174, 190, 250, 220]
 name: #39;负面 #39;,
 type: #39;bar #39;,
 stack: #39;总量 #39;,
 label: {
 normal: {
 show: true,
 position: #39;left #39;
 data: [-20, -32, -21, -34, -90, -130, -110]
 getScaOption:function(){
 //请求数据 
 var data = [];
 var data2 = [];
 for (var i = 0; i 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: #39;#C8C8C8 #39;
 axisTick: {
 lineStyle: {
 color: #39;#fff #39;
 axisLine: {
 lineStyle: {
 color: #39;#C8C8C8 #39;
 splitLine: {
 lineStyle: {
 color: #39;#C8C8C8 #39;,
 type: #39;solid #39;
 return {
 color: [ #FF7070 , #60B6E3 ],
 backgroundColor: #39;#eee #39;,
 xAxis: axisCommon,
 yAxis: axisCommon,
 legend: {
 data: [ #39;aaaa #39;, #39;bbbb #39;]
 visualMap: {
 show: false,
 max: 100,
 inRange: {
 symbolSize: [20, 70]
 series: [{
 type: #39;scatter #39;,
 name: #39;aaaa #39;,
 data: data
 name: #39;bbbb #39;,
 type: #39;scatter #39;,
 data: data2
 animationDelay: function (idx) {
 return idx * 50;
 animationEasing: #39;elasticOut #39;
});
注意：异步加载时，ec-canvas标签加载显示要先于this.scaComponnet.init，否则会报错。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于微信小程序中跳转传参数与传对象的解析

微信小程序中支付后调用SDK的异步通知及验证处理订单方法

关于微信小程序的异步处理
以上就是微信小程序中使用ECharts 异步加载数据的方法的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！