<template>
  <div
    id="PortfolioCharts"
    :class="className"
    :style="{ height: height, width: width }"
  />
</template>
<script>
import echarts from "echarts/lib/echarts";
import "echarts/theme/macarons";
import { EleResize } from "./esresize";

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "80px"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    label: {
      type: Array,
      default: () => {
        return [];
      }
    },
    xDate: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      chartLine: null,
      itemList: [],
      xDataTime:[],
      options: {
        grid: {
          left: "3%",
          right: "2%",
          top: 0
        },
        xAxis: {
          type: "category",
          data: this.xDataTime, // 类别数据
          boundaryGap: false, // 类目轴两边不留白
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          },
          axisLabel: {
            formatter: () => {
              return "";
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          }
        },
        yAxis: {
          type: "value",
          show: false // 隐藏纵轴
        },
        tooltip: {
          trigger: "item", // 触发类型，默认数据触发，可选为：'item'、'axis'
          formatter: function(params) {
            // params 是包含当前数据点信息的对象
            // 你可以根据 params.data 来格式化提示框的内容
            return params.data[0] + "";
          }
        },
        series: [
          {
            type: "scatter", // 散点图
            data: this.itemList,
            // data:[['2024-05-14 17:33',0],['2024-05-14 17:52',0]],
            symbolSize: 8, // 设置散点大小
            color: "#8080ff",
            label: {
              show: true, // 显示数据标签
              position: "top", // 数据标签的位置
              formatter: "" // 数据标签的格式化，这里显示的是类别名称
            }
          }
        ]
      }
    };
  },
  mounted() {
  },
  methods: {
    drawLineChart(data,time) {
      // console.log('开始渲染')
      this.itemList = data;
      this.xDataTime = time;
      this.options.series[0].data = data
      // 基于准备好的dom，初始化echarts实例
      this.chartLine = echarts.init(this.$el, "macarons");
      // 使用刚指定的配置项和数据显示图表
      this.chartLine.setOption(this.options);
      const listener = () => {
        this.chartLine.resize();
        // console.log(2)
      };
      // window.addEventListener('resize', listener)
      EleResize.on(document.getElementById("PortfolioCharts"), listener);
    },
    testLineChart() {
      this.chartLine = echarts.init(this.$el, "macarons");
      this.chartLine.setOption(this.options);
    }
  }
};
</script>
