Echarts图表x轴y轴刻度值过长时显示不全(超过一千显示...k)

在使用 Echarts 图表的过程中，有时候数值会很大导致该轴的刻度显示不全，如图：

这个时候就需要将该轴的刻度值除以 1000 或 10000，再加一个单位来缩短它的长度；

Echarts官网中为我们提供了专门用于修改刻度标签的刻度标签的内容格式器 formatter ，它需要在坐标轴刻度标签 axisLabel 中进行设置，可支持两种形式：

// 1.使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'// 2.使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {return value + 'kg';
}

其中，value就是当前刻度值的大小；

据上图可以看出该图表的y轴刻度显示不全，所以我们在y轴进行操作，使用函数的形式；

yAxis: {type: "value",axisLabel: {color: "#444343",formatter: function (value, index) {// value大于1000时除以1000并拼接k，小于1000按原格式显示if (value >= 1000) {value = value / 1000 + "k";}else if(value < 1000){value;}return value;}},
}

修改后效果如下：

Echarts图表x轴y轴刻度值过长时显示不全(超过一千显示...k)相关推荐

echarts图表x，y轴的设置
xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [{type : 'category', // type:坐标轴类型.// [ default: 'category' ]/*可 ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
echarts柱状图x，y轴对应多条数据(可自定义)
echarts,x,y轴对应多条数据,y轴取反就行先说需求,我做这个图表是多个物流商对应不同月份的数值配置项option option = {tooltip: {trigger: 'axis',a ...
echarts中设置双Y轴左右刻度线一致
echarts中设置双Y轴左右刻度线一致一.效果图二.主要代码一.效果图二.主要代码 this.taskxAxis = []this.taskSeries = [[], []]taskInit ...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
先详细看一下xAxis和yAxis配置的图表效果下图详细的标注了图表中x轴y轴可见的内容说明一下: x轴y轴在echarts配置项里,从内容上来说大体上没有太大区别,x轴能用的配置项y轴基本也可以 ...
echarts 折线图设置y轴最小刻度_Vue 项目如何使用Echarts ，手摸手带你入门
前言最近可视化浪潮越发凶猛但是有些小伙伴们就慌了,觉得自己不是很懂,或者说对里面的参数不是很清楚,所以也就印象也就很模糊那么今天严老湿就带大家好好梳理梳理思路,顺便也带大家写几个Demo 首先得 ...
Echarts去除x轴,y轴网格线,网格区域(背景)
每次写到Echarts时,总会忘记去除x轴,y轴网格线,网格区域(背景)是怎么设置的了,在这里记录一下,有个印象 xAxis : [{type : 'value',splitNumber: 2,sca ...
excel柱状图自定x轴y轴_Excel表格，如何自定义图表中的Y轴数据？，值得收藏
Excel表格,如何自定义图表中的Y轴数据?根据实际工作需要,图表中Y轴和X轴的数据有的时候需要自定义,今天教大家如何更改Y轴的数据~ 工具/材料电脑 Excel表格操作方法 01 选中表格中Y轴 ...

Echarts图表x轴y轴刻度值过长时显示不全(超过一千显示...k)

Echarts图表x轴y轴刻度值过长时显示不全(超过一千显示...k)相关推荐

最新文章

热门文章