微信小程序：wx-charts动态绘制折线图

wx-charts是基于 Canvas的微信小程序主流图表工具，体积小易操作，支持多种图表的绘制，这里主要就动态绘制折线图做出详解，所谓动态，指的是表格的数据不是固定的，而是通过网络接口或者其他的途径获得的。

1.配置工具

首先，需要将wx-charts配置到小程序中，wx-chart.js文件下载地址：

https://download.csdn.net/download/botellei/13739743

下载好文件后将其放到微信小程序utils文件夹中，然后在js文件中引用即可：

var wxCharts = require('../../utils/wxcharts.js');

2.绘制表格

运行截图

实现代码

js:

var wxCharts = require('../../utils/wxcharts.js');
var lineChart = null;
Page({data:{textcolor1:'#014f8e',textcolor2:'#bfbfbf',},onLoad:function(){//下面是图表一显示的数据，只需替换掉数据折现就会发生变化实现动态生成var x_data=["12-05", "12-06", "12-07", "12-08", "12-09", "12-10", "12-11", "12-12", "12-13", "12-14", "12-15", "12-16", "12-17", "12-18", "12-19"]var y_data= ["2710778.83", "3701004.17", "1959107.37", "1875401.10", "1844007.76", "1927753.07", "2214439.68", "2501855.64", "2348521.30", "1815527.72", "1938038.04", "1911152.88", "2062097.59", "2397674.45", "2796167.86"]//绘制折线图this.OnWxChart(x_data,y_data,'图表一')},//更换折线图数据为图表一数据canvas1_click:function(){this.setData({textcolor1:'#014f8e',textcolor2:'#bfbfbf',})  var x_data=["12-05", "12-06", "12-07", "12-08", "12-09", "12-10", "12-11", "12-12", "12-13", "12-14", "12-15", "12-16", "12-17", "12-18", "12-19"]var y_data= ["2710778.83", "3701004.17", "1959107.37", "1875401.10", "1844007.76", "1927753.07", "2214439.68", "2501855.64", "2348521.30", "1815527.72", "1938038.04", "1911152.88", "2062097.59", "2397674.45", "2796167.86"]//绘制折线图this.OnWxChart(x_data,y_data,'图表一')},//更换折线图数据为图表二数据canvas2_click:function(){this.setData({textcolor1:'#bfbfbf',textcolor2:'#014f8e',})var x_data=["1", "2", "3", "4", "5", "6", "7", "8", "9"]var y_data= ["113", "620", "332", "540", "580", "580", "603", "100", "605"]//绘制折线图this.OnWxChart(x_data,y_data,'图表二')},//图表点击事件touchcanvas:function(e){lineChart.showToolTip(e, {format: function (item, category) {return category + ' ' + item.name + ':' + item.data}});},//折线图绘制方法OnWxChart:function(x_data,y_data,name){var windowWidth = '', windowHeight='';    //定义宽高try {var res = wx.getSystemInfoSync();    //试图获取屏幕宽高数据windowWidth = res.windowWidth / 750 * 690;   //以设计图750为主进行比例算换windowHeight = res.windowWidth / 750 * 550    //以设计图750为主进行比例算换} catch (e) {console.error('getSystemInfoSync failed!');   //如果获取失败}lineChart = new wxCharts({canvasId: 'lineCanvas',     //输入wxml中canvas的idtype: 'line',     categories:x_data,    //模拟的x轴横坐标参数animation: true,  //是否开启动画series: [{name: name,data: y_data,format: function (val, name) {return val + '元';}}],xAxis: {   //是否隐藏x轴分割线disableGrid: true,},yAxis: {      //y轴数据title: '',  //标题format: function (val) {  //返回数值return val.toFixed(2);},min: 400000.00,   //最小值gridColor: '#D8D8D8',},width: windowWidth*1.1,  //图表展示内容宽度height: windowHeight,  //图表展示内容高度dataLabel: false,  //是否在图表上直接显示数据dataPointShape: true, //是否在图标上显示数据点标志extra: {lineStyle: 'Broken'  //曲线},});}
})

wxml:

<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"  bindtouchstart="touchcanvas"></canvas>
<view class = "canvas1_button" bindtap="canvas1_click" ><text style="color:{{textcolor1}}" class="canvas1_text">图表一</text>
</view>
<view class = "canvas2_button" bindtap="canvas2_click" ><text style="color:{{textcolor2}}" class="canvas2_text">图表二</text>
</view>

wxss:

.canvas {position: absolute;width: 100%;height: 50%;top: 10%;
}
.canvas1_button{position: absolute;right:25.5%;width: 22%;height: 45rpx;top: 6%;
}
.canvas1_text{position: absolute;right:0%;width: 65%;height: 90%;bottom: 10%;text-align: center;font-size: 14px;
}
.canvas2_button{position: absolute;right:2.1%;width: 22%;height: 45rpx;top: 6%;
}
.canvas2_text{position: absolute;right:0%;width: 65%;height: 90%;bottom: 10%;text-align: center;font-size: 14px;
}

后记

其实wx-charts的功能远不止如此，有兴趣的朋友可以参考：

https://blog.csdn.net/huangpb123/article/details/80467868

微信小程序：wx-charts动态绘制折线图相关推荐

微信小程序中使用Echarts（折线图）
一.微信中使用 Echars 直接在官网小程序使用Echarts中(文档-教程-在微信中使用Echarts),找到GitHub上的DEMO下载链接,官网有详细的使用步骤官网:http://echar ...
微信小程序Canvs画数据表格折线图
微信小程序Canvs画数据表格应设计要求,需要画个图标来显示用户历史数据的变化,所以就写了个方法,方便自己以后用的时候调用废话不多说,先上效果图现在.wxml文件中加入canvas 标签给他一 ...
微信小程序修改数组中的元素_微信小程序——this.setData()动态修改数组中的某一值...
微信小程序--this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像?S8v ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序 wx.request 的封装
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下 ...
微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑如何使用第二个坑如何使用微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
微信小程序 wx.setstoragesync和wx.setstorage 区别
相同点: 微信小程序 wx.setstoragesync和wx.setstorage都是能把值保存在微信小程序缓存中,类似于浏览器的localstorage概念区别: wx.setStorage是异 ...

微信小程序：wx-charts动态绘制折线图

微信小程序：wx-charts动态绘制折线图

1.配置工具

2.绘制表格

运行截图

实现代码

后记

微信小程序：wx-charts动态绘制折线图相关推荐

最新文章

热门文章