talent_map/uniapp/pages/kanban/kanban.vue

<template>
    <view >
        <view class="chart-panel" v-if="userInfo.nickname">
            <view class="charts-item">
                <view class="flex">
                    <text
                        style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
                    <view class="bold font-size-30">占比饼状图</view>
                </view>
                <view class="charts-box">
                    <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
                </view>
            </view>
            <view class="charts-item">
                <view class="flex">
                    <text
                        style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
                    <view class="bold font-size-30">金字塔漏斗图</view>
                </view>
                <view class="charts-box" style="height: 500px;">
                    <qiun-data-charts type="funnel" :opts="optsFunel" :chartData="chartData" />
                </view>
            </view>
            <view class="charts-item">
                <view class="flex">
                    <text
                        style="width: 12rpx;height: 40rpx;background: #DD4250;border-radius: 12rpx; margin-right: 20rpx;"></text>
                    <view class="bold font-size-30">城市词云图</view>
                </view>
                <view class="charts-box" style="height: 500px;">
                    <qiun-data-charts type="word" :opts="opts" :chartData="chartDataWord" />
                </view>
            </view>
        </view>
        <view v-else>
            <u-empty mode="permission" margin-top="180" icon-size="600" text="请使用企业身份登录"
                src="/static/images/permission.png">
                <router-link to="/pages/login/login" slot="bottom" class="flex row-center user-login white m-t-16 p-t-16 p-b-16 p-l-50 p-r-50">
                    点击登录
                </router-link>
            </u-empty>
        </view>
    </view>


</template>

<script>
    import {
        getTalentsCount
    } from '@/api/app';
    import {
        mapActions,
        mapGetters
    } from 'vuex'

    export default {
        data() {
            return {
                chartData: {},
                chartDataWord: {},
                opts: {
                    // dataLabel: false,
                    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
                        "#ea7ccc"
                    ],
                    // padding: [5, 5, 5, 5],
                    xAxis: {
                        disableGrid: true
                    },
                    yAxis: {
                        data: [{
                            min: 0
                        }]
                    },
                    enableScroll: false,
                    legend: {
                        padding: 5,
                        margin: 5,
                        float: 'left'
                    },
                    extra: {
                        pie: {
                            activeOpacity: 0.5,
                            activeRadius: 10,
                            offsetAngle: 0,
                            labelWidth: 10,
                            border: true,
                            borderWidth: 1,
                            borderColor: "#FFFFFF",
                            // linearType: "custom"
                        },
                        funnel: {
                            activeOpacity: 0.3,
                            activeWidth: 10,
                            border: true,
                            borderWidth: 2,
                            borderColor: "#FFFFFF",
                            fillOpacity: 1,
                            labelAlign: "right",
                            type: "pyramid"
                        },
                        word: {
                            type: "normal",
                            autoColors: true
                        }
                    }
                },
                optsFunel: {
                    dataLabel: false,
                },
            }
        },
        onLoad(options) {
            Object.assign(this.optsFunel, this.opts);
        },
        onReady() {

        },
        onUnload() {},
        onShow() {
            this.getCountFun();
            this.getUser();
        },
        onPullDownRefresh() {
            this.getCountFun();
            this.getUser().then(() => {
                uni.stopPullDownRefresh();
            })
        },
        onHide() {},
        methods: {
            ...mapActions(['getUser']),
            async getCountFun() {
                const {
                    status,
                    data
                } = await getTalentsCount({});
                if (status == 1) {
                    let res = {
                        series: [{
                            data: data.normal,
                        }]
                    };
                    this.chartData = JSON.parse(JSON.stringify(res));
                    res = {
                        series: data.word
                    };
                    this.chartDataWord = JSON.parse(JSON.stringify(res));
                }
                uni.stopPullDownRefresh();
            },
        },
        computed: {
            ...mapGetters(['userInfo', 'sysInfo', 'appConfig']),
        }
    }
</script>

<style lang="scss">
    page {
        padding: 0;
        height: 100%;
    }

    .chart-panel {
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
    }

    .charts-item {
        background: #FFFFFF;
        box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.03);
        border-radius: 6px 6px 6px 6px;
        padding: 20rpx;
        margin: 30rpx;
    }

    /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
    .charts-box {
        width: 100%;
        height: 350px;
    }

    .user-login {
        background: #DD4250;
        box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        border: 2rpx solid #DD4250;
    }
</style>