<template>
  <div :style="'height:' + height + '; width: ' + width" />
</template>

<script>
import echarts from "echarts";
export default {
  name: "ChartLine",
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "400px"
    },
    chartData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    //标题
    title: {
      type: String,
      default: ""
    },
    titleSize: {
      type: Number,
      default: 16
    },
    titleX: {
      type: String,
      default: "center"
    },
    titleY: {
      type: String,
      default: "3%"
    },
    titleShow: {
      type: Boolean,
      default: true
    },
    //图例相关
    legendShow: {
      type: Boolean,
      default: true
    },
    legendOrient: {
      type: String,
      default: "horizontal"
    },
    legendX: {
      type: String,
      default: "center"
    },
    legendY: {
      type: String,
      default: "bottom"
    },
    //工具栏相关
    toolboxShow: {
      type: Boolean,
      default: false
    },
    toolboxOrient: {
      type: String,
      default: "horizontal"
    },
    //提示框相关
    tooltipShow: {
      type: Boolean,
      default: true
    },
    tooltipTrigger: {
      type: String,
      default: "axis"
    },
    //区域缩放相关
    dataZoomType: {
      type: String,
      default: "inside"
    },
    //坐标轴相关
    xAxisShow: {
      type: Boolean,
      default: true
    },
    xAxisSplitLineShow: {
      type: Boolean,
      default: false
    },
    yAxisSplitLineShow: {
      type: Boolean,
      default: false
    },
    yAxisLineShow: {
      type: Boolean,
      default: false
    },
    //坐标系相关
    gridTop: {
      type: [Number, String],
      default: 10
    },
    gridLeft: {
      type: [Number, String],
      default: "5%"
    },
    gridRight: {
      type: [Number, String],
      default: "10%"
    },
    gridBottom: {
      type: [Number, String],
      default: 0
    },
    //单位相关
    xUnit: {
      type: String,
      default: ""
    },
    yUnit: {
      type: String,
      default: ""
    },
    //最值显示
    markPoint: {
      type: Boolean,
      default: false
    },
    xList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      chart: null //Echarts实例
    };
  },
  watch: {
    //监听到数据改变，重新加载echart数据
    chartData(val) {
      this.removeChart("reset");
      this.initData();
    }
  },
  mounted() {
    this.init();
    this.initData();
  },
  methods: {
    //初始化
    init() {
      this.chart = echarts.init(this.$el);
      //监听页面大小改变
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
    //初始化数据
    initData() {
      if (!this.chart) return;
      const obj = JSON.parse(JSON.stringify(this.chartData));
      const arr = [];
      if (obj.dataList && obj.dataList.length) {
        obj.dataList.forEach((item, index) => {
          // 对echarts数据做处理
          item = {
            name: obj.nameList[index],
            data: item,
            type: "line"
          };
          // 根据参数判断是否显示最值
          if (this.markPoint) {
            item.markPoint = {
              label: { show: true },
              data: [
                { type: "max", name: "最大值", label: "最大值" },
                { type: "min", name: "最小值", label: "最小值" }
              ]
            };
            item.markLine = {
              data: [{ type: "average", name: "平均值" }]
            };
          }
          arr.push(item);
        });
        obj.dataList = arr;
        this.initChart(obj);
      }
    },
    //初始化echarts
    initChart(data) {
      this.chart.setOption({
        color: ["#3398DB", "red"],
        title: {
          show: this.titleShow,
          text: this.title,
          left: this.titleX,
          top: this.titleY,
          textStyle: {
            fontSize: this.titleSize
          }
        },
        //图例设置
        legend: {
          show: this.legendShow,
          orient: this.legendOrient,
          left: this.legendX,
          top: this.legendY,
          data: data.nameList
        },
        //工具栏
        toolbox: {
          show: this.toolboxShow,
          orient: this.toolboxOrient,
          feature: {
            saveAsImage: { show: true },
            dataView: { show: true, readOnly: true }
          }
        },
        //提示框
        tooltip: {
          show: this.tooltipShow,
          trigger: this.tooltipTrigger,
          axisPointer: {
            type: "line",
            crossStyle: {
              color: "#333"
            },
            snap: true,
            axis: "x"
          }
        },
        //区域缩放
        dataZoom: [
          {
            type: this.dataZoomType
          }
        ],
        grid: {
          top: this.gridTop,
          left: this.gridLeft,
          right: this.gridRight,
          bottom: this.gridBottom,
          containLabel: true
        },
        xAxis: {
          show: this.xAxisShow,
          type: "category",
          name: this.xUnit,
          nameTextStyle: {
            fontSize: 12
          },
          splitLine: {
            show: this.xAxisSplitLineShow
          },
          boundaryGap: false,
          axisTick: { show: false }, //坐标轴刻度是否显示
          data: this.xList
        },
        yAxis: {
          type: "value",
          name: this.yUnit,
          splitNumber: 2,
          axisLine: {
            show: this.yAxisLineShow
          },
          splitLine: {
            show: this.yAxisSplitLineShow
          },
          axisLabel: {
            color: "#3398DB"
          }
        },
        series: data.dataList
      });
    },
    //注销echarts
    removeChart(type) {
      if (!this.chart) return;
      this.chart.dispose(); // 销毁echarts
      this.chart = null;
      if (type === "reset") {
        this.init();
      }
    }
  },
  beforeDestroy() {
    this.removeChart();
  }
};
</script>