<template>
  <div ref="chartDom" class="box-echars"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";

const getters = useStore().getters;
const curGardenId = ref(getters.userinfo.curGardenId);
const active = ref(0);

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

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

const colors = [
  {
    offset: 0.25,
    color: "rgba(171, 207, 255, 0.2)",
  },
  {
    offset: 0.5,
    color: "rgba(171, 207, 255, 0.3)",
  },
  {
    offset: 0.75,
    color: "rgba(0, 255, 240, 0.4)",
  },
  {
    offset: 1,
    color: "rgba(0, 255, 240, 0.8)",
  },
];

const options = {
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(255,255,255,0)",
    borderColor: "rgba(255,255,255,0)",
    textStyle: {
      color: "#FFF",
    },
    // formatter: "{c1}℃-{c0}℃",
    formatter: `<div style="background: linear-gradient(0deg, #2A746C 0%, #22569C 100%);padding:2px 10px;border-radius: 5px">****农事</div>`,
    padding: [0],
    axisPointer: {
      type: "none", // 设置为'none'以去除指示线
    },
    axisPointer: {
      type: "shadow",
      shadowStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(0, 255, 240, 0)" },
            { offset: 0.5, color: "rgba(0, 255, 240, 0.5)" },
            { offset: 1, color: "rgba(0, 255, 240, 0)" },
          ],
          global: false,
        },
      },
    },
  },
  legend: {
    orient: "vertical",
    //图例文字样式
    textStyle: {
      color: "#fff",
      fontSize: "13px",
    },
    align: "left",
    right: "1%",
    top: "0%",
    icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAHCAYAAACLD1QDAAAAAXNSR0IArs4c6QAAAKBJREFUOE/NkzsOwjAQBed519AB9z9TOEBoOQCfFq+NDAFRJB1F3PhpLT+NRrZsHM6CHdCYWyGIhCLhIbxmNsVeeVucPOVcHasJNS01zdbPD3uJ7vLx+EDyxZsBhKEqvAMWZxNGLum9T7mfWbM/wXVVrchPxwvoQJsXxw+cRSJ/4CK9DH7hasLqn+DU7ber/DRcIe1XCHdbubk1v7k1/9YntbGQLThP/eUAAAAASUVORK5CYII=",
    itemWidth: 30,
    itemHeight: 8,
  },
  grid: {
    top: "12%",
    left: "3.5%",
    right: "1.5%",
    bottom: "8%",
  },
  xAxis: [
    {
      type: "category",
      data: [
        "8/1",
        "8/2",
        "8/3",
        "8/4",
        "8/5",
        "8/6",
        "8/7",
        "8/8",
        "8/9",
        "8/10",
        "8/11",
        "8/12",
        "8/13",
        "8/14",
      ],
      axisLine: {
        show: false,
        lineStyle: {
          color: "#f4f4f4",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#ffffff1f",
        },
      },
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#fff",
        },
        // 默认x轴字体大小
        fontSize: 12,
        align: "center",
      },
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      name: "****指标",
      nameTextStyle: {
        color: "#fff",
        fontSize: "16",
      },
      type: "value",
      max: 100,
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      // 分割线
      splitLine: {
        show: true,
        lineStyle: {
          color: "#ffffff1f",
        },
      },
    },
  ],
  series: [
    {
      name: "指标变化折线",
      type: "line",
      data: [5, 21, 12, 13, 11, 22, 54, 32, 5, 21, 12, 13, 11, 22],
      showSymbol: false,
      symbol: "circle",
      symbolSize: 8,
      itemStyle: {
        color: "#00B8AE",
        borderWidth: 1,
        borderColor:'#fff'
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, colors, false),
        },
      },
      lineStyle: {
        width: 1,
        color: "#00FFF0",
      },
    },
  ],
};

const initData = async () => {
  const { code, data } = await VE_API.znxy.growAbnormal({
    gardenId: curGardenId.value,
  });
  myChart.clear();
  options && myChart.setOption(options);
};
</script>

<style lang="scss" scoped>
.box-echars {
  width: 100%;
  //   background: red;
  height: 325px;
}
</style>
