eharts图表单位自适配

需求描述

以数据的最小值为基准

• 当最小值超过1分钟时，y轴单位显示“分”
• 当最小值超过1小时时，y轴单位显示“时”

最终效果

实现思路

在向图表传入数据前，对y轴数据做解析，根据y轴数据最小值的大小，得对应的单位，并对y轴数据根据最终显示的单位进行相应的换算，最终将单位和换算过后的y轴数据，传入图表中显示。

完整范例代码

主页 index.vue

<template>
  <div class="chartBox">
    <Bar1 :data="bar1Data" :unit="bar1Unit" />
  </div>
</template>
<script>import Bar1 from "@/pages/chartsDemo/chartsLib/bar1.vue";
export default {
  components: { Bar1 },
  mounted() {
    this.bar1Data.xList = [
      "周一",
      "周二",
      "周三",
      "周四",
      "周五",
      "周六",
      "周天",
    ];
    this.bar1Data.yList = [12000, 20000, 15000, 8000, 7000, 11000, 13000];
    this.bar1Unit = this.getUnit(this.bar1Data);
  },
  methods: {
    getUnit(data) {
      let min = Math.min(...data.yList);

      if (min >= 3600) {
        data.yList = data.yList.map((item) => {
          return (item / 3600).toFixed(2);
        });
        return "时";
      } else if (min >= 60) {
        data.yList = data.yList.map((item) => {
          return (item / 60).toFixed(2);
        });

        return "分";
      } else {
        return "秒";
      }
    },
  },
  data() {
    return {
      bar1Data: {},
      bar1Unit: "",
    };
  },
};</script>
<style scoped>.chartBox {
  height: 300px;
  width: 600px;
}</style>

图表组件
src\pages\chartsDemo\chartsLib\bar1.vue

<template>
  <div style="height: 100%;width:" ref="myChart"></div>
</template>

<script>import echarts from "echarts";

export default {
  props: {
    data: Object,
    unit: String,
  },
  mounted() {
    this.$nextTick(() => {
      this.drawChart();
    });
  },
  methods: {
    drawChart() {
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(9, 24, 48, 0.5)",
          borderColor: "rgba(75, 253, 238, 0.4)",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          data: ["阅读时长"],
          right: 60,
          textStyle: {},
        },

        xAxis: {
          type: "category",
          data: this.data.xList,
        },
        yAxis: {
          type: "value",
          name: this.unit,
          nameLocation: "end", //坐标位置，支持start,end，middle
          nameTextStyle: {
            padding: [0, 0, 0, -30], //调整距离坐标位置的距离
          },
        },
        series: [
          {
            name: "阅读时长",
            data: this.data.yList,
            type: "bar",
          },
        ],
      };

      // 2.创建图表
      let chart = echarts.init(this.$refs.myChart);

      // 3，导入图表的配置
      chart.setOption(option);

      // 4添加窗口大小改变监听事件，当窗口大小改变时，图表会重新绘制，自适应窗口大小
      window.addEventListener("resize", function() {
        chart.resize();
      });
    },
  },
};</script>

<style scoped></style>