【echarts3】 折線圖我踩過的那些坑 （tooltip 設置，line 單個點/散點不顯示問題）

echarts 折線圖小技巧

echarts 折線圖功能豐富且官方文檔詳細易懂，上手比較容易，這篇文章將分享一些項目中踩過的坑，示例主要以多條曲線爲主，對你們完成一些 曲線、tooltip 和 markline 的展現及交互有所幫助

基本使用

echarts文檔 寫得很是詳細、清晰，官方示例也很豐富，gallery 中還有不少功能更強大的示例

tooltip篇

echarts 的 tooltip 是很強大友好的，樣式優雅，內容能夠自定，還能夠經過配置項設定內容格式，結合 API[5] 綁定事件

要在圖表中添加 tooltip，只須要增長如下配置項

tooltip: {
    trigger: 'axis'
},

咱們接下來一塊兒看看 tooltip 的幾個簡單的配置（具體說明請參考官方文檔）：

tooltip: {
    trigger: 'axis', //座標軸觸發，可設爲 item 數據項圖形觸發
    confine: true, //將 tooltip 框限制在圖表的區域內，在移動端開發時很是有用
    // position 能夠本身設定 tooltip 的位置，下面例子是在老版本 echarts 不支持 confine 屬性時寫的一個當提示左側超出畫布時的限制函數
    position: function(point, params, dom, rect, size){
        if(dom.contentSize.width+20>point[0]){ //tooltip寬度 + 20 大於鼠標橫向位置時，強制避免提示超出左側畫布
          return {left: 10, top: point[1]}
        }
    },
    // formatter 設置提示的文字內容（須要改變樣式可經過 rich 富文本實現，見文檔），要在 tooltip 中顯示單位，可經過函數 params 拼字符串加上以下面 % 的單位
    formatter: function(params){
        return params[0].marker+'<br/>'+params[0].seriesName+': '+params[0].value+'%'
    }
},

也可直接設置 formatter: "{b}<br/>{a}: {c}%"

折線單個點不顯示處理

echarts 折線的使用你們能夠直接參考echarts 折線圖，在此很少贅述，下面直接看一下咱們項目中遇到的顯示問題。
因爲 echarts 折線默認標註出與座標刻度對應的折線的點，在折線上有不與座標軸對應的散點（先後值爲空）時，在數據量較少時可直接設置

series: [{
    type: 'line',
    showAllSymbol: true //標註全部數據點
}]

但數據量較大時，這種方式就不適合了，仔細閱讀文檔後找到了如下思路，標註全部數據點後，逐個設置symbolSize的大小，從而實現標註出須要顯示的點

series: [{
    type: 'line',
    showAllSymbol: true //標註全部數據點,
    data:[{
        value: 12,
        symbolSize： 0,
    },{
        value: 12,
        symbolSize： 4,
    }]
}]

項目中能夠根據實際需求寫循環進行設置，對這個問題的說明就到這裏，喜歡的話請關注，點贊，收藏~謝謝閱讀！