微信小程序中使用ECharts 异步加载数据实现图表功能


Posted in Javascript onJuly 13, 2018

具体代码如下所示:

<view class="container">
 <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
import * as echarts from '../../ec-canvas/echarts';
var barec = null
Page({
 onShareAppMessage: function (res) {
  return {
   title: 'ECharts 可以在微信小程序中使用啦!',
   path: '/pages/index/index',
   success: function () { },
   fail: function () { }
  }
 },
 data: {
  ec: {
   onInit: function (canvas, width, height) {
    barec = echarts.init(canvas, null, {
     width: width,
     height: height
    });
    canvas.setChart(barec);
    return barec;
   }
  }
 },
 onReady() {
  setTimeout(this.getData, 500);
 },
//getData方法里发送ajax
 getData(){
  wx.showLoading({
   title: '加载中...',
  })
   wx.request({
    url: 'http://192.168.3.81/heart.php',
    herder:{
     "content-type":"json"
    },
    success:function(res){
     console.log(res);
     var data = res.data.info;
     console.log(data);
     barec.setOption({
      grid: {
       left: '3%',
       right: '7%',
       bottom: '3%',
       containLabel: true
      },
      tooltip: {
       // trigger: 'axis',
       showDelay: 0,
       formatter: function (params) {
        if (params.value.length > 1) {
         return params.seriesName + ' :<br/>'
          + params.value[0] + 'm '
          + params.value[1] + 'm ';
        }
        else {
         return params.seriesName + ' :<br/>'
          + params.name + ' : '
          + params.value + 'm ';
        }
       },
       axisPointer: {
        show: true,
        type: 'cross',
        lineStyle: {
         type: 'dashed',
         width: 1
        }
       }
      },
      legend: {
       data: ["学生"],
       left: 'center'
      },
      xAxis: [
       {
        type: 'value',
        scale: true,
        axisLabel: {
         formatter: '{value} m'
        },
        splitLine: {
         show: false
        }
       }
      ],
      yAxis: [
       {
        type: 'value',
        scale: true,
        axisLabel: {
         formatter: '{value} m'
        },
        splitLine: {
         show: false
        }
       }
      ],
      series: [{
       name: '学生',
      // symbolSize: 20,
       data:data,
       type: 'scatter',
       markArea: {
        silent: true,
        itemStyle: {
         normal: {
          color: 'transparent',
          borderWidth: 1,
          borderType: 'dashed'
         }
        },
        data: [[{
         name: '教室',
         xAxis: '0',
         yAxis: '0'
        }, {
         xAxis: '20',
         yAxis: '20'
        }]]
       },
       markPoint: {
        // data: [
        //  { type: 'max', name: '最大值' },
        //  { type: 'min', name: '最小值' }
        // ]
       },
       markLine: {
        lineStyle: {
         normal: {
          type: 'solid'
         }
        },
        // data: [
        //  { type: 'average', name: '平均值' },
        //  { xAxis: 160 }
        // ]
       }
      }]
     })
     wx.hideLoading(); 
    },
    fail: function (res) { },
    complete: function (res) { },
   })
 }
});

总结

以上所述是小编给大家介绍的微信小程序中使用ECharts 异步加载数据实现图表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
vue实例的选项总结
Jun 09 Javascript
JS实现select选中option触发事件操作示例
Jul 13 #Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 #Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 #Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 #Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 #Javascript
微信小程序实现tab页面切换功能
Jul 13 #Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 #Javascript
You might like
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python使用Matplotlib画条形图
2020/03/25 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
html5录音功能实战示例
2019/03/25 HTML / CSS
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
网络工程专业自荐信范文
2014/03/16 职场文书
三方协议书范本
2014/04/22 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
法务专员岗位职责
2015/02/14 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
理解python中装饰器的作用
2021/07/21 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python