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


Posted in Javascript onJune 27, 2018

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

Javascript 相关文章推荐
字符串的replace方法应用浅析
Dec 06 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
webpack优化的深入理解
Dec 10 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
浅谈Webpack下多环境配置的思路
Jun 27 #Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 #Javascript
详解关于vue-area-linkage走过的坑
Jun 27 #Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 #Javascript
Vue引入sass并配置全局变量的方法
Jun 27 #Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 #Javascript
vue中v-model的应用及使用详解
Jun 27 #Javascript
You might like
合作指挥官:孟斯克
2020/03/16 星际争霸
德生PL550的电路分析
2021/03/02 无线电
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
Javascript - HTML的request类
2007/01/09 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
Python获取邮件地址的方法
2015/07/10 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
QML用PathView实现轮播图
2020/06/03 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
化学专业毕业生自荐信
2013/11/15 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
承诺书样本
2014/08/30 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang