问题形容
本文记录一下，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...