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

相关文章
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
61 1
|
1月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
257 0
|
2月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
3月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
490 1
微信小程序使用echarts图表(ec-canvas)
|
3月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
3月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
3月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
64 1
|
3月前
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
38 1
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
|
4月前
|
Apache
Axure rp9 引入Echarts图表 |手动引入图表 Apache Echarts
Axure rp9 引入Echarts图表 |手动引入图表 Apache Echarts
292 1

热门文章

最新文章

下一篇
无影云桌面