echarts圖表按照時分，日，月，維度展示時間數據

echarts圖表按照時分，日，月，維度展示時間數據

echarts 圖表效果

 

echarts dataZoom配置

 echarts 圖表數據橫向滾動並配置橫坐標縮放刻度dataZoom配置如下

      const one_hour = 60 * 60 * 1000;
      const one_day = one_hour * 24;
      const range_start = {
        year: {
          start: 90,
          end: 100,
          minValueSpan: one_day * 30 * 7,
          maxValueSpan: one_day * 30 * 7,
        },
        month: {
          start: 90,
          end: 100,
          minValueSpan: one_day * 7,
          maxValueSpan: one_day * 7,
        },
        week: {
          start: 90,
          end: 100,
          minValueSpan: one_day * 7,
          maxValueSpan: one_day * 7,
        },
        day: {
          start: 90,
          end: 100,
          minValueSpan: one_hour * 7,
          maxValueSpan: one_hour * 7,
        },
      }

配置思想是，坐標軸上最大和最小間隔在每個維度下，都是各自相等的，如 "year"維度下都是7個月

echarts options配置

echarts options配置如下，其中dataZoom取值詳見上面分別描述的“year”，“month”，“week”，“day”的取值。

      {
        color: ["#00C5CD", "#FF8510"],
        dataZoom: this.dataZoom,
        xAxis: {
          type: "time",
          min: "dataMin",
          max: "dataMax",
          boundaryGap: false,
          axisLabel: {
            // 格式化橫軸坐標時間刻度
            formatter: {
              year: "{yyyy}年",
              month: "{M}月",
              day: "{MM}/{dd}",
              hour: "{HH}:{mm}",
              minute: "{HH}:{mm}",
              second: "{HH}:{mm}:{ss}",
              millisecond: "{hh}:{mm}:{ss} {SSS}",
              none: "{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}",
            },
          },
          // x軸顯示豎線
          splitLine: {
            show: true,
            lineStyle: {
              // 顯示虛線
              type: [10, 10],
              color: "#e0e0e0",
              dashOffset: 5,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#e0e0e0",
            },
          },
        },
        yAxis: {
          type: "value",
          name: this.yUnit,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        series: this.getSeries,
      }