baozhida-building-system/src/views/system/receptiondesk/wordcloud.vue

<template>
    <div class="card_visitor_star">
        <div ref="chartcloud" style="width: 100%;height: 100%;"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
const props = defineProps({
    resultData: {
        type: Array,
        default: []
    }
})
const chartcloud = ref(null);
let chartDom = null;
const initAccess = () => {
    let result = props.resultData
    chartDom = echarts.init(chartcloud.value);
    let style = {
        width: 32,
        height: 24,
        padding: [5, 6, 0, 0],
        fontSize: 20,
        align: "center",
        color: "#ffffff"
    }
    let option = {
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(9,40,84,0.8)",
            borderColor: "rgba(9,40,84,0.8)",
            textStyle: {
                fontSize: 20,
                color: "#fff",
            },
            axisPointer: {
                type: "shadow",
            },
            formatter: function (params) {
                return (
                    params[0].name +
                    "&nbsp;&nbsp;&nbsp;&nbsp;<span style='font-weight:bold;color:'#fff'>" +
                    params[0].value +
                    "</span>"
                );
            },
        },
        grid: {
            left: "5%",
            right: "5%",
            top: "10%",
            bottom: "20%", // 特殊
            containLabel: true,
        },
        xAxis: [
            {
                type: "value",
                show: false,
            },
        ],
        yAxis: [
            {
                type: "category",
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                inverse: true,
                data: result.map((item) => item.department_name),
                axisLabel: {
                    color: "rgba(239, 242, 250, 1)",
                    margin: 10,
                    rich: {
                        ids: {
                            padding: [0, 0, 0, 2],
                            fontSize: 16,
                            color: '#b4bec8',
                        },
                        nameStyle: {
                            padding: [0, 10, 0, 2],
                            fontSize: 16,
                            color: '#fff',
                        },
                        rank: {
                            ...style,
                            backgroundColor: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                                {
                                    offset: 0,
                                    color: '#E7F4FF',
                                },
                                {
                                    offset: 0.95,
                                    color: '#fff',
                                },
                            ]),
                        },
                        rank1: {
                            ...style,
                            color: "#FF992B",
                            backgroundColor: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                                {
                                    offset: 0,
                                    color: '#E7F4FF',
                                },
                                {
                                    offset: 0.95,
                                    color: '#fff',
                                },
                            ]),
                        },
                    },
                },
            },
            {
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    color: "rgba(239, 242, 250, 1)",
                    fontSize: 15,
                    margin: 10,
                    formatter: function (value) {
                        return value;
                    },
                },
                data: result.map((item) => item.count),
            },
        ],
        series: [
            {
                type: "bar",
                barWidth: 10, // 柱子宽度
                MaxSize: 0,
                showBackground: true,
                backgroundStyle: {
                    color: "rgb(10, 51, 126)",
                    borderRadius: 5, //设置背景的圆角
                },
                data: result.map((item) => item.count).map((item) => {
                    return {
                        value: item,
                        itemStyle: {
                            borderRadius: 5,
                            color: "#069DFD",
                        },
                    };
                }),
            },
            {
                type: 'scatter',
                emphasis: {
                    scale: false
                },
                symbol: 'rect',
                itemStyle: {
                    barBorderRadius: [30, 0, 0, 30],
                    color: '#fff',
                    shadowColor: '#fff',
                    shadowBlur: 1,
                    borderWidth: 1,
                    opacity: 1
                },
                symbolSize: [4, 10], // 进度条白点的大小
                z: 2,
                data: result.map((item) => item.count),
            },
        ],
    };
    chartDom.setOption(option)
};

// 生命周期
onMounted(() => {
    initAccess()
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartDom?.resize();
});
</script>

<style scoped lang="scss">
.card_visitor_star {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
</style>