導(dǎo)語剧罩，一堆廢話
用echarts繪制走勢(shì)圖時(shí)，你是否也有這樣的煩惱座泳，數(shù)據(jù)的值普遍較大惠昔，但是數(shù)據(jù)間的差值卻微乎其微，此時(shí)默認(rèn)生成的走勢(shì)圖就偏向于一條直線挑势，根本沒有參考意義镇防。
那有啥方法可以使得y軸范圍隨數(shù)據(jù)變化，數(shù)據(jù)線永遠(yuǎn)在圖標(biāo)的中間范圍顯示潮饱，輔助線又能均等分呢来氧。
max+min+interval的方式就能輕松解決該問題，到時(shí)候無論是數(shù)據(jù)一會(huì)是0.003還是3000香拉，你都不用擔(dān)心如何處理圖表范圍的問題啦扬。
最終效果
最終效果.png
正文
-
首先我們還是先去官網(wǎng)考一個(gè)基礎(chǔ)折線圖表
1-基礎(chǔ)折線圖.png -
給折線圖加點(diǎn)自己的數(shù)據(jù)，和自己喜歡的樣式（體現(xiàn)問題）
數(shù)據(jù)相差不到1凫碌，但數(shù)據(jù)普遍大于100時(shí)扑毡，走勢(shì)圖就趨于一條直線，且偏上证鸥，體現(xiàn)不出來數(shù)據(jù)的變化僚楞。體現(xiàn)不了數(shù)據(jù)變化的走勢(shì)圖沒有意義勤晚。
2-增加數(shù)據(jù)和樣式.png
let dateList = ["2021/01/03", "2021/01/04", "2021/01/05", "2021/01/06", "2021/01/07", "2021/01/08", "2021/01/09", "2021/01/10", "2021/01/11", "2021/01/12", "2021/01/13", "2021/01/14", "2021/01/15", "2021/01/16", "2021/01/17", "2021/01/18", "2021/01/19", "2021/01/20", "2021/01/21", "2021/01/22", "2021/01/23", "2021/01/24", "2021/01/25", "2021/01/26", "2021/01/27", "2021/01/28", "2021/01/29"]
// 此處為處理x軸值向中間靠攏枉层，且不被截?cái)嗳郑?qǐng)不要隨意修改空格個(gè)數(shù)
dateList[0] = ' ' + dateList[0];
dateList[dateList.length - 1] = dateList[dateList.length - 1] + ' ';
let dataList= ["109.34", "109.35", "109.36", "109.37", "109.38", "109.39", "109.40", "109.41", "109.42", "109.42", "109.43", "109.44", "109.44", "109.45", "109.46", "109.47", "109.48", "109.49", "109.50", "109.50", "109.51", "109.52", "109.53", "109.54", "109.55", "109.55", "109.49"]
option = {
xAxis: {
type: 'category',
data:dateList,
axisLabel: {
// 此處為處理x軸值只顯示第一個(gè)和最后一個(gè)日期
interval: dateList.length - 2,
textStyle: {
color: '#999',//坐標(biāo)值得具體的顏色
}
},
axisLine: {
show: false,//x軸線隱藏
fontSize: 12,
},
axisTick: {
show: false,//隱藏x軸的標(biāo)點(diǎn)
},
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#999',
},
interval: 'auto',
formatter: function (value, index) {
return value.toFixed(2) + '%';
}
},
// 顯示分隔線
splitLine: {
show: true,
lineStyle: {
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
},
series: [{
data: dataList,
type: 'line',
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: '#fb563a'
},
// 漸變色填充
areaStyle: {
// origin設(shè)置填充起始位置，auto默認(rèn)y=0開始,start則從min處開始
origin: 'start',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fb563a' // 0% 處的顏色
}, {
offset: 1, color: '#fff' // 100% 處的顏色
}],
global: false // 缺省為 false
}
}
}]
};
- 計(jì)算y軸的范圍
上面的圖表因?yàn)閿?shù)值變化太小完全體現(xiàn)不出數(shù)據(jù)的變化趨勢(shì)鸟蜡，所以我們應(yīng)該縮小y軸的范圍膜赃，并且將數(shù)據(jù)線集中在圖標(biāo)中部，而不是偏上揉忘。
3.1. 首先我習(xí)慣應(yīng)用三分原則跳座，如下
3-1-三分原則.png
所以數(shù)據(jù)的最大值max與最小值min之差正好要是一份的值，
yMax = max + (max-min)
yMin = min - (max-min)
// 計(jì)算數(shù)據(jù)最大值和最小值
let minValue = '0'
let maxValue = '0'
let list = dataList.filter(item => (item && item != 'null' && item != 'NaN'))
let precision = 10000 //精度
maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
// 計(jì)算間隔泣矛，返回y軸最大值疲眷，y軸最小值 ，間隔
let getLeftData = (min, max) => {
// 控制分隔條數(shù)您朽，
let diff = max - min
return {
max: max + diff,
min: min - diff,
};
}
let interObj = getLeftData(minValue, maxValue)
3.2. 將計(jì)算出的y軸范圍應(yīng)用于echarts
使用yAxis屬性下的min和max可以設(shè)置范圍
yAxis: {
type: 'value',
// 設(shè)置y軸最大值
min: interObj.min,
// 設(shè)置y軸最小值
max: interObj.max,
...
},
3-2-設(shè)置了y軸范圍.png
-
輔助線平分
現(xiàn)在的圖表還存在輔助線不平分的問題狂丝，可以看到圖表中部的輔助線是平分的，但是y軸最大值和最小值上的輔助線的出現(xiàn)使得上下邊緣的輔助線間隔偏小哗总。
4-邊緣輔助線.png
4.1. 利用splitNumber（無效）
splitNumber:'5'
添加該屬性沒有效果几颜，是因?yàn)槲覀冊(cè)O(shè)置了y軸的max和min，所以splitNumber不起作用
4.2. 使用interval去分隔
interval該方式是通過按設(shè)置的值去切割軸讯屈，如y軸的interval設(shè)置為100蛋哭，則會(huì)將y軸按每份間隔100去分割
故，我們修改一下方法getLeftData 去獲取分隔間隔值
...
let getLeftData = (min, max) => {
// 控制分隔條數(shù)涮母，
let diff = max - min
return {
max: max + diff,
min: min - diff,
// 分割成5等份
interval: (max + diff - (min - diff)) / 5,
};
}
let interObj = getLeftData(minValue, maxValue)
option = {
...
yAxis: {
type: 'value',
// 設(shè)置y軸間隔線
interval:interObj.interval,
// 設(shè)置y軸最大值
min: interObj.min,
// 設(shè)置y軸最小值
max: interObj.max,
...
},
....
};
4-2-interval設(shè)置間隔.png
- 完整代碼
// 準(zhǔn)備日期數(shù)據(jù)
let dateList = ["2021/01/03", "2021/01/04", "2021/01/05", "2021/01/06", "2021/01/07", "2021/01/08", "2021/01/09", "2021/01/10", "2021/01/11", "2021/01/12", "2021/01/13", "2021/01/14", "2021/01/15", "2021/01/16", "2021/01/17", "2021/01/18", "2021/01/19", "2021/01/20", "2021/01/21", "2021/01/22", "2021/01/23", "2021/01/24", "2021/01/25", "2021/01/26", "2021/01/27", "2021/01/28", "2021/01/29"]
// 此處為處理x軸值向中間靠攏谆趾，且不被截?cái)啵?qǐng)不要隨意修改空格個(gè)數(shù)
dateList[0] = ' ' + dateList[0];
dateList[dateList.length - 1] = dateList[dateList.length - 1] + ' ';
// 準(zhǔn)備數(shù)值數(shù)據(jù)
let dataList= ["109.34", "109.35", "109.36", "109.37", "109.38", "109.39", "109.40", "109.41", "109.42", "109.42", "109.43", "109.44", "109.44", "109.45", "109.46", "109.47", "109.48", "109.49", "109.50", "109.50", "109.51", "109.52", "109.53", "109.54", "109.55", "109.55", "109.49"]
// let dataList= ["10.934", "10.935", "10.936", "10.937", "10.938", "10.939", "10.940", "10.941", "10.942", "10.942", "10.943", "10.944", "10.944", "10.945", "10.946", "10.947", "10.948", "10.949", "10.950", "10.950", "10.951", "10.952", "10.953", "10.954", "10.955", "10.955", "10.949"]
// let dataList= ["0.10934", "0.10935", "0.10936", "0.10937", "0.10938", "0.10939", "0.10940", "0.10941", "0.10942", "0.10942", "0.10943", "0.10944", "0.10944", "0.10945", "0.10946", "0.10947", "0.10948", "0.10949", "0.10950", "0.10950", "0.10951", "0.10952", "0.10953", "0.10954", "0.10955", "0.10955", "0.10949"]
// 計(jì)算數(shù)據(jù)最大值和最小值
let minValue = '0'
let maxValue = '0'
let list = dataList.filter(item => (item && item != 'null' && item != 'NaN'))
let precision = 10000 //精度
maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
// 計(jì)算間隔叛本，返回y軸最大值棺妓，y軸最小值 ，間隔
let getLeftData = (min, max) => {
// 控制分隔條數(shù)炮赦，
let diff = max - min
return {
max: max + diff,
min: min - diff,
// 分割成5等份
interval: (max + diff - (min - diff)) / 5,
};
}
let interObj = getLeftData(minValue, maxValue)
option = {
xAxis: {
type: 'category',
data:dateList,
axisLabel: {
// 此處為處理x軸值只顯示第一個(gè)和最后一個(gè)日期
interval: dateList.length - 2,
textStyle: {
color: '#999',//坐標(biāo)值得具體的顏色
}
},
axisLine: {
show: false,//x軸線隱藏
fontSize: 12,
},
axisTick: {
show: false,//隱藏x軸的標(biāo)點(diǎn)
},
},
yAxis: {
type: 'value',
// 設(shè)置y軸間隔
interval:interObj.interval,
// 設(shè)置y軸最大值
min: interObj.min,
// 設(shè)置y軸最小值
max: interObj.max,
axisLabel: {
textStyle: {
color: '#999',
},
interval: 'auto',
formatter: function (value, index) {
return value.toFixed(2) + '%';
}
},
// 顯示分隔線
splitLine: {
show: true,
lineStyle: {
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
},
series: [{
data: dataList,
type: 'line',
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: '#fb563a'
},
// 漸變色填充
areaStyle: {
// origin設(shè)置填充起始位置怜跑，auto默認(rèn)y=0開始,start則從min處開始
origin: 'start',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#fb563a' // 0% 處的顏色
}, {
offset: 1, color: '#fff' // 100% 處的顏色
}],
global: false // 缺省為 false
}
}
}]
};
