<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue'
import * as echarts from 'echarts'
const props = withDefaults(defineProps<Props>(), {
  id: '',
  xAxisData: () => [],
  yAxisData: () => [],
  title: '',
})
// const props = withDefaults(defineProps<Props>(), {})
const person: any = reactive({
  markList: [],
})
interface Props {
  id: string
  xAxisData: string[]
  yAxisData: number[]
  title: string
}
const GetEchar = () => {
  const myChart = ref<HTMLElement>()
  const myCharts = ref<any>()
  nextTick(() => {
    const chartDom = document.getElementById(props.id)!
    myCharts.value = echarts.init(chartDom)
    const option = {
      visualMap: [
        {
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 400,
        },
      ],
      title: [
        {
          top: '2%',
          left: 'right',
          text: props.title,
          textStyle: {
            color: '#000',
            fontSize: 15,
          },
        },
      ],
      tooltip: {
        trigger: 'axis',
        textStyle: {
          fontSize: '13',
        },
        axisPointer: {
          type: 'cross',
          label: {
            fontSize: '13',
          },
        },
      },
      xAxis: [
        {
          boundaryGap: false,
          axisLabel: {
            fontSize: 12,
            color: '#000',
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
          },
          data: props.yAxisData,
        },
      ],
      yAxis: [
        {
          type: 'value',
          boundaryGap: true,
          axisLabel: {
            fontSize: 12,
            color: '#000',
          },
          axisLine: {
            show: true,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      grid: {
        left: 10,
        right: 30,
        bottom: 60,
        top: 20,
        containLabel: true,
      },
      series: [
        {
          type: 'line',
          smooth: true,
          data: props.xAxisData,
          symbol: 'circle', // 拐点样式
          symbolSize: 2, // 拐点大小
          // 折线条的样式
          lineStyle: {
            color: 'rgba(0,0,0,0)',
          },
          // 折线拐点的样式
          itemStyle: {
            normal: {
              // 静止时：
              color: '#fff',
              borderColor: '#fff', // 拐点的边框颜色
              borderWidth: 4,
            },
            emphasis: {
              // 鼠标经过时：
              color: '#fff',
            },
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#00EAD1', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#0055CB', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    }
    myCharts.value.setOption(option)
    // 让图表跟随屏幕自动的去适应
    window.addEventListener('resize', () => {
      myCharts.value.resize()
    })
  })
}
watch(
  [() => props.xAxisData, props.yAxisData], ([newName, newNums], [oldName, oldNums]) => {
    GetEchar()
  }, { immediate: true, deep: true })
GetEchar()
</script>

<template>
  <div :id="props.id" class="bars_w" />
</template>

<style lang="scss" scoped>
.bars_w {
  width: 100%;
  height: 100%;
}
</style>