微信小程序中使用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对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
微信小程序云开发之数据库操作
May 18 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
php实现微信扫码支付
2017/03/26 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
js 编写规范
2010/03/03 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
大学校园毕业自我鉴定
2014/01/15 职场文书
2014年端午节活动方案
2014/03/11 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
爱国主义演讲稿
2014/05/07 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
公务员政审材料
2014/12/23 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
Python Pandas 删除列操作
2022/03/16 Python
Java线程的6种状态与生命周期
2022/05/11 Java/Android