VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 微信小程序实现折线图的示例代码

    插件地址: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了!

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

    您可能感兴趣的文章:

    • 基于mpvue小程序使用echarts画折线图的方法示例

    广而告之:
    热门推荐:
    JavaScript 正则命名分组【推荐】

    前言 以往我们只是习惯于通过数组下标来访问正则匹配到的分组,但分组达到4、5个时,标识起来就会非常麻烦。V8早已实现了正则命名分组提案,只是我们很少使用,本文将介绍JS的正则命名分组。 以往的做法 假设要使用正则匹配一个日期的年月日,以往我们会这样做: const RE_D···

    通过不修改arc.archives.class.php而保留原有样式调上一篇下一篇

    今天织梦58站长分享一个织梦内容页上下篇的调用方法,估计在大家在仿站的过程中,经常会碰到原站的上下篇很美观,比如如图类似的这种:或,但是用织梦原有调用上下篇的标签来调用,总达不到我们想要的效果,找不到原站样式了。需要修改arc.archives.class.php,但···

    ThinkPHP令牌验证实例

    ThinkPHP内置了表单令牌验证功能,可以有效防止表单的远程提交等安全防护。 表单令牌验证相关的配置参数有: 'TOKEN_ON'=>true, // 是否开启令牌验证 'TOKEN_NAME'=>'__hash__', // 令牌验证的表单隐藏字段名称 'TOKEN_TYPE'=>'md5', //令牌哈希验证规则 默认为M···

    浅析Yii中使用RBAC的完全指南(用户角色权限控制)

    写在前面    * 我的feed地址已经修改为: http://feeds.imdong.net ,请更新您的阅读器。    * 以下内容适合Yii 1.0.x,其他版本可能有略微的差别。    * 根据您的评论和反馈,本文会不断进行修改和补充,以方便新学习者。···

    php session

    说是已经有输出,用编辑器打,前面明明什么都没有,原来在使用AJAX的 时候,也出现过这种情况,后来,把这个PHP文件放到linux中打开,会发现,在文件的最前面,会出现“锘 ”这样的一个字符(引号内),把它去掉以后,再运行,OK,运行正常。后来在网上搜索一些文件,给的···

    php DOS攻击实现代码(附如何防范)

    index.php 复制代码 代码如下: <?php $ip = $_SERVER['REMOTE_ADDR']; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" conten···

    图片动态加载技术应用及jquery.lazyload插件使用实例

    应用实例小站 http://www.uhuigou.net 图片动态加载不算什么新东西了,很多大站都在用,优势很明显,主要是节省流量(包括服务器和客户端),给用户的体验也要好些,可以提高页面的打开速度. 原理也不复杂,图片还是用原来的img标签,src指向一个默认的小图,比如loading之类,然后···

    iframe的src赋值问题(服务器端)

    今天遇到这个问题,服务器端的iframe重新src重新赋值,给iframe加一个ID,再加上runat=server 1.通过JS 给 iframe 的src 赋值 2.如果需要在C# 后台,页面加载时就改变iframe的src 可以通过 如<iframe id="ifram" runat=server >申请为服务器端控件 在程序里···

    ie6 失真问题

    问题: <form...>下面的<input type="hidden" name="sortBy" id="sortBy" value="${sortBy}">占据物理位置的情况,代码如下: <form name="header_product_search_form" method="post" id="h···

    PHP判断浏览器、判断语言代码分享

    PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用。 判断浏览器类型 //判断类型 <?php if(strpos($_SERVER["HTTP_USER_AGENT"],"MSIE 8.0")) echo "Internet Explorer 8.0"; else if(strpos($_SERVER["HTTP_USER_AGENT"],···