解决echarts图表y轴数据间隔过大的问题

目录
  • echarts图表y轴数据间隔过大的问题
  • echarts图表Y轴最小间隔值 改为1
  • 总结

echarts图表y轴数据间隔过大的问题

1、如图所示，echarts图表y轴数据间隔过大，前面几个显示正常，最后一个值变得很大，造成页面特别难看

2、解决办法：

在yAxis中axisLabel设置如下，可以根据自己的需求截取几位小数点

yAxis: {
    type: "value",
    axisLabel: {
		formatter:function (value, index) {
			return value.toFixed(2);
		}
	}
}

echarts图表Y轴最小间隔值 改为1

数据可视化运用更加广泛，官方提供的组件也能支持大部分数据展示的需求；

今天这里来介绍其中一个样式功能；更改Y轴最小间隔值为1；

代码如下：

在yAxis中添加     minInterval:1,

yAxis: [
            {
              type: 'value',
              minInterval:1,
              axisLine: {
                show: false,
                lineStyle: {
                  type: 'solid',
                  color: '#5A5A5A',//左边线的颜色
                  width: '1'//坐标线的宽度
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#5A5A5A',//坐标值得具体的颜色

                }
              },
              axisTick:false,
              splitLine: {  //坐标轴在grid区域中的分隔线（网格中的横线）
                show: true,
                lineStyle: {
                  color: ['#5A5A5A'],
                  width: 1,
                  type: 'dashed',
                }
              },
              splitArea: {//坐标轴在grid区域中的分隔区域（间隔显示网格区域）
                interval: 1, //显示间隔的规律
                show: true,
                areaStyle: {//分隔区域的样式
                  color: ['rgba(255,255,255,0.03)', 'rgba(255,255,255,0)']
                }
              }
            }
          ],

