微信小程序中使用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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
js更优雅的兼容
Aug 12 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 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
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
Node.js编码规范
2014/07/14 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
python中执行shell的两种方法总结
2017/01/10 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
为什么是 Python -m
2020/06/19 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
社区矫正工作方案
2014/06/04 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
教师个人考察材料
2014/12/16 职场文书
关于开学的感想
2015/08/10 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python