<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 xAxisData: string[] = [];
let data1: number[] = [];
let data2: number[] = [];
let data3: number[] = [];
let data4: number[] = [];

for (let i = 0; i < 10; i++) {
  xAxisData.push('201' + i);
  data1.push(+(Math.random() * 2).toFixed(2));
  data2.push(+(Math.random() * 5).toFixed(2));
  data3.push(+(Math.random() + 0.3).toFixed(2));
  data4.push(+Math.random().toFixed(2));
}

var emphasisStyle = {
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  }
};
let myEchart: EChartsType
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
const myEchartData = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['工业', '建筑', '交通', '教育'],
      textStyle: {
        color: 'white' // 设置字体颜色为红色
      }
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '工业',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        tooltip: {
                    valueFormatter: function (value) {
                        return value + ' Kwh';
                    }
                },
        data:  [20, 10, 40, 20, 10, 50, 20, 30, 40, 10, 20, 40]
      },
      {
        name: '建筑',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        tooltip: {
                    valueFormatter: function (value) {
                        return value + ' Kwh';
                    }
                },
        data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
      },
      {
        name: '交通',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        tooltip: {
                    valueFormatter: function (value) {
                        return value + ' Kwh';
                    }
                },
        data: [150, 232, 201, 154, 190, 330, 410, 191, 234, 290, 330, 310]
      },
      {
        name: '教育',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        tooltip: {
                    valueFormatter: function (value) {
                        return value + ' Kwh';
                    }
                },
        data: [320, 332, 301, 334, 390, 330, 320, 191, 234, 290, 330, 310]
      }
    ]
  };
  // { 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>