微信小程序中使用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 相关文章推荐
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
node.js require() 源码解读
Dec 13 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
vue实现文件上传功能
2018/08/13 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
Python异常处理总结
2014/08/15 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python requests库用法实例详解
2018/08/14 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
教师岗位职责范本
2013/12/29 职场文书
初婚初育证明
2014/01/14 职场文书
初一学生评语大全
2014/04/24 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
捐资助学感谢信
2015/01/21 职场文书
财务人员入职担保书
2015/09/22 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
解析目标检测之IoU
2021/06/26 Python
mysql 获取时间方式
2022/03/20 MySQL