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...