关于echarts: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…