<template>
  <!-- 天气温度平滑折线图 -->
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from '@/utils/ruoyi';
import { nextTick } from 'vue';
const id = guid();
const myChart = shallowRef('');
import * as echarts from 'echarts';

const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //x轴数据
  XAxis: {
    type: Array,
    default: () => [],
  },
  //y轴数据
  YAxis: {
    type: Array,
    default: () => [],
  },
  typeName: {
    type: [String, Number],
    default: '',
  },
  zoomData: {
    type: Array,
    default: () => [0, 100],
  },
});

watch(
  () => props.refresh,
  value => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    init();
  },
  {
    deep: true,
  }
);

function init() {
  myChart.value = echarts.init(document.getElementById(id));

  let newarr = [];
  let max = Math.max(...props.YAxis);
  // console.log('max', max);
  props.YAxis.forEach(item => {
    newarr.push(max);
  });

  let barWidth = 6;
  let option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#004284',
      borderColor: '#0B9BFF',
      borderRadius: 6, // 设置圆角大小
      textStyle: {
        // 字体颜色
        color: 'white',
        // 字体大小
        fontSize: 14,
      },
      formatter: params => {
        // console.log(params);
        var relVal = '' + params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
          if (params[i].seriesName) {
            let unit = params[i].seriesName == props.typeName ? 'mm' : '个';
            relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value;
          }
        }
        return relVal;
      },
    },
    grid: {
      left: '6%',
      right: '4%',
      bottom: '3%',
      top: '5%',
      containLabel: true,
    },
    xAxis: {
      max: Number(max),
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLabel: {
        show: true,
        color: '#AED2E0',
      },
      axisLine: {
        lineStyle: {
          color: '#fff',
        },
      },
      splitLine: {
        show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
        type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        lineStyle: {
          color: 'rgba(255,255,255,0.2)',
          width: 1, // 设置分割线的粗细为2
        },
      },
    },
    yAxis: {
      type: 'category',
      axisLabel: {
        show: true,
        color: '#fff',
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false, // 不显示坐标轴刻度线
      },
      data: props.XAxis,
      name: props.typeName,
      nameLocation: 'start',
      nameTextStyle: {
        color: '#AED2E0',
        padding: [-8, 0, 0, -100], // 四个数字分别为上右下左与原位置距离
      },
    },

    dataZoom: [
      {
        type: 'inside', // 支持内部鼠标滚动平移
        start: props.zoomData[0],
        end: props.zoomData[1],
        yAxisIndex: 0,
        zoomOnMouseWheel: true, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
      },
    ],
    series: [
      {
        data: props.YAxis,
        name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
        type: 'pictorialBar', // 系列类型
        symbolSize: [barWidth / 1.2, barWidth / 1.2], // 标记的大小
        symbolOffset: [barWidth - 7, 0], // 标记相对于原本位置的偏移
        symbolPosition: 'end', // 图形的定位位置。可取值：start、end、center
        // 图例的图形样式
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255, 255, 255,1)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(255, 255, 255,1)', // 100% 处的颜色
              },
            ],
          },
        },
        z: 100, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
      },
      {
        data: props.YAxis,
        name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
        type: 'pictorialBar', // 系列类型
        symbolSize: [barWidth * 2, barWidth * 2], // 标记的大小
        symbolOffset: [barWidth + 2, 0], //记相对于原本位置的偏移
        symbolPosition: 'end', // 图形的定位位置。可取值：start、end、center
        z: 10, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
        itemStyle: {
          color: 'transparent',
          borderColor: '#fff',
          borderType: 'solid',
          borderWidth: 10,
        },
      },
      // 柱状图
      {
        name: props.typeName, // 系列名称, 用于tooltip的显示, legend 的图例筛选
        type: 'bar', // 系列类型
        barWidth: barWidth, // 指定柱宽度，可以使用绝对数值或百分比，默认自适应
        barGap: '-100%', // 不同系列的柱间距离l，如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
        // 图例的图形样式
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(83, 180, 232,0.3)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(83, 180, 232,1)', // 100% 处的颜色
              },
            ],
          },
        },
        data: props.YAxis,
      },
      // 背景
      {
        name: '', // 系列名称, 用于tooltip的显示, legend 的图例筛选
        type: 'bar', // 系列类型
        barWidth: barWidth, // 指定柱宽度，可以使用绝对数值或百分比，默认自适应
        barGap: '-100%', // 不同系列的柱间距离l，如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
        // 图例的图形样式
        itemStyle: {
          color: '#335082',
          opacity: 0.5,
        },
        z: 0, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
        data: newarr, // 系列中的数据内容数组
      },
    ],
  };
  option && myChart.value.setOption(option);
}

function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}

onMounted(() => {
  nextTick(() => {
    init();
    window.addEventListener('resize', resizeTheChart);
  });
});
</script>