<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: () => [],
  },
  YAxis2: {
    type: Array,
    default: () => [],
  },
  //类型
  typeName: {
    type: String,
    default: '',
  },
  typeName2: {
    type: String,
    default: '',
  },
});

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

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

  let barWidth = 12;
  let option = {
    color: ['rgba(96, 203, 248,1)', 'rgba(124, 255, 186,1)'],
    legend: {
      // selectedMode: false,
      icon: 'rect',
      itemStyle: {
        color: 'inherit',
      },
      textStyle: {
        color: '#fff',
      },
      itemWidth: 13,
      itemHeight: 13,
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#004284',
      borderColor: '#0B9BFF',
      borderRadius: 6, // 设置圆角大小
      textStyle: {
        // 字体颜色
        color: 'white',
        // 字体大小
        fontSize: 14,
      },
      formatter: params => {
        var relVal = '' + params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
          if (params[i].seriesName) {
            let unit = '';
            relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
          }
        }
        return relVal;
      },
    },
    grid: {
      left: '8%',
      right: '4%',
      bottom: '3%',
      top: '20%',
      containLabel: true,
    },
    xAxis: {
      boundaryGap: true,
      type: 'category',
      data: props.XAxis,
      axisLabel: {
        show: true,
        color: '#fff',
        // interval: 0,
        formatter: function (params) {
          let one = params.substring(0, 3);
          let two = params.substring(3, 6);
          let three = params.substring(6, 8);
          let four = params.substring(8) ? '...' : '';

          let newParamsName = one + '\n' + two + '\n' + three + four;
          return newParamsName;
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          show: true, //是否显示坐标轴轴线，
          color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
          width: 1, //x轴粗细
        },
      },
      axisTick: {
        show: false, //是否显示刻度
      },
    },
    yAxis: [
      {
        position: 'left',
        type: 'value',
        name: props.typeName,
        nameLocation: 'end',
        nameTextStyle: {
          color: '#AED2E0',
          padding: [-5, 60, 0, 0], // 四个数字分别为上右下左与原位置距离
        },
        axisLabel: {
          show: true,
          color: '#AED2E0',
          formatter: function (value) {
            return value.toFixed(1); // 显示小数点后两位
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            show: true, //是否显示坐标轴轴线，
            color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
            width: 1, //x轴粗细
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.2)',
          },
        },
      },
      {
        position: 'right',
        type: 'value',
        name: props.typeName2,
        nameLocation: 'end',
        nameTextStyle: {
          color: '#AED2E0',
          padding: [0, -40, 0, 0], // 四个数字分别为上右下左与原位置距离
        },
        axisLabel: {
          show: true,
          color: '#AED2E0',
          formatter: function (value) {
            return value.toFixed(1); // 显示小数点后两位
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            show: true, //是否显示坐标轴轴线，
            color: 'rgba(255,255,255,0.4)', //x轴轴线的颜色
            width: 1, //x轴粗细
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.2)',
          },
        },
      },
    ],
    series: [
      {
        yAxisIndex: 0,
        name: '现状规模',
        type: 'bar',
        barWidth: barWidth,
        itemStyle: {
          borderRadius: [6, 6, 6, 6],
          color: function () {
            return new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: 'rgba(43, 174, 227,0.5)',
                },
                {
                  offset: 1,
                  color: 'rgba(43, 174, 227,1)',
                },
              ],
              false
            );
          },
        },
        // showBackground: true,
        backgroundStyle: {
          color: 'transparent',
          borderWidth: 1,
          borderColor: 'rgba(148, 250, 65, 0.2)',
        },
        data: props.YAxis,
      },
      {
        yAxisIndex: 1,
        itemStyle: {
          color: 'rgba(124, 255, 186,1)',
        },
        name: '服务面积',
        data: props.YAxis2,
        // data: [12223, 24444, 322222, 4, 5, 6, 74, 33, 44],
        type: 'line',
        smooth: true,
        lineStyle: {
          // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          // color: "#CB2F0C",
          color: 'rgba(124, 255, 186,1)',
          width: 1,
        },
      },
    ],
  };

  option && myChart.value.setOption(option);
}

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