在uni-app里面会使用到统计图，和echarts类似，也有自己的官方文档可以作参考，开发考勤的app项目的时候遇到了一个叠堆柱状图，统计每天正常，迟到，缺勤，早退，补卡五种状态的人数，做一下记录。
<template> <view class="qiun-columns"> <view class="qiun-title-bar" style=""> <view class="qiun-title-dot-light">考勤统计</view> </view> <view class="qiun-charts" style=""> <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts"></canvas> </view> </view> </template> <script> import uCharts from '../../../components/u-charts/u-charts.js'; let _self; let canvaColumn = null; export default { data() { return { cWidth: '', cHeight: '', pixelRatio: 1, serverData: '', } }, onLoad() { _self = this; uni.getSystemInfo({ success: function(res) {} }); //#endif this.cWidth = uni.upx2px(750); this.cHeight = uni.upx2px(500); //this.fillData(Data); }, onReady() { this.getServerData(); }, methods: { getServerData() { uni.showLoading({ title: "正在加载数据..." }) uni.request({ url: 'http://localhost:3000/data3', data: {}, success: function(res) { _self.fillData(res.data); }, fail: () => {}, complete() { uni.hideLoading(); } }); }, fillData(data) { this.serverData = data; let Column = { categories: [], series: [] }; //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去 Column.categories = data.Column.categories; //这里的series数据是后台做好的，如果您的数据没有和前面我注释掉的格式一样，请自行拼接数据 Column.series = data.Column.series; this.showColumn("canvasColumn", Column); }, showColumn(canvasId, chartData) { canvaColumn = new uCharts({ $this: _self, canvasId: canvasId, type: 'column', legend: true, fontSize: 11, // background: '#E5FDC3', pixelRatio: _self.pixelRatio, animation: true, categories: chartData.categories, series: chartData.series, xAxis: { disableGrid: true, }, yAxis: { //disabled:true }, dataLabel: true, width: _self.cWidth * _self.pixelRatio, height: _self.cHeight * _self.pixelRatio, extra: { column: { width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length } } }); }, } } </script> <style> /* 通用样式 */ .qiun-charts { width: 750upx; height: 500upx; background-color: #FFFFFF; } .charts { width: 750upx; height: 500upx; background-color: #FFFFFF; } </style>
json.js
let data = { "Column": { "categories": ["2019/12/12", "2019/12/13", "2019/12/14","2019/12/15"], "series": [{ "name": "正常", "data": [15, 22, 37,12] }, { "name": "迟到", "data": [0, 25, 14,1] }, { "name": "缺勤", "data": [0, 20, 14,14] } , { "name": "早退", "data": [1, 2, 1,6] },{ "name": "补卡", "data": [3, 5, 4,9] }] } } module.exports = { data: data }
实现效果：
