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

 更新时间:2023年03月19日 15:54:44   作者:月影星云  
这篇文章主要介绍了解决echarts图表y轴数据间隔过大的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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)']
                }
              }
            }
          ],

效果图:

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue el使用el-checkbox-group复选框进行单选框方式

    Vue el使用el-checkbox-group复选框进行单选框方式

    这篇文章主要介绍了Vue el使用el-checkbox-group复选框进行单选框方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue.js基础之监听子组件事件v-on及绑定数据v-model学习

    Vue.js基础之监听子组件事件v-on及绑定数据v-model学习

    这篇文章主要为大家介绍了Vue.js基础之监听子组件事件v-on及绑定数据v-model学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue操作dom元素的3种方法示例

    vue操作dom元素的3种方法示例

    这篇文章主要给大家介绍了关于vue操作dom元素的3种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue项目实战之圆柱状水波效果实现

    vue项目实战之圆柱状水波效果实现

    最近工作中实现的一个效果不错,分享给大家,下面这篇文章主要给大家介绍了关于vue项目实战之圆柱状水波效果实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue/Element UI实现Element UI el-dialog自由拖动功能实现

    vue/Element UI实现Element UI el-dialog自由拖动功能实现

    最近工作上需要在el-dialog基础上进行些功能的改动,下面这篇文章主要给大家介绍了关于vue/Element UI实现Element UI el-dialog自由拖动功能实现的相关资料,需要的朋友可以参考下
    2023-06-06
  • VUEJS 2.0 子组件访问/调用父组件的实例

    VUEJS 2.0 子组件访问/调用父组件的实例

    下面小编就为大家分享一篇VUEJS 2.0 子组件访问/调用父组件的实例。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 修改Vue打包后的默认文件名操作

    修改Vue打包后的默认文件名操作

    这篇文章主要介绍了修改Vue打包后的默认文件名操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue elementui 实现搜索栏子组件封装的示例代码

    vue elementui 实现搜索栏子组件封装的示例代码

    这篇文章主要介绍了vue elementui 搜索栏子组件封装,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • Vue中watch、computed、updated三者的区别及用法

    Vue中watch、computed、updated三者的区别及用法

    这篇文章主要介绍了Vue中watch、computed、updated三者的区别及用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue路由中前进后退的一些事儿

    vue路由中前进后退的一些事儿

    这篇文章主要给大家介绍了关于vue路由中前进后退的一些事儿,文中通过示例代码介绍的非常详细,对大家学习或者使用vue路由具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05

最新评论