echarts y轴显示为时间time

今天重读echarts的官方文档，看了几处可以记下的东西

yAxis. min 设置y轴显示的最小值，有三种情况：

1、自己设置想设置的任何合法的值

2、设置为'dataMin'，取的是所给数据中的最小值

3、不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

yAxis. max 和上面min有异曲同工之处。

yAxis. axisLine表示的y轴那条竖线，很单纯的只是竖线，可以设置是否显示、线的样式等

 yAxis. axisTick y轴上的刻度线的设置

yAxis. axisLabel表示刻度旁边显示的标签，比如数值，时间等。

yAxis.axisLabel. showMinLabel与yAxis.axisLabel. showMaxLabel可以将最大值和最小值显示出来，更直观些。

 

=====20220520更新====

需求是展示不同分类的浏览时长，精确到秒，确定是柱状图+x轴（category）+y轴（time）

官方文档上只说y轴type可以是time，但没看到示例。

多方查找，

       yAxis: {

          type: "time",

          min: `${BASE_TIME} 0:00:00`,

          max: `${BASE_TIME} 23:59:59`

        },

option中的yAxis如斯设置，BASE_TIME是自己随便定义的某一天，意思是这一天的24个小时作为y轴的整个显示范围。或者说，图表不关心是哪一天，只要24小时。

由于后端返回的数据也只是 ‘12:30:45’这种时分秒的数据，所以，需要处理一下，字符串拼接一下

`${BASE_TIME}`+'  '+‘12:30:45’

组件完整代码如下：

<!-- 可点击交互的chart -->
<template>
  <div class="chart-wrap">
    <div id="chart"></div>
  </div>
</template>

<script>
const BASE_TIME = "2021-01-01";
import * as echarts from "echarts";
export default {
  name: "BizChart",
  props: {
    data: {
      type: Array,
      require: true
    },
    legend: {
      type: Array,
      require: true
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  mixins: {},
  components: {},
  data() {
    return {
      instance: ""
    };
  },
  created() {},
  mounted() {
    let that = this;
    this.updateChart();
    this.instance.on("click", function(params) {
      that.$emit("tlick", params.name);
    });
  },
  filters: {},
  computed: {},
  watch: {
    data() {
      this.updateChart();
    }
  },
  methods: {
    chartOpts() {
      const ydata = [];
      for (let i = 0; i < this.data.length; i++) {
        ydata.push(`${BASE_TIME} ${this.data[i].value}`);
      }
      const option = {
        title: {
          text: this.options.title || "图表"
        },
        xAxis: {
          type: "category",
          data: this.legend,
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: {
          type: "time",
          min: `${BASE_TIME} 0:00:00`,
          max: `${BASE_TIME} 23:59:59`
        },
        series: [
          {
            data: ydata,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      };
      return option;
    },
    updateChart() {
      // 基于准备好的dom，初始化echarts实例
      const chart = echarts.init(document.getElementById("chart"));
      // 绘制图表
      chart.setOption(this.chartOpts());
      this.instance = chart;
    }
  }
};
</script>
<style lang="less" scoped>
.chart-wrap {
  width: 100%;
  height: 300px;
  #chart {
    width: 100%;
    height: 100%;
    & /deep/ canvas {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>

中间还做了个点击图表的交互，我这边是通过拿到分类数据请求更加详细的数据，自定义了一个tlick事件供父组件监听。

完。