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

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

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

image.png



       这个时候就需要将该轴的刻度值除以 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;
      }
    },
}

       修改后效果如下:

image.png

相关文章
|
2月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
55 0
|
4天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
20 0
|
5天前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
8 0
|
5天前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
9 0
|
11天前
|
容器
echarts图表怎样实现刷新功能?
echarts图表怎样实现刷新功能?
|
19天前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
|
23天前
|
JavaScript
Vue引入Echarts图表的使用
Vue引入Echarts图表的使用
|
1月前
|
数据可视化 前端开发
web前端-Echarts-5.3高级可视化和图表组合布局
web前端-Echarts-5.3高级可视化和图表组合布局
|
2月前
使用vue3实现echarts漏斗图表以及实现echarts全屏放大效果
使用vue3实现echarts漏斗图表以及实现echarts全屏放大效果
27 0