<template>
  <!-- 双Y轴折线图 -->
  <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();
    });
  }
);

//自适应
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 框限制在图表的区域内
    },
    title: {
      left: 'left',
      text: '',
      top: 10,
      bottom: 10,
      left: 10,
      textStyle: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: {
      left: '3%',
      right: '7%',
      top: '25%',
      bottom: '3%',
      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.yAxisName1,
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
        axisLabel: {
          color: '#c6c6c6',
        },
      },
      {
        name: props.echartData.yAxisName2,
        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: [
      {
        name: props.echartData.seriesName1,
        type: 'line',
        smooth: true,
        yAxisIndex: 0,
        symbolSize: 8,
        data: props.echartData.seriesData1,
        itemStyle: {
          color: 'rgb(255, 70, 131)',
        },
        areaStyle: {
          color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255, 158, 68,0.1)',
            },
            {
              offset: 1,
              color: 'rgba(255, 70, 131,0.2)',
            },
          ]),
        },
      },
      {
        name: props.echartData.seriesName2,
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        symbolSize: 8,
        data: props.echartData.seriesData2,
        itemStyle: {
          color: 'rgb(4, 192, 144)',
        },
        areaStyle: {
          color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(4, 192, 144,0.1)',
            },
            {
              offset: 1,
              color: 'rgba(4, 205, 144,0.2)',
            },
          ]),
        },
      },
    ],
  });
}
onMounted(() => {
  setTimeout(() => {
    intChart();
  });
  window.addEventListener('resize', resizeTheChart);
});
</script>