<template>
  <div :id="id" style="width: 100%; height: 170px"></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,
  },
  setup(props) {
    const state = reactive({
      series: [],
      legend: [],
      id: guid(),
      chart: null,
    });
    const resizeTheChart = () => {
      if (state.chart) {
        state.chart.resize();
      }
    };
    // const initSeries = (data) => {
    //   state.series = [];
    //   init(data);
    //   data.info.forEach((v, i) => {
    //     state.series.push({
    //       name: v.name,
    //       data: v.y,
    //       type: "line",
    //       smooth: data.smooth,
    //       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 = (data) => {
      let chartDom = echarts.init(document.getElementById(state.id));
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "3%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          show: data.legendShow,
          itemHeight: 10,
          itemWidth: 10,
          data: state.legend,
          icon: "rect",
          right: 0,
        },
        xAxis: {
          type: "category",
          data: data.xData,
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "rgba(44, 117, 125, 1)",
              margin: 15,
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
        },
        yAxis: {
          type: "value",
          name: data.yName,
          axisLine: {
            show: data.yAxisShow,
          },
          splitLine: {
            show: data.yLineShow,
            lineStyle: {
              color: data.yAxisColor,
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "rgba(44, 117, 125, 1)",
              margin: 15,
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
        },
        series: {
          name: data.info[0].name,
          data: data.info[0].y,
          type: "line",
          smooth: data.smooth,
          symbol: "circle",
          symbolSize: [6, 6],
          itemStyle: {
            normal: {
              color: data.info[0].color,
              lineStyle: {
                color: data.info[0].color,
              },
            },
          },
          // 填充区域的样式
          areaStyle: {
            normal: {
              // 填充色渐变
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                data.info[0].bgColor
              ),
            },
          },
        },
      };

      option && chartDom.setOption(option, true);
      state.chart = chartDom;
    };
    onMounted(() => {
      // initSeries();
      // init();
      window.addEventListener("resize", resizeTheChart);
    });
    return {
      ...toRefs(state),
      resizeTheChart,
      init,
    };
  },
};
</script>