<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,
        },
      ],
      color: ['#000'],
      legend: {
        data: [props.title],
        itemHeight: 10, // 圆点大小
        itemWidth: 0, // 线的长度
        x: 'right', // 居右显示
        y: -2,
        textStyle: { // 图例文字的样式
          color: '#000',
          fontSize: 12,
        },
      },
      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: [

        {
          name: props.title,
          type: 'line',
          smooth: true,
          data: props.xAxisData,
          symbol: 'circle', // 拐点样式
          symbolSize: 2, // 拐点大小
          // 折线条的样式
          lineStyle: {
            color: '#58abf0',
          },
          // 折线拐点的样式
          itemStyle: {
            normal: {
              // 静止时：
              color: 'rgb(40 184 228)',
              borderColor: 'rgb(40 184 228)', // 拐点的边框颜色
              borderWidth: 4,
            },
            emphasis: {
              // 鼠标经过时：
              color: 'rgb(40 184 228)',
            },
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#60b4f1',
              },
              {
                offset: 1,
                color: '#fff',
              },
            ]),
          },
        },
      ],
    }
    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>