<template>
  <div :id="echid" class="gfChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    data1: Array,
    data2: Array,
    data3: Array,
    timeList: Array,
    jqType: Number,
  },
  data() {
    return {
      echid: "",
    };
  },
  created() {
    this.echid = "ech2_" + new Date().getTime();
  },
  watch: {
    data2: {
      handler(val) {
        this.hamdleJqChart();
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.hamdleJqChart();
  },
  methods: {
    hamdleJqChart() {
      if (document.getElementById(this.echid)) {
        let myechart = echarts.init(document.getElementById(this.echid));
        myechart.setOption({
          color:
            this.jqType == 1
              ? ["#268bff", "#FF1A1A", "#FF7B1A"]
              : ["#FF1A1A", "#268bff"],
          tooltip: {
            trigger: "axis",
            axiosPointer: {
              type: "cross",
              crossStyle: {
                color: "#888",
              },
              lineStyle: {
                type: "dashed",
              },
            },
          },
          grid: {
            left: "10",
            right: "10",
            bottom: "0",
            top: "60",
            containLabel: true,
          },
          legend: {
            data:
              this.jqType == 1
                ? ["总警情", "违法犯罪", "街面警情"]
                : ["刑事", "行政"],
            orient: "horizontal",
            show: true,
            top: 25,
          },
          xAxis: {
            type: "category",
            data: this.timeList,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          yAxis: {
            type: "value",
            axisLabel: {
              color: "#888",
              textStyle: {
                fontSize: 12,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                // color: "#224465",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          series: [
            {
              name: this.jqType == 1 ? "总警情" : "刑事",
              type: "line",
              smooth: true,
              data: this.data1,
            },
            {
              name: this.jqType == 1 ? "违法犯罪" : "行政",
              type: "line",
              smooth: true,
              data: this.data2,
            },
            {
              name: "街面警情",
              type: "line",
              smooth: true,
              data: this.data3,
            },
          ],
        });
      }
    },
  },
};
</script>

<style scoped>
.gfChart {
  margin-top: 1vw;
  height: 65vw;
  width: 100vw;
  margin: 0 auto;
}
</style>
