解決echarts圖表y軸數(shù)據(jù)間隔過大的問題

更新時間：2023年03月19日 15:54:44 作者：月影星云

這篇文章主要介紹了解決echarts圖表y軸數(shù)據(jù)間隔過大的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

echarts圖表y軸數(shù)據(jù)間隔過大的問題

1、如圖所示，echarts圖表y軸數(shù)據(jù)間隔過大，前面幾個顯示正常，最后一個值變得很大，造成頁面特別難看

在這里插入圖片描述

2、解決辦法：

在yAxis中axisLabel設(shè)置如下，可以根據(jù)自己的需求截取幾位小數(shù)點

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

echarts圖表Y軸最小間隔值改為1

數(shù)據(jù)可視化運用更加廣泛，官方提供的組件也能支持大部分?jǐn)?shù)據(jù)展示的需求；

今天這里來介紹其中一個樣式功能；更改Y軸最小間隔值為1；

代碼如下：

在yAxis中添加 minInterval:1,

yAxis: [
            {
              type: 'value',
              minInterval:1,
              axisLine: {
                show: false,
                lineStyle: {
                  type: 'solid',
                  color: '#5A5A5A',//左邊線的顏色
                  width: '1'//坐標(biāo)線的寬度
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#5A5A5A',//坐標(biāo)值得具體的顏色
 
                }
              },
              axisTick:false,
              splitLine: {  //坐標(biāo)軸在grid區(qū)域中的分隔線（網(wǎng)格中的橫線）
                show: true,
                lineStyle: {
                  color: ['#5A5A5A'],
                  width: 1,
                  type: 'dashed',
                }
              },
              splitArea: {//坐標(biāo)軸在grid區(qū)域中的分隔區(qū)域（間隔顯示網(wǎng)格區(qū)域）
                interval: 1, //顯示間隔的規(guī)律
                show: true,
                areaStyle: {//分隔區(qū)域的樣式
                  color: ['rgba(255,255,255,0.03)', 'rgba(255,255,255,0)']
                }
              }
            }
          ],

效果圖：