<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({
    message: {
        type: Array,
        default: true
    }
})

let myEchart: EChartsType
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
const myEchartData = () => {
    const option = {
        tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            // params 是一个数组，数组中包含每个系列的数据信息
            console.log(params)
            let result = `${params[0].axisValue}<br/>`;
            let tolValue = 0
            params.forEach(function (item) {
                tolValue += item.value;
                // item 是每一个系列的数据
                const seriesName = item.seriesName; // 系列名称
                const value = item.value; // 数据值
                const marker = item.marker; // 标志图形
                result += `${marker}${seriesName}: ${value}  ${'（CO2e）'}<br/>`;
            });
            return result + '合计：' + tolValue + '（CO2e）';
        }
    },
        legend: {
            textStyle: {
                color: 'white' // 设置字体颜色为红色
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月','十一月','十二月']
        },
        series: [
            {
                name: '水利',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 301, 334, 390, 330, 320,301, 334, 390, 330, 320]
            },
            {
                name: '煤气',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210,301, 334, 390, 330, 320]
            },
            {
                name: '天然气',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310,301, 334, 390, 330, 320]
            },
            {
                name: '电力',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [150, 212, 201, 154, 190, 330, 410,301, 334, 390, 330, 320]
            },
            {
                name: '民用',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [820, 832, 901, 934, 1290, 1330, 1320,301, 334, 390, 330, 320]
            }
        ]
    };
    // { notMerge: true } 解决删除数据时,数据不刷新的问题
    myEchart.setOption(option, { notMerge: true })
}
watch(
    //监控数据变化
    () => props.message,
    () => {
        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>