<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/threatIntelligenceManagement/components/NewIntelligence.vue
 * @Date: 2022-08-09 16:18:42
 * @Description: 最新三十天/新增情报
 * @LastEditTime: 2023-09-01 17:04:49
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, reactive } from 'vue'
import CommonCard from './CommonCard.vue';


const xAxisData = ref(['09.01', '09.02', '09.03', '09.04', '09.05', '09.06', '09.07', '09.08', '09.09', '09.10', '09.11', '09.12', '09.13', '09.14', '09.15', '09.16', '09.17', '09.18', '09.19', '09.20', '09.21', '09.22', '09.23', '09.24', '09.25', '09.26', '09.27', '09.28', '09.29', '09.30', '09.31']);
const activeSeriesData = ref([]) as any
activeSeriesData.value = Array.from({ length: 31 }, (v, k) => {
  return (k * Math.random() * 10000 + Math.floor(Math.random() * 10000)).toFixed(0)
}).reverse()

const addSeriesData = ref([]) as any
addSeriesData.value = Array.from({ length: 31 }, (v, k) => {
  return (k * Math.random() * 10000 + Math.floor(Math.random() * 10000)).toFixed(0)
}).reverse()

console.log(addSeriesData.value)

const chartOption = reactive({
  grid: {
    top: '14%',
    left: '3%',
    right: '3%',
    bottom: '10%'
  },

  tooltip: {
    trigger: 'axis',
    position: function (point, params, dom, rect, size) {
      // 鼠标坐标和提示框位置的参考坐标系是：以echarts 容器的左上角那一点为原点，x轴向右，y轴向下
      // 提示框位置
      var x = 0; // x坐标位置
      var y = 0; // y坐标位置

      // 当前鼠标位置
      var pointX = point[0];
      var pointY = point[1];

      // echarts 容器大小
      // var viewWidth = size.viewSize[0];
      // var viewHeight = size.viewSize[1];

      // 提示框大小
      var boxWidth = 97;
      var boxHeight = 105;

      // boxWidth > pointX 说明鼠标左边放不下提示框
      if (boxWidth > pointX) {
        x = pointX + 5; // 此处需要判断 (pointX+5+boxWidth) < size.viewSize[0]
      } else {
        // 左边放的下
        x = pointX - boxWidth;
      }

      // boxHeight > pointY 说明鼠标上边放不下提示框
      if (boxHeight > pointY) {
        y = 5;
      } else {
        // 上边放得下
        y = pointY - boxHeight;
      }

      return [x, y];
    },
    axisPointer: { lineStyle: { color: 'rgba(198, 209, 219, .6)' } },
    show: true,
    backgroundColor: '#fff',
    extraCssText: 'z-index: 9;box-shadow: none;',
    appendToBody: false,
    borderColor: '#0095FF',
    textStyle: {
      fontSize: '12',
      color: 'rgba(0,0,0,0.4500)'
    }
  },

  legend: {
    top: '2%', // 距离容器上边界的距离
    right: '4%', // 距离容器右边界的距离
    itemWidth: 10, // 图例宽度
    itemHeight: 10, // 图例高度
    itemGap: 30, // 图例间距
    data: ['活跃情报', '新增情报'], // 图例数据和图例颜色的对应关系
    icon: 'circle',
    // 图例文字的样式
    textStyle: {
      fontSize: 10,
      fontWeight: 400,
      color: 'rgba(0,0,0,0.4000)'
    }
  },

  xAxis: [
    {
      data: xAxisData.value,
      axisLabel: {
        // 坐标轴文本标签
        fontSize: 10,
        fontFamily: 'Regular',
        fontWeight: 400,
        color: 'rgba(0,0,0,0.4000)',
        interval: 0 // 设置为0，表示全部显示，1表示隔一个显示，依次类推
      },
      axisTick: { show: false }, // 坐标轴刻度线
      axisLine: { show: false, color: '#EAEBF0' }, // 坐标轴轴线
      boundaryGap: false // 设置为true，表示两边留白，为false表示两边不留白
    }
  ],

  yAxis: [
    {
      type: 'value',
      axisLabel: {
        fontSize: 10,
        fontFamily: 'Regular',
        fontWeight: 400,
        color: 'rgba(0,0,0,0.4000)',
        formatter: function (value, index) {
          if (value >= 10000) {
            return value / 10000 + '万'
          }
          return value
        }
      },
      splitLine: {
        // 坐标轴分割线
        show: true,
        lineStyle: { color: '#EAEBF0' } // 分割线颜色
      },
      axisLine: {
        show: false,
        lineStyle: { color: '#EAEBF0' }
      },
    }
  ],

  series: [
    {
      name: '活跃情报',
      type: 'line',
      showSymbol: true, // 是否显示拐点
      symbol: 'circle',
      symbolSize: 6, // 拐点大小
      data: activeSeriesData.value,
      itemStyle: { color: '#0095FF' }, // 图例颜色
      lineStyle: { width: 1.5, color: '#0095FF', shadowColor: 'rgba(0,0,0,0)' }, // 线条颜色
    },
    {
      name: '新增情报',
      type: 'line',
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 6, // 拐点大小
      data: addSeriesData.value,
      itemStyle: { color: '#D90808' },
      lineStyle: { width: 1.5, color: '#D90808' },
    },
  ]
})


</script>

<template>
  <CommonCard title="近30天活跃情报/新增情报">
    <div class="new-intelligence-box">
      <v-chart ref="myChart" class="chart" :option="chartOption" autoresize />
    </div>
  </CommonCard>
</template>

<style lang="scss" scoped>
.new-intelligence-box {
  width: 100%;
  min-width: 940px;
  height: 285px;
  display: flex;
  flex-direction: column;

  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>
