侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

微信(小程序)  /  管理员 发布于 5年前   1090

插件地址:https://github.com/xiaolin3303/wx-charts/blob/master/dist/wxcharts.js

微信小程序折线图效果:

首先需要引入一个折线图的插件:

XXX.xml 的代码:

注意 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画折线图的方法示例


  • 上一条:
    微信小程序如何刷新当前界面的实现方法
    下一条:
    在微信小程序中使用vant的方法
  • 昵称:

    邮箱:

    2条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 微信模板消息改版后发送规则记录(微信订阅消息参数值内容限制说明)(1个评论)
    • 微信支付v3对接所需工具及命令(0个评论)
    • 2023年9月1日起:微信小程序必须备案才能上线运营(0个评论)
    • 腾讯官方客服回应了:微信好友上限约10000个!(1个评论)
    • 2023年做微信小程序的老铁注意:新增收费项、微信小程序获取手机号也收费了(2个评论)
    • 近期文章
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    • 2023-06
    • 2023-07
    • 2023-08
    • 2023-10
    • 2023-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客