效果图：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决echarts中横坐标值显示不全(自动隐藏)问题

    echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整. 如下图,当横轴时间为13天时,echarts会自动隔天显示 如果我们想显示全,则需要在xAxis 属性加上axisLabel:{interval: 0} "xAxis":[{"data":["2015-5-13","2015-5-14","2015-5-15","2015-5-16"

  • vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

    代码如下所示: <!-- ! 废话不多说,直接看代码吧 ! --> <template> <div class=""> <div class="chart" ref="ref_chart" style="width:370px;height:250px;"> </div> </div> </template> <script lang=&

  • echarts实现获取datazoom的起始值(包括x轴和y轴)

    我就废话不多说了,大家还是直接看代码吧~ let option = {} //你的echarts图表的配置,这里我就不贴我的了 myChart.setOption(option); //开始 let startValue = myChart.getModel().option.dataZoom[0].startValue; let endValue = myChart.getModel().option.dataZoom[0].endValue; let start = myChart.getM

  • 解决echarts图表y轴数据间隔过大的问题

    目录 echarts图表y轴数据间隔过大的问题 echarts图表Y轴最小间隔值 改为1 总结 echarts图表y轴数据间隔过大的问题 1.如图所示,echarts图表y轴数据间隔过大,前面几个显示正常,最后一个值变得很大,造成页面特别难看 2.解决办法: 在yAxis中axisLabel设置如下,可以根据自己的需求截取几位小数点 yAxis: { type: "value", axisLabel: { formatter:function (value, index) { retu

  • ECharts设置x轴刻度间隔的2种解决方法

    ECharts设置x轴刻度间隔的2种解决方法

    目录 背景 解决方法 方法一: x轴的标签属性axisLabel下利用interval设置间隔 方法二: 为axisLabel. formatters添加回调函数改变标签文字 附:Echarts柱状图x轴间隔显示(显示不全) 总结 背景 最近在写一个echarts数据看板,要在一个页面中展示多张图表,所以留给每张图表的尺寸就很小.这也就使得图表x轴的刻度文字全部挤到一起了,废话不多说,直接上图看效果. 右边的图标就是x轴刻度标签文字被挤到一起了,左边是该过之后的效果. 解决方法 想要达到上面图片

  • 坐标轴刻度取值算法之源于echarts的y轴刻度计算需求

    坐标轴刻度取值算法之源于echarts的y轴刻度计算需求

    目录 前言 算法描述 上代码 代码运行效果 ts版本(2021/3/10补充) 总结 前言 因实习的公司是做大数据的,而我的工作刚好又是需要绘制一些数据图表的.绘制图表有许多现成的组件可以使用,但是要想达到产品所需要的效果,只靠组件内部的一些功能是不太够的.一些细腻的要求必须在掌握组件原理方法的情况下,自己去写算法来完成.例如,本文要说的这个刻度计算算法,开始正文之前,我先描述遇到的问题. echarts自身的刻度计算有时候并不好用,例如有时候你希望让图表只有5条刻度线,即分成4段,echart

  • 基于JavaScript实现数值型坐标轴刻度计算算法(echarts的y轴刻度计算)

    基于JavaScript实现数值型坐标轴刻度计算算法(echarts的y轴刻度计算)

    目录 前言 算法描述 代码 ts版本(2021/3/10补充) 结语 前言 因实习的公司是做大数据的,而我的工作刚好又是需要绘制一些数据图表的.绘制图表有许多现成的组件可以使用,但是要想达到产品所需要的效果,只靠组件内部的一些功能是不太够的.一些细腻的要求必须在掌握组件原理方法的情况下,自己去写算法来完成.例如,本文要说的这个刻度计算算法,开始正文之前,我先描述遇到的问题.echarts自身的刻度计算有时候并不好用,例如有时候你希望让图表只有5条刻度线,即分成4段,echarts提供了一个参数叫

  • 实现ECharts双Y轴左右刻度线一致的例子

    不一致的情况如下图: 修改成一致的情况如下图: 代码如下: yAxis : [ { type : 'value', name : '人数', //splitLine:{show:false}, axisLabel : { formatter: '{value} 个', textStyle:{color: '#A23400'}//#A23400 purple }, axisLine:{ lineStyle:{color:'#A23400',width:'1'} //y轴坐标轴颜色 #A23400

  • 解决echarts图表使用v-show控制图表显示不全的问题

    最近做echarts图表时,因为涉及到使用开关变量控制不同图表的显示隐藏,用 v-if 时会出现没有获取到dom结构而报错,所以改用 v-show,但是 v-show 本身是结构已经存在,当数据发生变化时,结构并未重新渲染,所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况,就像下图: 还折腾了半天,其实就是当数据请求出来后,调用绘制ehcarts时图表的时候,用 Vue.nextTick(function () { // DOM 更新了 }) 主动触发一下图表,使之强制

  • 解决SpringBoot框架因post数据量过大没反应问题（踩坑）

    此处网上最多的做法是需要修改tomcat的参数配置大致如下: <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="2000" redirectPort="8443" URIEncoding="UTF-8" maxThreads="3000" compression="on" compress

  • SpringBoot+ECharts是如何实现数据可视化的

    SpringBoot+ECharts是如何实现数据可视化的

    一.提出任务 查询班级表数据,利用ECharts绘制各班人数柱形图. (一)班级数据 (二)运行效果 二.实现步骤 (一)创建数据库与表 1.创建数据库 - test create database test; 2.创建数据表 - t_class 创建表结构 CREATE TABLE `t_class` ( `id` int(11) NOT NULL AUTO_INCREMENT, `class` varchar(50) CHARACTER SET utf8 COLLATE utf8_gener

  • 基于python的matplotlib制作双Y轴图

    基于python的matplotlib制作双Y轴图

    一.函数介绍 函数:twin()函数 含义:表示共享x轴,共享表示的就是x轴使用同一刻度 二.实际应用 2.1 实验数据展示 数据表的名称:600001SH.xlsx 2.2 代码实现: 文章里使用到了Subplot()函数 # 导入相关数据包 import matplotlib.pyplot as plt import pandas as pd plt.rcParams['font.sans-serif'] = ['SimHei'] # 设置字体 plt.rcParams['axes.unic

随机推荐