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


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 相关文章推荐
json 定义
Jun 10 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
js简单抽奖代码
Jan 16 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
ES6对象操作实例详解
May 23 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
python内存动态分配过程详解
2019/07/15 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python第三方库学习笔记
2020/02/07 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
GWebs公司笔试题
2012/05/04 面试题
企业治理工作自我评价
2013/09/26 职场文书
总经理助理的八要求
2013/11/12 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
关于安全的演讲稿
2014/05/09 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
排查MySQL生产环境索引没有效果
2022/04/11 MySQL