交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 微信小程序实现折线图的示例代码

    插件地址: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画折线图的方法示例

    广而告之:
    热门推荐:
    浅析js 文字滚动效果

    这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下···

    Laravel使用memcached缓存对文章增删改查进行优化的方法

    本文实例讲述了Laravel使用memcached缓存对文章增删改查进行优化的方法。分享给大家供大家参考,具体如下: 这里我们将以文章的增删改查作为实例系统讲述缓存的使用,这个实例是对之前创建RESTFul风格控制器实现文章增删改查这篇教程的改造和升级,我们将在其基础上融合进Eloqu···

    织梦dedecms时间格式汇总标签汇总

    时间格式  {dede:field name='pubdate' function='strftime("%Y年%m月%d日 %H:%M:%S","@me")' /}2007年1月1日 18:30:02  {dede:field name='pubdate' function='strftime("%Y-%m-%d %H:%M:···

    HTML5学习心得总结(推荐)

    Html学习总结 1.什么是html:HyperTextMarket language,超文本标记语言,是用来描述网页语言,html使用标记标签来描述网页,html不是编程语言,是一种标记语言。 2.经历过得版本:HTML2.0、HTML3.2、HTML4.0、HTML4.0.1、HTML5 3.H5新特性: •用于绘画的 canvas 元素•···

    php的字符串用法小结

    1 求长度,最基本的 $text = "sunny day"; $count = strlen($text); // $count = 9 2 字符串截取 截取前多少个字符 $article = "BREAKING NEWS: In ultimate irony, man bites dog."; $summary = substr_replace($article, "...", 40); 3 算单词数 $article = "BREAKIN···

    Javascript中call与apply的学习笔记

    先看MDN中对于call的解释 call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 注:该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。 语法 fun.call(t···

    小程序异步问题之多个网络请求依次执行并依次收集请求结果

    业务逻辑 最近开发一个便签小程序的时候,有这样一个需求:用户可以在写便签的时候添加一个或多个图片。 对于这个需求,我们用户按下保存键时,内部具体的实现上是这样的逻辑: 首先检测用户是否传入了图片,如果存储本地图片地址的数组长度>=1,则将图片数组放入上传图片···

    浅析PHP原理之变量(Variables inside PHP)

    或许你知道,或许你不知道,PHP是一个弱类型,动态的脚本语言。所谓弱类型,就是说PHP并不严格验证变量类型(严格来讲,PHP是一个中强类型语言,这部分内容会在以后的文章中叙述),在申明一个变量的时候,并不需要显示指明它保存的数据的类型:复制代码 代码如下:<?php&···

    React优化子组件render的使用

    在react中,父组件的重新render会引发子组件的重新render,但是一些情况下我们会觉得这样做有些多余,比如: 父组件并未传递props给子组件 新传递的props渲染结果不变 class A extends React.Component { render() { console.log('render') return <div>这···

    基于Javascript实现文件实时加载进度的方法

    我们首先来看看要实现的效果图 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} div{width:200px;height: 30px;border:1px solid ···