插件地址：https://github。com/xill 3303/wx-charts/blob/master/dist/wx charts。射流研究…

微信小程序折线图效果：

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

XXX.xml的代码：

画布样式=' width : 400 px ' height : 500 px ' canvasIdErrorCallback-id=' yuele ' binder错误=' canvasIdErrorCallback '/画布注意canvas-id='岳乐'要与射流研究…中的canvasId: ' yueEle '一样。才能显示图。

然后在XXX.js中配置：

1.在顶部写入：

2.写一个独立的方法（或者直接写在装载里面):

我这里写的方法名是getMothElectro，我后面试在装载里面调用了的。

getmotheelectro :函数(){ var window width=320请尝试{ var RES=wx。getsysteminfosync()；窗宽=RES .窗宽；} catch(e){ console。错误(' getSystemInfoSync失败!');} yuelineChart=new wxCharts({ //当月用电折线图配置canvasid :“yuele”，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”轴animation: true，//background: '#f5f5f5 '，series: [{ name: '总用电量，//数据： yuensimulationdata。data，data: [1，6，9，1，0，2，9，2，8，6，0，9，8，0，3，7，3，9，3，3，8，9，5，4，1，5，8，2，4，9，8，7]，format: function (val，name){ return val。to fixed(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，9，4，9，8，5，5，5，5，6]，format:函数(val，name){ return val。to fixed(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:函数(val，name){ return val。to fixed(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:函数(val，name){ return val。to fixed(2)“kWh”；} }]，xaxis : { disable grid : true }，yAxis: { title: '当月用电(千瓦时)，格式：函数(val){ return val。to fixed(2)；}，max: 20，min: 0 }，width: windowWidth，height: 200，dataLabel: false，dataPointShape: true，extra : { linestyle : ' curve ' } })；}3.然后在装载里面在调用一次：

4.在增加一个触摸显示功能：

月入池和：函数(e) { //当月用电触摸显示控制台。日志(日线图。getcurrentdata index(e))；月线图。显示工具提示(e，{//显示工具提示图表中展示数据详细内容background: '#7cb5ec '，format:函数（项目，类别){退货类别'日项目。名称为“:”的项目。data } })；},这样就好了！

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