<template>
    <div ref="chartDom" class="content-box yse-events"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

let chartDom = ref(null);
let myChart = null;
onMounted(async () => {
  myChart = echarts.init(chartDom.value);
  myChart.setOption(options);
  // bhInit()
});
const colors = [
  {
    offset: 0.25,
    color: "rgba(218, 60, 72, 0.3)",
  },
  {
    offset: 0.5,
    color: "rgba(44, 220, 105, 0.4)",
  },
  {
    offset: 0.75,
    color: "rgba(10, 196, 74, 0.4)",
  },
  {
    offset: 1,
    color: "rgba(10, 196, 74, 0.3)",
  },
];
const options = {
  tooltip: {
    trigger: "axis",
    backgroundColor: "#00848C",
    borderColor:'#00848C',
    textStyle: {
      color: "#FFF",
    },
    // formatter: '{b0}',
    formatter: '{c0}',
    padding: [2,5],
    axisPointer: {
      type: "shadow",
      shadowStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(61, 215, 227, 0)" },
            { offset: 0.5, color: "rgba(61, 215, 227, 0.5)" },
            { offset: 1, color: "rgba(61, 215, 227, 0)" },
          ],
          global: false,
        },
      },
    },
  },
  legend: {
    data: ["预测态势","实际态势"],
    //图例文字样式
    textStyle: {
      color: "#fff",
      fontSize: "11px",
    },
    align: "left",
    right: "2%",
    top: "-2%",
    icon:'rect',
    itemGap: 5,
    itemWidth: 20,
    itemHeight: 8,
  },
  grid: {
    top: "10%",
    left: "4%",
    right: "0%",
    bottom: "12%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: ['1/1','2/1','3/1','4/1','5/1'],
      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: "执行日",
      nameLocation:'start',
      nameTextStyle: {
        color: "#fff",
        fontSize:'11',
        padding: [10, 0, 0, 10]
      },
      type: "value",
      max: 100,
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      // 分割线
      splitLine: {
        show: true,
        lineStyle: {
          color: "#ffffff1f",
        },
      },
    },
    {
      type: "value",
      show: false,
      max: 100,
      name: "复核时间",
      nameLocation:'start',
      nameTextStyle: {
        color: "#fff",
        fontSize:'11',
        padding: [10, 15, 0, 0]
      },
    },
  ],
  series: [
    {
      name: "预测态势",
      type: "line",
      data: [20, 30, 40,30,10],
      symbol: "none",
      itemStyle: {
        color: "rgba(10, 196, 74, 0.5)",
        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,20],
      symbol: "emptyCircle",
      symbolSize: 3,
      showSymbol: false,
      itemStyle: {
        color: "red",
      },
      yAxisIndex: 1,
      lineStyle: {
        width: 1,
        color: "#FF5358", //改变折线颜色
        type: "dashed",
      },
    },
  ],
};
 function bhInit() {
    // options.series[0].data = data1

    myChart.clear();
    options && myChart.setOption(options);
  }
</script>

<style lang="scss" scoped>
.content-box{
  width: 100%;
  height: 210px;
}
</style>
