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


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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
解析vue中的$mount
2017/12/21 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
优秀实习自我鉴定
2013/12/04 职场文书
活动总结的格式
2014/05/07 职场文书
爱国主义演讲稿
2014/05/07 职场文书
区级文明单位申报材料
2014/05/15 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
社会实践心得体会范文
2016/01/14 职场文书
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers