1. 程式人生 > >echarts Y軸資料型別不同怎麼讓折線圖顯示差距不大

echarts Y軸資料型別不同怎麼讓折線圖顯示差距不大

如果希望在同一grid中展示不同資料型別的折線(1000或10%),那麼展現出來的折線肯定顯示差距很大,那麼怎麼讓這兩條折線顯示效果差不多,在之前的專案中碰到了這個問題

每條折線對應的是不同的資料組,即series的資料組,對每個資料組進行排序,求出最大值,然後將這些最大值放在一個數組裡,分別填充到yAixs的max中,這樣就互不影響,文字比較繞,直接上程式碼

eg:

for(var j in this.initVal) {
                    legendData.push(this.initVal[j]);
                    var i = 0;
                    
var newSeriesData = []; //遍歷店鋪彙總資料物件,對本地儲存資料進行遍歷,下拉框陣列與本地資料匹配時 for(var k=0; k<$data.length;k++) { var $obj = this.parameter.dataList.find(obj => { return obj.label === this.initVal[j]; });
if($obj) { var $key = $obj.key; //店鋪彙總資料物件裡是物件,遍歷這個物件 for(var _$key in $data[k]) { if(_$key === $key) { newSeriesData.push($data[k][$key]); i
++; } seriesData[j] = newSeriesData; } } } var sd = JSON.parse(JSON.stringify(newSeriesData)); var max = sd.sort(function(a, b) { return b - a; })[0] + ""; max = (parseInt(max.substring(0, 1)) + 1) + arrPint(max.split(".")[0].length - 1) yAxisData.push({ type: 'value', max: max, axisTick: { show: false }, splitLine: { show: j == 0, lineStyle: { color: '#CCC' } }, axisLabel: { show: false }, axisLine: { lineStyle: { color: '#CCC' } }, }) series.push({ name: this.initVal[j], type: 'line', yAxisIndex: j, data: seriesData[j], itemStyle: { normal: { color: colorList[j], } }, // showAllSymbol:true, }); }

這裡yAixs不再是物件,而是陣列,裡面每一個索引對應一個max