<template>
  <div class="chartBox" :id="id"></div>
</template>
<script setup name="twoLine">
import { guid } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance();
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Object,
    default: {
      series: [],
    },
  },
  title: {
    type: String,
    default: '',
  },
});
console.log('-------------------', props);

const id = guid();
const myChart = shallowRef('');
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.clear();
  // 绘制图表
  if (!props.echartData.series.length) return;
  let seriesOption = [];
  let colorOption = [
    ['rgba(49, 119, 255, 1)', 'rgba(49, 119, 255, 0.1)'],
    ['RGBA(251, 210, 47, 1)', 'rgba(19,229,154, 0.1)'],
    ['rgba(19,229,154, 1)', 'RGBA(251, 210, 47, 0.1)'],
  ];
  props.echartData.series.forEach((item, index) => {
    let obj = {};
    obj.name = item.name;
    obj.type = 'line';
    obj.data = item.tabY;
    obj.showAllSymbol = true; //显示所有图形。
    obj.smooth = true;
    // obj.smooth = false;
    obj.symbol = 'circle'; //标记的图形为实心圆
    obj.symbolSize = 6; //标记的大小
    obj.lineStyle = {
      color: colorOption[index][0],
    };
    obj.tooltip = {
      valueFormatter: function (value) {
        return value + (props.echartData.unit || '');
      },
    };
    obj.areaStyle = {
      color: new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: colorOption[index][0],
        },
        {
          offset: 1,
          color: colorOption[index][1],
        },
      ]),
    };
    obj.itemStyle = {
      //折线拐点标志的样式
      color: colorOption[index][0],
    };
    seriesOption.push(obj);
  });
  myChart.value.setOption({
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#004284',
      borderColor: '#0B9BFF',
      textStyle: {
        // 字体颜色
        color: '#FFFFFF',
        // 字体大小
        fontSize: 14,
      },
      axisPointer: {
        type: 'shadow',
        label: {
          show: true,
        },
      },
    },
    grid: {
      top: '22%',
      bottom: '15%', //也可设置left和right设置距离来控制图表的大小
      left: '10%',
      right: '5%',
    },
    legend: {
      show: true,
      // itemWidth: 20,
      // itemHeight: 8,
      itemGap: 30,
      top: 6,
      icon: 'rect', // 设置图例图标为矩形
      itemWidth: 10, // 图例图标宽度
      itemHeight: 10, // 图例图标高度
      selectedMode: false,
      data: ['网页', '质讯', '微信'],
      textStyle: {
        color: '#ebfeff',
        fontSize: 14,
      },
    },
    xAxis: {
      data: props.echartData.tabX,
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: '#357da7',
        },
      },
      axisTick: {
        show: false, //隐藏X轴刻度
        lineStyle: {
          // color: 'rgba(171, 171, 171, 1)',
        },
      },
      axisLabel: {
        show: true,
        color: '#EBFEFF',
        fontSize: 12,
      },
    },
    yAxis: {
      type: 'value',
      name: props.echartData.unit || '',
      nameLocation: 'end', // 将名称靠顶部
      // nameRotate: 0, // 名称水平显示
      nameTextStyle: {
        color: '#ebfeff',
        fontSize: 12,
        padding: [0, 20, -2, 0],
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: '#AAC1CF',
        fontSize: 12,
      },
      splitLine: {
        //网格线
        lineStyle: {
          type: 'solid',
          color: '#357da7', //设置网格线类型 dotted：虚线   solid:实线
        },
        show: true, //隐藏或显示
      },
    },
    dataZoom: [
      {
        //默认控制x轴
        type: 'slider', //图标下方的伸缩条
        // show: true, //是否显示
        // realtime: true,
        start: 80, //伸缩条开始位置
        end: 40, //伸缩条结束位置
      },
    ],
    series: seriesOption,
  });
}
onMounted(() => {
  intChart();
  window.addEventListener('resize', resizeTheChart);
});
onBeforeUnmount(() => {
  myChart.value && myChart.value.dispose();
});
</script>

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