<template>
  <!-- 单条折线图 -->
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from '@/utils/ruoyi';
import useUserStore from '@/store/modules/user';
const pinias = useUserStore();
const { proxy } = getCurrentInstance();
const id = guid();
const myChart = shallowRef('');

const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //标题
  title: {
    type: String,
    default: '',
  },
  //数据
  echartData: {
    type: Object,
    default: {},
  },
});
watch(
  () => props.refresh,
  value => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    setTimeout(() => {
      intChart();
    });
  },
  { immediate: true }
);

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById(id));
  myChart.value.clear();
  // 绘制图表
  myChart.value.setOption({
    color: pinias.$state.chartColor,
    tooltip: {
      trigger: 'axis',
      confine: true, //是否将 tooltip 框限制在图表的区域内
    },
    dataZoom: [
      { type: 'slider', start: 10, end: 60 }, // start 左边在 10% 的位置  end 右边在 60% 的位置
      { type: 'inside', start: 10, end: 60 }, //鼠标控制滚轮缩放
    ],
    // 显示暂无数据
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: props.echartData.xAxisData.length > 0 ? true : false, // 有数据就隐藏
      style: {
        fill: '#c6c6c6',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
      },
    },
    title: {
      left: 'left',
      text: '',
      top: 10,
      bottom: 10,
      left: 10,
      textStyle: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: {
      left: '5%',
      right: '7%',
      top: '10%',
      bottom: '14%',
      containLabel: true,
    },
    legend: {
      top: '2%',
      orient: 'horizontal', //horizontal
      left: 'center', //left ,center
      textStyle: {
        color: 'inherit',
      },
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: props.echartData.xAxisData,
        axisLabel: {
          color: '#c6c6c6',
        },
        axisLine: {
          lineStyle: {
            color: '#066592',
          },
        },
      },
    ],
    yAxis: [
      {
        name: props.echartData.yAxisName,
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        axisLabel: {
          color: '#c6c6c6',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
      },
    ],
    series: props.echartData.seriesData,
  });
}
onMounted(() => {
  window.addEventListener('resize', resizeTheChart);
});
</script>