echarts柱状图y轴数据添加单位的三种方式(vue项目)
问题描述
本文记录一下,vue项目中使用echarts,画柱状图,x轴或y轴添加单位的三种方式,以y轴添加单位为例
方式一(通过yAxis中的name属性设置)
效果图如下:
文章图片
代码如下:
.echartsBox {
width: 600px;
height: 600px;
}
方式二 所有数据共用一个单位(通过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: [......]
【echarts柱状图y轴数据添加单位的三种方式(vue项目)】x轴的也类似,这里就不赘述了
以上就是常用的三种方式去给echarts的柱状图加单位,其实最重要的就是看官网文档,俗称:面向文档开发。最后附上官网echarts配置项的链接: https://echarts.apache.org/zh...