<template>
  <div style="position: relative">
    <div class="title">
      <div class="my-name">病虫异常态势图（2区）</div>
      <el-icon
        @click="handleCloese"
        class="my-close"
        color="#00FFF0"
        size="17px"
        ><CircleCloseFilled
      /></el-icon>
    </div>
    <div ref="chartDom" class="echars"></div>
  </div>
</template>

<script setup>
import config from "@/api/config.js";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";

// let props = defineProps({
//   periodMap: { type: Object, require: true },
//   treeList: { type: Object, require: true },
// });

let store = useStore();

let chartDom = ref(null);
let myChart = null;

onMounted(async () => {
  myChart = echarts.init(chartDom.value);
  myChart.setOption(options);
  //   initData();
});

const colors = [
  {
    offset: 0.25,
    color: "rgba(255, 86, 98, 0.4)",
  },
  {
    offset: 0.5,
    color: "rgba(252, 186, 138, 0.4)",
  },
  {
    offset: 0.75,
    color: "rgba(250, 212, 139, 0.4)",
  },
  {
    offset: 1,
    color: "rgba(250, 212, 139, 0.4)",
  },
];

const options = {
  tooltip: {
    trigger: "axis",
    backgroundColor: "#D24953",
    borderColor: "#D24953",
    borderRadius: 9,
    textStyle: {
      color: "#FFF",
    },
    // formatter: "{c0}℃",
    formatter: "杀虫农事",
    padding: [0, 6],
    axisPointer: {
      type: "none", // 设置为'none'以去除指示线
    },
    axisPointer: {
      type: "shadow",
      shadowStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(210, 73, 83, 0)" },
            { offset: 0.5, color: "rgba(210, 73, 83, 0.5)" },
            { offset: 1, color: "rgba(210, 73, 83, 0)" },
          ],
          global: false,
        },
      },
    },
  },
  legend: {
    orient: "vertical",
    data: [
      {
        name: "预测态势",
        icon: "image://data:image/png;base64,[encoded data, 6600 characters]",
      },
      {
        name: "实际态势",
        icon: "image://data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAJCAYAAADDylfFAAAAU0lEQVQoke3NMQ6DMBQE0Qf2tx1RwKVygdz/LPxIoUIKZaow0jarkWban6/Umml0SnGiz2xxbA2WKh/BCDmq7PXjZEOQgYrZVy7u33DH7tg/xvAGwOkIauF5GaUAAAAASUVORK5CYII=",
      },
    ],
    //图例文字样式
    textStyle: {
      color: "#fff",
      fontSize: "11px",
    },
    align: "left",
    right: "3%",
    top: "3%",
    itemWidth: 24,
    itemHeight: 9,
  },
  grid: {
    top: "20%",
    left: "11%",
    right: "4.5%",
    bottom: "8%",
  },
  xAxis: [
    {
      type: "category",
      data: ["11/1", "11/2", "11/3", "11/4", "11/5", "11/6", "11/7"],
      axisLine: {
        show: false,
        lineStyle: {
          color: "#f4f4f4",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.3)",
        },
      },
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#fff",
        },
        // 默认x轴字体大小
        fontSize: 12,
        align: "center",
      },
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      name: "病虫异常数量/棵",
      nameTextStyle: {
        color: "#fff",
        fontSize: "11",
      },
      type: "value",
      max: 100,
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
        margin: 12,
      },
      // 分割线
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.3)",
        },
      },
    },
  ],
  series: [
    {
      name: "实际态势",
      type: "line",
      data: [10, 20, 30, 40, 50, 40, 30],
      symbol: "none",
      itemStyle: {
        color: "#2BCACF",
        borderWidth: 1,
      },
      yAxisIndex: 0,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, colors, false),
        },
      },
      lineStyle: {
        width: 0,
      },
    },
    {
      name: "预测态势",
      type: "line",
      data: [10, 20, 30, 40, 50, 60, 66],
      symbol: "emptyCircle",
      symbolSize: 6,
      showSymbol: false,
      itemStyle: {
        color: "red",
      },
      lineStyle: {
        width: 1,
        color: "#FF5358", //改变折线颜色
        type: "dashed",
      },
    },
  ],
};

const handleCloese = () => {};
</script>

<style lang="scss" scoped>
$title-height: 44px;
.title {
  width: 100%;
  height: $title-height;
  box-sizing: border-box;
  background: rgba(0, 77, 101, 0.8);
  border-radius: 4px 4px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .my-name {
    margin-left: 18px;
    font-size: 16px;
    font-weight: 600;
    color: #00fff0;
    height: 22px;
  }
  .my-close {
    margin-right: 18px;
    cursor: pointer;
  }
}
.echars {
  position: absolute;
  top: calc($title-height);
  width: 100%;
  height: calc(100% - $title-height);
  box-sizing: border-box;
  // padding: 10px;
}
</style>
