uCharts實現一個疊堆柱狀圖

在uni-app裏面會使用到統計圖，和echarts相似，也有本身的官方文檔能夠做參考，開發考勤的app項目的時候遇到了一個疊堆柱狀圖，統計天天正常，遲到，缺勤，早退，補卡五種狀態的人數，作一下記錄。

官方文檔：http://doc.ucharts.cn/1073940

<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
}

http://localhost:3000/data3

 

 

 

實現效果：