Huaihua-High-tech-Zone/src/components/baseEcharts/index.vue

<template>
    <div class="container-echart">
        <div :id="'echart' + timeId" class="interface-echart"></div>
    </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { EChartsType } from 'echarts'
import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'

const props = defineProps({
    NamechartData: {
        // 柱形图x轴数据
        type: Array,
        default: true
    },
    ArrOneData: {
        // 柱形图x轴数据
        type: Array,
        default: true
    },
    ArrTwoData: {
        // 柱形图x轴数据
        type: Array,
        default: true
    }
})
console.log(props);

let myEchart: EChartsType
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
const myEchartData = () => {
    const option = {
        legend: {
            //图标信息提示
            type: 'scroll',
            left: '40%',
            top: 0,
            align: 'auto',
            icon: 'circle', 
            textStyle: {
                color: "white"
            }
        },
        grid: {
            //图表距离边框的偏离
            right: '8%', //图表距离容器右侧距离
            left: '12%',
            top: '20%',
            bottom: '20%'
        },
        tooltip: { trigger: 'axis' }, // 设置图案和容器的距离
        xAxis: {
            type: 'category',
            nameLocation: 'end',
            data: props.NamechartData
        },
        yAxis: {
            type: 'value',
            nameLocation: 'end',
            // 坐标轴轴线
            axisLine: {
                show: false
            },
            // 坐标轴刻度
            axisTick: {
                show: false
            },
            min: 0,
            splitLine: {
                show: false // 不显示网格线
            }
            // axisLabel: { formatter: '{value} ' },
        },
        series: [
            {
                name: (new Date().getFullYear()-1).toString(),
                type: 'bar',
                data: props.ArrOneData
            },
            {
                name: (new Date().getFullYear()).toString(),
                type: 'bar',
                data: props.ArrTwoData
            }
        ],
        dataZoom: [
            // 数据选择范围 最下面的范围拉条
            {
                type: 'slider', // 开启滑动条
                show: true, // 显示缩放条
                start: 0,
                end: 100,
                backgroundColor: '#26CAF026',
                selectedDataBackground: {
                    lineStyle: {
                        type: 'dotted'
                    },
                    areaStyle: {
                        color: '#26CAF0'
                    }
                },
                bottom: '3%',
                height: 14,
                brushSelect: false,
            }
        ]
    }
    // { notMerge: true } 解决删除数据时,数据不刷新的问题
    myEchart.setOption(option, { notMerge: true })
}

watch(
    //监控数据变化
    () => props.NamechartData,
    () => {
        setTimeout(() => {
            myEchartData()
        }, 500)
    },
    { deep: true }
)

watch(
    //监控数据变化
    () => props.ArrOneData,
    () => {
        setTimeout(() => {
            myEchartData()
        }, 500)
    },
    { deep: true }
)

watch(
    //监控数据变化
    () => props.ArrTwoData,
    () => {
        setTimeout(() => {
            myEchartData()
        }, 500)
    },
    { deep: true }
)

onMounted(() => {
    setTimeout(() => {
        const dom = document.getElementById(`echart${timeId.value}`) as any
        myEchart = echarts.init(dom)
        myEchartData()
    }, 500)

    // 当窗口发生变化时
    window.addEventListener('resize', () => {
        myEchart.resize()
    })
})
onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myEchart.resize()
    })
})
</script>
<style scoped lang="scss">
.container-echart {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.interface-echart {
    width: 100%;
    height: 100%;
}
</style>