专栏首页编程微刊uCharts实现一个叠堆柱状图

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

实现效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 腾讯面试官问我Java中boolean类型占用多少个字节?我说一个,面试官让我回家等通知

    布尔类型:布尔数据类型只有两个可能的值:真和假。使用此数据类型为跟踪真/假条件的简单标记。这种数据类型就表示这一点信息,但是它的“大小”并不是精确定义

    乔戈里
  • ApiBoot开源框架各个组件的系列使用文章汇总

    ApiBoot是接口服务的落地解决方案,依赖于SpringBoot,提供了一系列开箱即用的组件,通过封装来简化主流第三方框架的集成,从而提高开发者开发效率、学习...

    恒宇少年
  • 解决Yii2.0 高级版不能使用内置服务器的问题

    今天社区一个小伙伴给我留言说是 Yii 框架可不可以像 Laravel 一样直接使用内置服务器直接跑起项目 在Laravel 中 直接:

    hedeqiang
  • 不要群里问了,Apollo这个坑你现在就记好!

    项目用的springboot,连带着配置中心也一直用的spring的配置中心,但是一直以来都有各种问题:

    黄泽杰
  • JS的静态类型检测,有内味儿了

    我们知道 TypeScript 2.3 以后的版本支持使用--checkJs对.js文件进行类型检查和错误提示。 但是由于 JavaScript 是弱类型语言,...

    Daotin
  • 2019年度最受欢迎前端开源技术,你会多少?

    就在今天,开源中国最新统计的2019年最受开发者欢迎的开源软件排名出来了,关于前端部分,vue,react,小程序依旧是大家的心中所爱,技术更新换代太快,各种框...

    祈澈菇凉
  • springboot|springboot配置拦截器

    在springboot中配置拦截器大体上分为以下几步 1.引入相关的依赖 2.新建拦截器 3.配置拦截器Bean 虽然网上有很多配置方法,但是我更倾向于官方文件...

    微笑的小小刀
  • Ubuntu 安装 Elasticsearch 和 elasticsearch-analysis-ik 分词

    hedeqiang
  • 备战CKA每日一题——第10天 | 面试常问:允许A访问B,不允许C访问B,怎么做?

    第一个Deploy文件cka-1128-01.yaml,使用radial/busyboxplus镜像是因为busybox里没有curl命令。

    用户2511396
  • Per.js - 快速、简便的响应式 JavaScript 开发框架

    在开源中国看到一则帖子 Per.js - 快速、简便的响应式 JavaScript 开发框架,该库是一个刚开始的出道 JavaScript 库,据作者介绍他的...

    hedeqiang

扫码关注云+社区

领取腾讯云代金券