微信小程序：wx-charts动态绘制折线图
wx-charts是基于 Canvas的微信小程序主流图表工具，体积小易操作，支持多种图表的绘制，这里主要就动态绘制折线图做出详解，所谓动态，指的是表格的数据不是固定的，而是通过网络接口或者其他的途径获得的。
1.配置工具
首先，需要将wx-charts配置到小程序中，wx-chart.js文件下载地址：
/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的功能远不止如此，有兴趣的朋友可以参考：
/huangpb123/article/details/80467868
