微信小程序中使用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语句可以不以;结尾的烦恼
Mar 08 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
详解前后端分离之VueJS前端
May 24 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
JavaScript常用8种数组去重代码实例
Sep 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
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
php实现可逆加密的方法
2015/08/11 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Python hmac模块使用实例解析
2019/12/24 Python
Python tkinter常用操作代码实例
2020/01/03 Python
python 的topk算法实例
2020/04/02 Python
python利用opencv保存、播放视频
2020/11/02 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
劳动实践课感言
2014/02/01 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
《落花生》教学反思
2014/02/25 职场文书
高中军训感言1000字
2014/03/01 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
转学证明范本
2015/06/19 职场文书
公司董事任命书
2015/09/21 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS