<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from '@/utils/ruoyi';
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();
    intChart();
  }
);

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById(id));
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      trigger: 'axis',
      confine: true, //是否将 tooltip 框限制在图表的区域内
    },
    title: {
      left: 'left',
      text: '',
      top: 10,
      bottom: 10,
      left: 10,
      textStyle: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: [
      {
        left: 60,
        right: 50,
        height: '35%',
      },
      {
        left: 60,
        right: 50,
        top: '55%',
        height: '35%',
      },
    ],
    toolbox: {
      feature: {
        // dataZoom: {
        //   yAxisIndex: "none",
        // },
        // restore: {},
        // saveAsImage: {},
      },
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: 'all',
        },
      ],
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLine: { onZero: true },
        data: props.echartData.xAxisData,
        show: false,
      },
      {
        gridIndex: 1,
        type: 'category',
        boundaryGap: false,
        axisLine: { onZero: true },
        data: props.echartData.xAxisData,
        position: 'bottom',
      },
    ],
    yAxis: [
      {
        name: props.echartData.yAxisName1,
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#545E75', //字体颜色
          fontSize: 16, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
          fontWeight: 'bold',
        },
      },
      {
        gridIndex: 1,
        name: props.echartData.yAxisName2,
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#545E75', //字体颜色
          fontSize: 16, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
          fontWeight: 'bold',
        },
      },
    ],
    dataZoom: [
      {
        show: true,
        realtime: true,
        start: 30,
        end: 70,
        xAxisIndex: [0, 1],
      },
      {
        type: 'inside',
        realtime: true,
        start: 30,
        end: 70,
        xAxisIndex: [0, 1],
      },
    ],
    series: [
      {
        name: '修复前:' + props.echartData.seriesName,
        type: 'line',
        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: 'rgb(255, 158, 68)',
            },
            {
              offset: 1,
              color: 'rgb(255, 70, 131)',
            },
          ]),
        },
      },
      {
        name: '修复后:' + props.echartData.seriesName,
        type: 'line',
        xAxisIndex: 1,
        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: 'rgb(4, 192, 144)',
            },
            {
              offset: 1,
              color: 'rgb(4, 205, 144)',
            },
          ]),
        },
      },
    ],
  });
}
onMounted(() => {
  intChart();
  window.addEventListener('resize', resizeTheChart);
});
</script>