echarts与时间相关的图表

<template>
  <div id="zc1"></div>
</template>

<script>
let myChartzc1 = null;
export default {
  data() {
    return {
      option: {
        legend: {
          data: [],
          //   top: "20px",
          textStyle: {
            color: "red",
          },
        },

        dataZoom: [
          {
            type: "slider",
            filterMode: "weakFilter",
            showDataShadow: false,
            top: 220,
            height: "15px",
            labelFormatter: "",
            start: 0,
            end: 80,
          },
          {
            type: "inside",
            filterMode: "weakFilter",
          },
        ],

        tooltip: {
          //展示数据
          trigger: "axis",
          formatter: function (params) {
            //console.log(params)
            return (
              '<span style="color:white">' +
              params[0].seriesName +
              " </span></br>" +
              '<span style=" color:#99ccff">' +
              "时间：" +
              "</span>" +
              params[0].value[0] +
              "</br>" +
              '<span style=" color:#99ccff">' +
              "数量：" +
              "</span>" +
              params[0].value[1] +
              "</br>"
            );
          },
        },

        title: {},
        xAxis: {
          type: "time",
          //type: "categroy",
          scale: true,
          //interval: 10 * 1000,
          //splitNumber:12,
          axisLine: {
            lineStyle: {
              color: "red",
              width: 1,
            },
          },
          axisLabel: {
            formatter: (value) => {
              // return this.$echarts.time.format(new Date(value),'{MM}-{dd} {hh}:{mm}:{ss}')
              return this.$utils.formatDate(value, "MM-dd hh:mm:ss");
            },
            show: true,
            interval: 0,
            rotate: 30,
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "red",
              width: 1,
            },
          },
        },

        series: [],
      },
    };
  },

  mounted() {
    myChartzc1 = this.$echarts.init(document.getElementById("zc1"));
  },
  created() {
    this.getzcData();
  },
  methods: {
    async getzcData() {
      let { data } = await this.$api.getMock();
      this.chart1Data = data.chart2;
      this.initChart(data.chart2);
    },

    initChart(chartData) {
      let seriesData = [],
        timeList = [];
      let color = ["red", "green"];
      ["红方", "蓝方"].forEach((r, i) => {
        let str = ["redSum", "blueSum"][i];
        seriesData.push({
          name: r,
          type: "line",
          data: chartData.map((rr) => [rr.time, rr[str]]),
          color: color[i],
          symbolSize: 2,
        });
      });
      timeList = chartData.map((r) => new Date(r.time).getTime());
      //   let min = this.$utils.formatDate(
      //     Math.min(...timeList),
      //     "yyyy-MM-dd hh:mm:ss"
      //   );
      //   let max = this.$utils.formatDate(
      //     Math.max(...timeList),
      //     "yyyy-MM-dd hh:mm:ss"
      //   );
      let min = Math.min(...timeList);
      let max = Math.max(...timeList);
      this.option.xAxis.min = min;
      this.option.xAxis.max = max;
      this.option.legend.data = ["红方", "蓝方"];
      this.option.series = seriesData;

      myChartzc1.setOption(this.option);
    },
  },
};
</script>

<style lang='scss' scoped>
#zc1 {
  width: 100%;
  height: 100%;
}
</style>