摘要:問題一個折線圖中有多條折線。通過設置為與后,對軸進行復用,并每次只展示一條折線,這樣能夠較好的展示每個折線的變化趨勢與大致范圍,不過一次看不了多個折線的參考文章文檔配置項文檔折線圖多條折線的時候怎么控制每次只能限制條
問題
一個折線圖中有多條折線。由于折線之間數值范圍相差較大(折線A范圍[0-50],折線B范圍[10000-20000]……),如果用單Y軸來表示,折線的變化趨勢不明顯。
解決方案1、最開始想到的是多Y軸方式,每個折線對應一個Y軸
var option = { …… yAxis : [ { name : "A", type : "value", scale : false, show : true, splitLine:{ show:true }, position : "left", }, { name : "B", type : "value", scale : true, show : false, splitLine:{ show:false }, position : "right", }, { name : "C", type : "value", scale : true, show : false, splitLine:{ show:false }, offset: 50, position : "left" }, …… ], series : [ { name:"A", type:"line", yAxisIndex:0, data:AArr, }, { name:"B", type:"line", yAxisIndex:1, data:BArr, }, { name:"C", type:"line", yAxisIndex:2, data:CArr, }, …… ] };
position 坐標軸類型,橫軸默認為類目型"bottom",縱軸默認為數值型"left",可選為:"bottom" | "top" | "left" | "right"
offset Y 軸相對于默認位置的偏移,在相同的 position 上有多個 Y 軸的時候有用。
yAxisIndex 當不指定時默認控制所有縱向類目,可通過數組指定多個需要控制的縱向類目坐標軸Index,僅一個時可直接為數字。第一個Y軸yAxisIndex為0
這樣就可以將多個折線對應多個Y軸。但當Y軸過多時(實際使用時有6條曲線),會顯得頁面太復雜。
2、在方案1的基礎上不顯示Y軸,只顯示折線變化趨勢
var option = { …… yAxis : [ { name : "A", type : "value", scale : false, show : false, splitLine:{ show:false }, position : "left", }, …… ], …… };
show 置為false不展示
每個Y軸都這樣隱藏后,Y軸不再展示,界面只展示折線的變化趨勢。但這樣無法通過Y軸得到每條折線的大概范圍,只能去選擇折線的最高點與最低點來判斷,也不夠直接。
3、每次只展示一條折線
var option = { legend: { x : "center", borderWidth : "1", data:YDescrib, selectedMode: "single", }, calculable : true, xAxis : [ { type : "category", boundaryGap : false, data : xScale } ], yAxis : [ { type : "value", scale : true, show : true, splitLine:{ show:true }, }, ], series : [ { name:"A", type:"line", data:AArr, }, { name:"B", type:"line", data:BArr, }, { name:"C", type:"line", data:CArr, }, …… ] };
selectedMode [ default: true ] 圖例選擇的模式,控制是否可以通過點擊圖例改變系列的顯示狀態。默認開啟圖例選擇,可以設成 false 關閉。除此之外也可以設成 "single" 或者 "multiple" 使用單選或者多選模式。
yAxis scale [ default: false ] 是否是脫離 0 值比例。設置成?true
?后坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。在設置?min?和?max?之后該配置項無效。
通過設置為single與scale:true后,對Y軸進行復用,并每次只展示一條折線,這樣能夠較好的展示每個折線的變化趨勢與大致范圍,不過一次看不了多個折線的……
參考文章ECharts3.0文檔配置項
ECharts2.0文檔
echarts折線圖多條折線的時候怎么控制每次只能限制1條
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/88709.html
摘要:原來的格式修改為現在的格式篇幅所限,我這里沒有詳細列出來詳細請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新,是不是兩條斷線連上了呢。 一.場景 在使用echarts3做圖表的時候,可能會遇到一些特殊的需求: 星期一到星期四這幾個點的折線顯示一個顏色,周五到周日這幾個點的折線顯示另外一個顏色,來起到強調區別的作用。 二.效果圖 先看一下效果圖,你會有一個更清晰的認識: showImg(...
摘要:原來的格式修改為現在的格式篇幅所限,我這里沒有詳細列出來詳細請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新,是不是兩條斷線連上了呢。 一.場景 在使用echarts3做圖表的時候,可能會遇到一些特殊的需求: 星期一到星期四這幾個點的折線顯示一個顏色,周五到周日這幾個點的折線顯示另外一個顏色,來起到強調區別的作用。 二.效果圖 先看一下效果圖,你會有一個更清晰的認識: showImg(...
摘要:折線圖小技巧折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線為主,對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰,官方示例也很豐富,中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線...
摘要:折線圖小技巧折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線為主,對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰,官方示例也很豐富,中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線...
閱讀 2385·2023-04-25 19:27
閱讀 3495·2021-11-24 09:39
閱讀 3911·2021-10-08 10:17
閱讀 3402·2019-08-30 13:48
閱讀 1937·2019-08-29 12:26
閱讀 3127·2019-08-28 17:52
閱讀 3542·2019-08-26 14:01
閱讀 3539·2019-08-26 12:19