資訊專欄INFORMATION COLUMN
摘要：折線圖小技巧折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線為主，對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰，官方示例也很豐富，中還有很多功能更強大的示例篇的是很
echarts 折線圖小技巧
echarts 折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線為主，對大家完成一些 曲線、tooltip 和 markline 的展示及交互有所幫助
基本使用echarts文檔 寫得非常詳細、清晰，官方示例也很豐富，gallery 中還有很多功能更強大的示例
tooltip篇echarts 的 tooltip 是很強大友好的，樣式優(yōu)雅，內(nèi)容可以自定，還可以通過配置項設定內(nèi)容格式，結(jié)合 API[5] 綁定事件
要在圖表中添加 tooltip，只需要增加以下配置項
tooltip: {
trigger: "axis"
},
我們接下來一起看看 tooltip 的幾個簡單的配置（具體說明請參考官方文檔）：
tooltip: {
trigger: "axis", //坐標軸觸發(fā)，可設為 item 數(shù)據(jù)項圖形觸發(fā)
confine: true, //將 tooltip 框限制在圖表的區(qū)域內(nèi)，在移動端開發(fā)時非常有用
// position 可以自己設定 tooltip 的位置，下面例子是在老版本 echarts 不支持 confine 屬性時寫的一個當提示左側(cè)超出畫布時的限制函數(shù)
position: function(point, params, dom, rect, size){
if(dom.contentSize.width+20>point[0]){ //tooltip寬度 + 20 大于鼠標橫向位置時，強制避免提示超出左側(cè)畫布
return {left: 10, top: point[1]}
}
},
// formatter 設置提示的文字內(nèi)容（需要改變樣式可通過 rich 富文本實現(xiàn)，見文檔），要在 tooltip 中顯示單位，可通過函數(shù) params 拼字符串加上如下面 % 的單位
formatter: function(params){
return params[0].marker+"
"+params[0].seriesName+": "+params[0].value+"%"
}
},
也可直接設置 formatter: "
{a}: {c}%"
echarts 折線的使用大家可以直接參考echarts 折線圖，在此不多贅述，下面直接看一下我們項目中遇到的顯示問題。
由于 echarts 折線默認標注出與坐標刻度對應的折線的點，在折線上有不與坐標軸對應的散點（前后值為空）時，在數(shù)據(jù)量較少時可直接設置
series: [{
type: "line",
showAllSymbol: true //標注所有數(shù)據(jù)點
}]
但數(shù)據(jù)量較大時，這種方式就不適合了，仔細閱讀文檔后找到了以下思路，標注所有數(shù)據(jù)點后，逐個設置symbolSize的大小，從而實現(xiàn)標注出需要顯示的點
series: [{
type: "line",
showAllSymbol: true //標注所有數(shù)據(jù)點,
data:[{
value: 12,
symbolSize： 0,
},{
value: 12,
symbolSize： 4,
}]
}]
項目中可以根據(jù)實際需求寫循環(huán)進行設置，對這個問題的說明就到這里，喜歡的話請關注，點贊，收藏~謝謝閱讀！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54436.html
摘要：折線圖小技巧折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線為主，對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰，官方示例也很豐富，中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線...
摘要：原來的格式修改為現(xiàn)在的格式篇幅所限，我這里沒有詳細列出來詳細請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。 一.場景 在使用echarts3做圖表的時候，可能會遇到一些特殊的需求： 星期一到星期四這幾個點的折線顯示一個顏色，周五到周日這幾個點的折線顯示另外一個顏色，來起到強調(diào)區(qū)別的作用。 二.效果圖 先看一下效果圖，你會有一個更清晰的認識: showImg(...
摘要：原來的格式修改為現(xiàn)在的格式篇幅所限，我這里沒有詳細列出來詳細請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。 一.場景 在使用echarts3做圖表的時候，可能會遇到一些特殊的需求： 星期一到星期四這幾個點的折線顯示一個顏色，周五到周日這幾個點的折線顯示另外一個顏色，來起到強調(diào)區(qū)別的作用。 二.效果圖 先看一下效果圖，你會有一個更清晰的認識: showImg(...
摘要：問題一個折線圖中有多條折線。通過設置為與后，對軸進行復用，并每次只展示一條折線，這樣能夠較好的展示每個折線的變化趨勢與大致范圍，不過一次看不了多個折線的參考文章文檔配置項文檔折線圖多條折線的時候怎么控制每次只能限制條 問題 一個折線圖中有多條折線。由于折線之間數(shù)值范圍相差較大（折線A范圍[0-50]，折線B范圍[10000-20000]……），如果用單Y軸來表示，折線的變化趨勢不明顯。...
閱讀 1172·2021-11-22 15:22
閱讀 3843·2021-10-19 13:13
閱讀 3590·2021-10-08 10:05
閱讀 3303·2021-09-26 10:20
閱讀 2988·2019-08-29 14:21
閱讀 2197·2019-08-27 10:55
閱讀 1877·2019-08-26 10:31
閱讀 2586·2019-08-23 16:47
