微信小程序实现折线图的示例代码


Posted in Javascript onJune 07, 2019

插件地址:https://github.com/xiaolin3303/wx-charts/blob/master/dist/wxcharts.js

微信小程序折线图效果:

微信小程序实现折线图的示例代码

首先需要引入一个折线图的插件:

微信小程序实现折线图的示例代码

XXX.xml 的代码:

<canvas
 style="width: 400px; height: 500px;"
 canvas-id="yueEle"
 binderror="canvasIdErrorCallback"
></canvas>

注意 canvas-id="yueEle" 要与 JS中的   canvasId: 'yueEle' 一样。才能显示图。

微信小程序实现折线图的示例代码

然后在XXX.js中配置:

1.在顶部写入:

微信小程序实现折线图的示例代码

2.写一个独立的方法(或者直接写在onload里面):

我这里写的方法名是  getMothElectro  ,我后面试在onload里面调用了的。

微信小程序实现折线图的示例代码

getMothElectro:function(){
  var windowWidth = 320;
  try {
   var res = wx.getSystemInfoSync();
   windowWidth = res.windowWidth;
  } catch (e) {
   console.error('getSystemInfoSync failed!');
  }
  yuelineChart = new wxCharts({ //当月用电折线图配置
   canvasId: 'yueEle',
   type: 'line',
   categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], //categories X轴
   animation: true,
   // background: '#f5f5f5',
   series: [{
    name: '总用电量',
    //data: yuesimulationData.data,
    data: [1, 6, 9, 1, 0, 2, 9, 2, 8, 6, 0, 9, 8, 0, 3, 7, 3, 9, 3, 8, 9, 5, 4, 1, 5, 8, 2, 4, 9, 8, 7],
    format: function (val, name) {
     return val.toFixed(2) + 'kWh';
    }
   }, {
    name: '电池供电量',
    data: [0, 6, 2, 2, 7, 6, 2, 5, 8, 1, 8, 4, 0, 9, 7, 2, 5, 2, 8, 2, 5, 2, 9, 4, 4, 9, 8, 5, 5, 5, 6],
    format: function (val, name) {
     return val.toFixed(2) + 'kWh';
    }
   },
   {
    name: '光伏供电量',
    data: [6, 4, 9, 7, 1, 4, 5, 1, 1, 8, 8, 6, 6, 2, 2, 2, 0, 5, 5, 8, 8, 8, 8, 9, 0, 4, 6, 9, 2, 1, 6],
    format: function (val, name) {
     return val.toFixed(2) + 'kWh';
    }
   },
   {
    name: '市电供电量',
    data: [0, 4, 3, 3, 1, 7, 7, 7, 9, 9, 3, 3, 0, 0, 5, 6, 0, 4, 1, 2, 0, 1, 3, 9, 2, 5, 1, 8, 3, 4, 2],
    format: function (val, name) {
     return val.toFixed(2) + 'kWh';
    }
   }],
   xAxis: {
    disableGrid: true
   },
   yAxis: {
    title: '当月用电(kWh)',
    format: function (val) {
     return val.toFixed(2);
    },
    max: 20,
    min: 0
   },
   width: windowWidth,
   height: 200,
   dataLabel: false,
   dataPointShape: true,
   extra: {
    lineStyle: 'curve'
   }
  });
 }

3.然后在onload里面在调用一次:

微信小程序实现折线图的示例代码

4.在增加一个触摸显示功能:

微信小程序实现折线图的示例代码

微信小程序实现折线图的示例代码

yueTouchHandler: function (e) { //当月用电触摸显示
  console.log(daylineChart.getCurrentDataIndex(e));
  yuelineChart.showToolTip(e, { //showToolTip图表中展示数据详细内容
   background: '#7cb5ec',
   format: function (item, category) {
    return category + '日 ' + item.name + ':' + item.data
   }
  });
 },

这样就OK了!

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
详谈javascript精度问题与调整
Jul 08 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 #Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 #Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 #Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 #Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 #Javascript
ES6小技巧之代替lodash
Jun 07 #Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 #Javascript
You might like
php 文件上传实例代码
2012/04/19 PHP
php实现单链表的实例代码
2013/03/22 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JQuery中的事件及动画用法实例
2015/01/26 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python聊天室实例程序分享
2016/01/05 Python
Python中的日期时间处理详解
2016/11/17 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
python时间日期操作方法实例小结
2020/02/06 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
Java语言的优势
2015/01/10 面试题
小小的船教学反思
2014/02/21 职场文书
商务英语广告词大全
2014/03/18 职场文书
工程负责人任命书
2014/06/06 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
荆州古城导游词
2015/02/06 职场文书
药品开票员岗位职责
2015/04/15 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis