echarts柱狀圖y軸數據添加單位的三種方式（vue項目）

問題描述

本文記錄一下，vue項目中使用echarts，畫柱狀圖，x軸或y軸添加單位的三種方式，以y軸添加單位爲例

方式一（經過yAxis中的name屬性設置）

效果圖以下：

代碼以下：

<template>
  <div>
    <div class="echartsBox" id="main"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xData: ["週一", "週二", "週三", "週四", "週五", "週六", "週日"],
      yData: [115, 198, 88, 77, 99, 123, 176],
      grid: {
        // 網格線配置
        show: true,
        lineStyle: {
          color: ["#e9e9e9"],
          width: 1,
          type: "solid",
        },
      },
    };
  },
  watch: {
    xData() {
      this.echartsInit();
    },
    yData() {
      this.echartsInit();
    },
  },
  mounted() {
    // 在經過mounted調用讓echarts渲染
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      let main = document.getElementById("main"); // 獲取dom元素做爲eacharts的容器
      console.log("是否有echarts", this.$echarts);
      this.$echarts.init(main).setOption({
        // 調用echarts方法去繪製echarts圖
        xAxis: {
          type: "category", // 類別
          data: this.xData, // x軸類別對應的值
          axisTick: {
            // 刻度線控制在柱狀圖居中
            alignWithLabel: true,
          },
        },
        grid: {
          show: true,
        },
        yAxis: {
          type: "value",
          // 看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，
          // ----------------------經過name屬性加單位，也能夠經過nameTextStyle設置對應單位文字樣式-----------------------
          name: "單位（萬元）",
          nameTextStyle: {
            color: "#aaa",
            nameLocation: "start",
          },
        },
        series: [
          {
            name: "kkk",
            data: this.yData,
            type: "bar", // 類型爲柱狀圖
            barWidth: 40, // 柱狀圖的寬度
          },
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
.echartsBox {
  width: 600px;
  height: 600px;
}
</style>

方式二 全部數據共用一個單位（經過title中的subtext屬性設置）

代碼以下：

yAxis: {
  type: "value",
},
// 看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏
title: {
  // title爲標題部分，有一級標題text，二級標題subtext。這裏咱們使用二級標題，再修改一下這個二級標題的位置便可出現咱們想要的效果了，固然樣式也能夠經過title.subtextStyle去配置
  subtext: "單位（萬元）",
  left: 24,// 距離左邊位置
  top: 16,// 距離上面位置
  subtextStyle:{ // 設置二級標題的樣式
    color:"#baf"
  }
},
series:[......]

最終效果圖，和方式一的最終效果是一致的

方式三 每一個數據都帶有單位（經過yAxis中的axisLabel屬性設置）

效果圖以下：

代碼以下：

grid: {
  show: true,
},
yAxis: {
  type: "value",
 // 看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏，看這裏
  axisLabel: {
    //這種作法就是在y軸的數據的值旁邊拼接單位，貌似也挺方便的
    formatter: "{value} 萬元",
  },
},
series: [......]

x軸的也相似，這裏就不贅述了

以上就是經常使用的三種方式去給echarts的柱狀圖加單位，其實最重要的就是看官網文檔，俗稱：面向文檔開發。最後附上官網echarts配置項的連接： https://echarts.apache.org/zh...