echarts柱状图y轴数据添加单位的三种方式(vue项目)

问题描述 本文记录一下,vue项目中使用echarts,画柱状图,x轴或y轴添加单位的三种方式,以y轴添加单位为例
方式一(通过yAxis中的name属性设置) 效果图如下:
echarts柱状图y轴数据添加单位的三种方式(vue项目)
文章图片

代码如下:

.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属性设置) 效果图如下:
echarts柱状图y轴数据添加单位的三种方式(vue项目)
文章图片

代码如下:
grid: { show: true, }, yAxis: { type: "value", // 看这里,看这里,看这里,看这里,看这里,看这里,看这里,看这里,看这里,看这里,看这里,看这里,看这里,看这里 axisLabel: { //这种做法就是在y轴的数据的值旁边拼接单位,貌似也挺方便的 formatter: "{value} 万元", }, }, series: [......]

【echarts柱状图y轴数据添加单位的三种方式(vue项目)】x轴的也类似,这里就不赘述了
以上就是常用的三种方式去给echarts的柱状图加单位,其实最重要的就是看官网文档,俗称:面向文档开发。最后附上官网echarts配置项的链接: https://echarts.apache.org/zh...

    推荐阅读