微信小程序绘制图表（折线图、柱状图）

1.组件导入
在miniprogram下的utils文件夹（若没有就新建一个）下，新建wxcharts.js

图表组件链接：https://github.com/xiaolin3303/wx-charts/blob/master/dist/wxcharts.js
点进去，复制此js的全部内容，粘贴到wxcharts.js中。
2.柱状图
新建在pages下新建test，包括test.wxml，test.wxss，test.json，test.js用于测试图表效果

test.wxml

<canvas canvas-id="columnCanvas" disable-scroll="true" class="canvas"></canvas>

test.wxss

.canvas {width: 750rpx;height: 500rpx;
}

text.js

var wxCharts = require("../../utils/wxcharts.js");//相对路径
Page({data:{imageWidth:0},onLoad:function(){},onShow:function(){new wxCharts({canvasId: 'columnCanvas',type: 'column',categories: ['2012', '2013', '2014', '2015', '2016', '2017'],series: [{name: '成交量1',data: [15, 20, 45, 37, 4, 80]}],yAxis: {format: function (val) {return val + '万';},/*max:400,min:0*/},width: 320,height: 200});}})

效果：

若像取消柱状图每条顶部的数字显示，在wxcharts.js中修改，将这行注释掉即可

修改后，柱状图不再显示数值

2.折线图
test.wxml

<canvasstyle="width: 400px; height: 500px;"canvas-id="yueEle"binderror="canvasIdErrorCallback"
></canvas>

test.js

var wxCharts = require("../../utils/wxcharts.js");
var yuelineChart=null;
Page({data:{imageWidth:0},onLoad:function(){},onShow: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,series: [{name: 'A',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 + '';}}, {name: 'B',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 + '';}},],xAxis: {disableGrid: true},yAxis: {title: '数值',format: function (val) {return val;},/*max: 20,*/min: 0},width: windowWidth,height: 200,dataLabel: false,dataPointShape: true,extra: {lineStyle: 'curve'}});}
})

效果

不设置min和max时，默认y轴最小值为数据最小值，y轴最大值为数据最大值。有时，数据的变动幅度过大会显得不美观，就像上图。那么我们可以修改y轴的min和max值。
将test.js中y轴的max改为20，min改为-5后，图表更加美观。

微信小程序绘制图表（折线图、柱状图）相关推荐

微信小程序之图表系列——canvas绘制饼状图，带点击效果
一图胜千言,相信很多开发者都没有绕开过图表制作这个坑,在小程序中也是,当然可以用第三方echart等制图插件来做,但小程序要求代码量最大12M,还得分好几个包,一个echart插件就将近1M,要是只做 ...
微信小程序绘制分享图
微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明实际开发项目: 基础知识点: 了解canvas基础知识 w ...
微信小程序canvas画价格走势图（一）
今天是周二,今天来开一个新坑吧.最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图,现在来分享一下经验. 因为内容比较多,所以打算这次分为多篇博客来写,这样一篇博客的内容就会更少.更清晰.下 ...
微信小程序 F2 图表组件
@antv/f2-canvas 微信小程序 F2 图表组件安装 npm i @antv/f2-canvas 快速开始下面我们就开始使用 f2-canvas 组件来绘制图表吧,这里假设用户已经初步了 ...
微信小程序绘制海报，或者把多张图片合成一张
微信小程序绘制海报,或者把多张图片合成一张,例子 <image style='height:{{mabgh}}px;width:{{mabgw}}px;' class="savepng ...
微信小程序中使用echarts图
嗨喽大家好,我是老黑.最近这段时间完成了一个功能,那就是在微信小程序中引入了echarts图,也算是对这段时间的工作的一个总结吧.这个功能自己花费了很长的时间才整出来.后来自己反省了以下,总结了以 ...
微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...

微信小程序绘制图表（折线图、柱状图）

微信小程序绘制图表（折线图、柱状图）相关推荐

最新文章

热门文章