微信小程序中使用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 相关文章推荐
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
浅谈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
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP微信支付开发实例
2016/06/22 PHP
JS跨域总结
2012/08/30 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
JavaScript实现的拼图算法分析
2019/02/13 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python写的服务监控程序实例
2015/01/31 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
django 信号调度机制详解
2019/07/19 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
数据员岗位职责
2013/11/19 职场文书
单位消防安全制度
2014/01/12 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
中学教师教育感言
2014/02/21 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
房屋出售授权委托书
2014/10/12 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL