baozhida-building-system/src/views/system/passengerFlow/district.vue

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

<script setup>
import * as echarts from 'echarts'
defineProps({
    title: {
        type: String,
        default: '暂无数据'
    }
})
const chartDistrict = ref(null);
let chartDom = null;
const initAccess = () => {
    let colorList = [
        "rgba(255, 38, 38, 1)",
        "rgba(255, 96, 0, 1)",
        "rgba(255, 165, 7, 1)",
        "rgba(0, 234, 255, 1)",
        "rgba(0, 132, 255, 1)",
        "#2379FF",
    ];
    let colorListA = [
        "rgba(255, 38, 38, 0.1)",
        "rgba(255, 96, 0, 0.1)",
        "rgba(255, 165, 7, 0.1)",
        "rgba(0, 234, 255, 0.1)",
        "rgba(0, 132, 255, 0.1)",
        "#49B1FF",
    ];
    let colorListB = [
        "rgba(249, 136, 136, 1)",
        "rgba(255, 162, 106, 1)",
        "rgba(255, 210, 130, 1)",
        "rgba(142, 255, 206, 1)",
        "rgba(165, 232, 255, 1)",
    ];
    let colorListC = [
        "rgba(249, 136, 136, 0.1)",
        "rgba(255, 162, 106, 0.1)",
        "rgba(255, 210, 130, 0.1)",
        "rgba(142, 255, 206, 0.1)",
        "rgba(165, 232, 255, 0.1)",
    ];
    let result = [
        { name: "天水祥丰农资农贸有限公司", value: 86 },
        { name: "天水花牛苹果", value: 83 },
        { name: "天水红富士", value: 73 },
        { name: "天水金帅苹果", value: 61 },
        { name: "天水黄面皮", value: 61 },
    ];
    chartDom = echarts.init(chartDistrict.value);
    let option = {
        color: colorList,
        tooltip: {
            show: true,
            trigger: "item",
            axisPointer: {
                type: "shadow",
                textStyle: {
                    color: "#fff",
                },
            },
            textStyle: {
                color: "#fff",
            },
            backgroundColor: "rgba(16, 123, 184, .52)", //设置背景颜色
            borderColor: "rgba(255, 255, 255, 0)",
            confine: true,
            formatter: "{b}<br />客流指数: {c}",
        },
        legend: {
            show: false,
        },
        grid: {
            left: "2%",
            right: "2%",
            top: "6%",
            bottom: "0%",
        },
        xAxis: [
            {
                splitLine: {
                    show: false,
                },
                type: "value",
                show: false,
            },
        ],
        yAxis: [
            {
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                type: "category",
                axisTick: {
                    show: false,
                },
                inverse: true,
                data: result.map((item) => item.name),
                axisLabel: {
                    fontSize: 14,
                    inside: true,
                    formatter: (name, index) => {
                        const id = index + 1;
                        return `{count${id}|${id}}`;
                    },
                    rich: {
                        count1: {
                            padding: [0, 0, 33, 0],
                            align: "center",
                            color: colorList[0],
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                        count2: {
                            padding: [0, 0, 33, 0],
                            align: "center",
                            color: colorList[1],
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                        count3: {
                            padding: [0, 0, 33, 0],
                            align: "center",
                            color: colorList[2],
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                        count4: {
                            padding: [0, 0, 33, 0],
                            align: "center",
                            color: colorList[3],
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                        count5: {
                            padding: [0, 0, 33, 0],
                            align: "center",
                            color: colorList[4],
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                    },
                },
            },
            {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    verticalAlign: "bottom",
                    padding: [0, 5, 10, 0],
                    inside: true,
                    formatter: function (value) {
                        return `{name|客流指数：}{value|${value}}`;
                    },
                    rich: {
                        name: {
                            align: "center",
                            color: "#D3E5FF",
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                        value: {
                            align: "center",
                            color: "#fff",
                            fontSize: 14,
                            fontFamily: "Source Han Sans CN",
                        },
                    },
                },
                data: result.map((item) => item.value),
            },
        ],
        series: [
            {
                name: "",
                type: "bar",
                barWidth: 5, // 柱子宽度
                MaxSize: 0,
                showBackground: true,
                barBorderRadius: [30, 0, 0, 30],
                backgroundStyle: {
                    color: "rgba(50, 60, 86, 1)",
                },
                label: {
                    show: true,
                    offset: [40, -17],
                    color: "#D3E5FF",
                    fontWeight: 500,
                    position: "left",
                    align: "left",
                    fontSize: 14,
                    fontFamily: "Source Han Sans CN",
                    formatter: function (params) {
                        console.log(params);
                        return params.data.name;
                    },
                },
                data: result.map((item, index) => {
                    return {
                        name: item.name,
                        value: item.value,
                        itemStyle: {
                            barBorderRadius: [3, 0, 0, 3],
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: colorListA[index],
                                    },
                                    {
                                        offset: 1,
                                        color: colorList[index],
                                    },
                                ],
                            },
                        },
                    };
                }),
            },
            {
                name: "外圆",
                type: "scatter",
                emphasis: {
                    scale: false,
                },
                showSymbol: true,
                symbol: "circle",
                symbolSize: 8, // 进度条白点
                z: 2,
                data: result.map((item, index) => {
                    return {
                        name: item.name,
                        value: item.value,
                        itemStyle: {
                            color: colorListB[index],
                            borderColor: colorListC[index],
                            borderWidth: 12,
                            shadowColor: colorListC[index],
                            shadowBlur: 10,
                            opacity: 1,
                        },
                    };
                }),
                animationDelay: 500,
            },
            {
                name: "外圆",
                type: "scatter",
                emphasis: {
                    scale: false,
                },
                showSymbol: true,
                symbol: "circle",
                symbolSize: 3, // 进度条白点
                z: 3,
                data: result.map((item, index) => {
                    return {
                        name: item.name,
                        value: item.value,
                        itemStyle: {
                            color: colorListB[index],
                            borderColor: colorListC[index],
                            borderWidth: 30,
                            shadowColor: colorListC[index],
                            shadowBlur: 10,
                            opacity: 1,
                        },
                    };
                }),
                animationDelay: 500,
            },
        ],
    };
    chartDom.setOption(option)
};
// 生命周期
onMounted(() => {
    initAccess()
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartDom?.resize();
});
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
</style>