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({
    xDataArray: {
        // 柱形图x轴数据
        type: Array,
        default: function () {
            return ['1', '2', '3', '4', '5']
        }
    },
    yDataArray: {
        //图标信息提示
        type: Array,
        default: function () {
            return [
                {
                    name: '图例二',
                    type: 'bar',
                    label: {
                        // 柱状图上的文字设置
                        show: true, // 是否显示
                        //   rotate: 60, // 文字旋转角度
                        position: 'top' // 显示位置
                    },
                    // barWidth: '50%', // 柱的宽度
                    barGap: '5%', // 多个并排柱子设置柱子之间的间距
                    data: [2, 2, 7, 5, 7, 4]
                },
                {
                    name: '图例三',
                    type: 'bar',
                    label: {
                        show: true, // 是否显示
                        position: 'top' // 显示位置
                    },
                    barGap: '5%', // 多个并排柱子设置柱子之间的间距
                    data: [4, 2, 5, 8, 4, 2]
                }
            ]
        }
    }
})
let myEchart: EChartsType
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
const myEchartData = () => {
    const option = {
        // title: {
        //   text: '接口请求耗时分布', // 标题文字
        //   textStyle: {
        //     color: '#C0C4CC', // 标题样式设置
        //     fontWeight: 'bold' // 标题文字大小
        //   }
        // },
        legend: {
            //图标信息提示
            type: 'scroll',
            orient: 'horizontal',
            //   right: '50%',
            left: '40%',
            top: 0,
            //   bottom: 20,
            align: 'auto',
            icon: 'circle'
        },
        grid: {
            //图表距离边框的偏离
            right: '8%', //图表距离容器右侧距离
            left: '8%',
            top: '20%',
            bottom: '20%'
        },
        tooltip: { trigger: 'axis' }, // 设置图案和容器的距离
        xAxis: {
            type: 'category',
            //   name: '时间',
            nameLocation: 'end',
            data: props.xDataArray
            //   axisLabel: {
            //     interval: 20 //制显示间隔
            //     // rotate: 60 // 设置倾斜角度
            //   }
            //   // 坐标轴轴线
            //   axisLine: {
            //     show: false
            //   },
            //   // 坐标轴刻度
            //   axisTick: {
            //     show: false
            //   },
            //   // 刻度标签
            //   axisLabel: {
            //     show: false
            //   }
        },
        yAxis: {
            type: 'value',
            //   name: '值',
            nameLocation: 'end',
            //   // 坐标轴轴线
            //   axisLine: {
            //     show: false
            //   },
            //   // 坐标轴刻度
            //   axisTick: {
            //     show: false
            //   },
            //   // 刻度标签
            //   axisLabel: {
            //     show: false
            //   },
            min: 0
            //   splitLine: {
            //     show: false // 不显示网格线
            //   }
            // axisLabel: { formatter: '{value} ' },
        },
        series: props.yDataArray,
        dataZoom: [
            // 数据选择范围 最下面的范围拉条
            {
                type: 'slider', // 开启滑动条
                show: true, // 显示缩放条
                start: 0,
                end: 100,
                backgroundColor: '#26CAF026',
                selectedDataBackground: {
                    lineStyle: {
                        type: 'dotted'
                    },
                    areaStyle: {
                        color: '#26CAF0'
                    }
                },
                // handleSize: '150%',
                bottom: '3%',
                height: 10,
                brushSelect: false,
                handleIcon:
                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAABQtJREFUWEfNmVtMI2UUx883M/SybXfbQNht4wM3dxMgqNEIMc26+oIYfFB4EROzhocmWizECyGRtKsRa8wuEULCPiyiEZNNQIObUN92TSSLGBL7QBYtaDUbKNIGKtPpbS7mm+10p9OyHVZo2mQyk5nv8vv+Z86Z850iKP5DsibitcfjIQYHB5+hKOo5kiSfBICzAGBFCJ3EzwVB+BcAtnieD3Act8IwzK2enp7bPp+Px49l40nX8nviEFIb+eRy1EL3UTgctlosFhdBEK8DwOnia8tpsZ1Op78OBAJjTU1NWwrIQqDivYIgiomR3+/XNzc3v0sQxPsAcOKQYMrmTCKRuDw5OXllYGCAyTzEMNIhtS8IqARGDMO06fX6rwCg/n+C5XQXBOGPUCj0hs1m+7kAZFbRvPdL/r6l0+kPKIq6dJRgeXIyzIcGg+ETmYI5ahYEDAQCpvr6+msIoe7jhJPGZln226mpKYfD4diXOYgIWggQ8Tx/vVRwEmQqlfpOq9W+plRSAsyeS2HWg6xC0/RHJpPJm4EUQxIGy8JlHGKxFGY9aI6NjY3nGxoasONgE/NZQL/ff6KlpcV/1N562MXyPP9nf39/6/j4eEyuIOI4bpggCI+aARO8AAkewEzlh9FggoMaHZk3DM3hPgJUVRBFp6Bp+uOMqe8pGA6HbZWVlb+rCcKsIMAjS3sQYQW489QpaNDfh/H+HYehYBwcVi1MPmrIgmC4M7d3ISkAbLWZ1UAyc3Nzj3d3d29iQILjOC9BEO8VXRoAYIVql6Ni0y/OGuDiGW2228XfaPhyOwXPnqLg1mPiZ1n8yfvcbDHBBXNF0alomv7cZDINI4/HQ7nd7rtqv62lAhQE4Z+6urpzKB6Pn9fpdD8WXVIBNY5TQTzd2traCyidTrspilLlHEpzHTdgNBodwV+N7xFCL5Wjgslk0ocB1xBC58oRkGXZAAaMSpmwGshSOQlmwZk5EgRBmW4/kLOUgBik/AHL3sRl7yQsy94gSbJTjYOUOg4mEokfUDKZ9Gg0Gnc5AkYiES/a3d29YDabb5Yj4MrKSifq6OjQLiws/FWOyYLNZmvG6RaVSqW8FRUV76hRsVRxcG9vb9xisVwSAVdXV22NjY13DpOwhlkB1g6ZsLIAcLdVXcI6MTHxtNPpDImAOGDH4/FhnU43rEbFeym/AGYqP31/UMqPxzaSB5WD7s8ciUQ+raqq+kzak4iAo6OjBpfLtYIQqlMDeVxtOI4LdnV1nZ+fn8d1G3FPgjcVWAq0ubnZZrVaVSevxwG5uLj4ot1uX5ZvOzGguDfJmHpIp9OpjotHCbmzs+Otrq6+LNu4iwqKYLIzzrK/oSjqlaOcvNhYsVjshtFo7MVmVVYWJMAs5NjY2EmHw3FVo9G8XGzgo3iO4ZxO59vT09NS8UisKkhOIrlinpr7+/tDRqNRlWc/LGjGrFdkyknlt5zajFQCkZ8xOLG+vt5aW1t7jSCI2oeFKNQPe+vS0tKbdrv9lwK1wayZlWBiEqt8L/v6+gwjIyMuo9E4oCaYF1kIE4lExnt7eycyoUTM7mWHBJdbPMqASVE0773E0LOzs9b29va3DAbDqwih6sMoijfi0Wj0+szMzFX8hcj0lYMpr/PLb5lOB5lbuk/U1NSQPp+v1Wq14k3/EyRJNpAkeVr+NwTHcdssy27EYrFfg8HgT52dncuhUAhPqlRMXuHPOofkyf8BM+lL3UtbDgUAAAAASUVORK5CYII='
            }
        ]
    }
    // { notMerge: true } 解决删除数据时,数据不刷新的问题
    myEchart.setOption(option, { notMerge: true })
}

watch(
    //监控数据变化
    () => props.xDataArray,
    () => {
        setTimeout(() => {
            myEchartData()
        }, 500)
    },
    { deep: true }
)
watch(
    //监控数据变化
    () => props.yDataArray,
    () => {
        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>