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


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 相关文章推荐
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
什么是SOLID
Mar 24 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
学习JavaScript设计模式(多态)
2015/11/25 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
JS实现密码框效果
2020/09/10 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
高一历史教学反思
2014/01/13 职场文书
打造完美自荐信
2014/01/24 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
保密工作承诺书
2014/08/29 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
单位更名证明
2015/06/18 职场文书
七年级作文之我的梦想
2019/10/16 职场文书