共计 1871 个字符，预计需要花费 5 分钟才能阅读完成。
问题形容
本文记录一下，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…
正文完
