<template>
  <div :id="id"
       style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
import { guid } from "@/utils/util";
import { reactive, toRefs, onMounted, watch } from "vue";
export default {
  name: "line-chart",
  props: {
    data: Object,
    refresh: Number
  },
  setup(props) {
    const state = reactive({
      series: [],
      legend: [],
      id: guid(),
      chart: null,
    });
    const resizeTheChart = () => {
      if (state.chart) {
        state.chart.resize();
      }
    };
    //  chartData1: {
    //       xData: ["13:00", "13:20", "13.40", "14:00", "14:20", "14:40", "15:00"],//横坐标
    //       info: [
    //         {
    //           y: [3.0, 4.0, 3.7, 1.2, 3.5, 2.6, 6],//纵坐标
    //           color: "rgba(70, 163, 244, 1)",//折线颜色
    //           bgColor: [
    //             { offset: 0.1, color: "rgba(58, 167, 255,0.8)" },//折线下方区域背景颜色
    //             { offset: 1, color: "rgba(58, 167, 255,0.1)" },
    //           ],
    //         },
    //       ],
    //       legendShow:false,//是否显示图例
    //       yAxisShow: false,//y轴坐标轴
    //       yLineShow: true,//y轴网格线
    //       yAxisColor: ["rgba(13, 72, 146, .3)"],/y轴网格线颜色
    //       yName: "",//y轴坐标名称
    //       smooth: false,//是否是曲线形式显示
    //     },
    const initSeries = () => {
      console.log(props.data.info, 'kkkkkkkkkkk')
      state.series = [];
      state.legend = [];
      props.data.info.forEach((v, i) => {
        state.series.push({
          name: v.name,
          data: v.y,
          type: "line",
          smooth: props.data.smooth,
          yAxisIndex: v.yAxisIndex,
          symbol: "circle",
          symbolSize: [6, 6],
          itemStyle: {
            normal: {
              color: v.color,
              lineStyle: {
                color: v.color,
              },
            },
          },
          // 填充区域的样式
          areaStyle: {
            normal: {
              // 填充色渐变
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, v.bgColor),
            },
          },
        });
        state.legend.push(v.name);
      });
    };
    const init = () => {
      let chartDom = echarts.init(document.getElementById(state.id));
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["red", "green"],
        grid: {
          top: "14%",
          left: "3%",
          right: "3%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          show: props.data.legendShow,
          itemHeight: 10,
          itemWidth: 10,
          data: state.legend,
          icon: "rect",
          right: "40%",
          textStyle: {
            color: "#c6c6c6"
          }
        },
        xAxis: {
          type: "category",
          data: props.data.xData,
        },
        yAxis: [
          {
            type: "value",
            name: props.data.yName,
            axisLine: {
              show: props.data.yAxisShow,
            },
            splitLine: {
              show: props.data.yLineShow,
              lineStyle: {
                color: props.data.yAxisColor,
                width: 1,
                type: "solid",
              },
            },
          },
          {
            type: "value",
            name: props.data.yName2,
            axisLine: {
              show: props.data.yAxisShow,
            },
            axisLabel: {
              textStyle: {
                color: "#556677",
              },
              formatter: "{value}",
            },
            splitLine: {
              show: props.data.yLineShow,
              lineStyle: {
                color: props.data.yAxisColor,
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        dataZoom: [
          {
            // 第一个 dataZoom 组件
            type: "inside",
            xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
            startValue: 0, // 数据窗口范围的起始数值index
            endValue: 15, // 数据窗口范围的结束数值index
          },
        ],
        series: state.series,
      };
      chartDom.clear();
      option && chartDom.setOption(option, true);
      state.chart = chartDom;
    };
    watch(
      () => props.refresh,
      () => {
        if (state.chart) {
          state.chart.dispose();
          state.chart = null;
        }
        setTimeout(() => {
          initSeries();
          init();
        }, 0);
      }
    );
    onMounted(() => {
      initSeries();
      init();
      window.addEventListener("resize", resizeTheChart);
    });
    return {
      ...toRefs(state),
      resizeTheChart,
      initSeries,
      init,
    };
  },
};
</script>