chongqing-app/src/pages/components/SupervisionDistribution.vue

<template>
    <div class="supervision-distribution">
        <div class="chart-container" ref="chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'SupervisionDistribution',
    props: {
        chartsData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    watch: {
        chartsData: {
            deep: true,
            handler() {
                this.$nextTick(() => {
                    if (this.chart) this.chart.dispose()
                    this.initChart()
                })
            }
        }
    },
    methods: {
        initChart() {
            if (!this.$refs.chart) return
            this.chart = echarts.init(this.$refs.chart)
            const option = {
                responsive: true,
                maintainAspectRatio: false,
                grid: {
                    left: '15%',
                    right: '5%',
                    bottom: '20%',
                    top: '10%'
                },
                xAxis: {
                    type: 'category',
                    data: this.chartsData.map(item => item.name),
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255, 255, 255, 0.5)',
                        fontSize: 9,
                        rotate: 30
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '人数',
                    nameTextStyle: {
                        color: 'rgba(255, 255, 255, 0.5)',
                        fontSize: 9
                    },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.05)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255, 255, 255, 0.5)',
                        fontSize: 9
                    }
                },
                series: [
                    {
                        name: '查获数量',
                        type: 'bar',
                        data: this.chartsData.map(item => item.num),
                        itemStyle: {
                            borderRadius: [5, 5, 0, 0],
                            color: '#F462CC'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: '#F462CC',
                            fontSize: 9,
                            fontWeight: 500
                        },
                        barWidth: '40%'
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(13,80,122,0.95)',
                    borderColor: '#70CFE7',
                    textStyle: { color: '#fff' }
                }
            }
            this.chart.setOption(option)
        }
    },
    beforeDestroy() {
        if (this.chart) this.chart.dispose()
    }
}
</script>

<style lang="scss" scoped>
.supervision-distribution {
    .chart-container {
        width: 100%;
        height: 450rpx;
    }
}
</style>