成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【echarts3】 折線圖我踩過的那些坑 （tooltip 設(shè)置，line 單個(gè)點(diǎn)/散點(diǎn)不顯示問題

isaced / 2767人閱讀

摘要：折線圖小技巧折線圖功能豐富且官方文檔詳細(xì)易懂，上手比較容易，這篇文章將分享一些項(xiàng)目中踩過的坑，示例主要以多條曲線為主，對(duì)大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細(xì)清晰，官方示例也很豐富，中還有很多功能更強(qiáng)大的示例篇的是很

echarts 折線圖小技巧

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

基本使用

echarts文檔 寫得非常詳細(xì)、清晰，官方示例也很豐富，gallery 中還有很多功能更強(qiáng)大的示例

tooltip篇

echarts 的 tooltip 是很強(qiáng)大友好的，樣式優(yōu)雅，內(nèi)容可以自定，還可以通過配置項(xiàng)設(shè)定內(nèi)容格式，結(jié)合 API[5] 綁定事件

要在圖表中添加 tooltip，只需要增加以下配置項(xiàng)

tooltip: {
    trigger: "axis"
},

我們接下來一起看看 tooltip 的幾個(gè)簡(jiǎn)單的配置（具體說明請(qǐng)參考官方文檔）：

tooltip: {
    trigger: "axis", //坐標(biāo)軸觸發(fā)，可設(shè)為 item 數(shù)據(jù)項(xiàng)圖形觸發(fā)
    confine: true, //將 tooltip 框限制在圖表的區(qū)域內(nèi)，在移動(dòng)端開發(fā)時(shí)非常有用
    // position 可以自己設(shè)定 tooltip 的位置，下面例子是在老版本 echarts 不支持 confine 屬性時(shí)寫的一個(gè)當(dāng)提示左側(cè)超出畫布時(shí)的限制函數(shù)
    position: function(point, params, dom, rect, size){
        if(dom.contentSize.width+20>point[0]){ //tooltip寬度 + 20 大于鼠標(biāo)橫向位置時(shí)，強(qiáng)制避免提示超出左側(cè)畫布
          return {left: 10, top: point[1]}
        }
    },
    // formatter 設(shè)置提示的文字內(nèi)容（需要改變樣式可通過 rich 富文本實(shí)現(xiàn)，見文檔），要在 tooltip 中顯示單位，可通過函數(shù) params 拼字符串加上如下面 % 的單位
    formatter: function(params){
        return params[0].marker+"
"+params[0].seriesName+": "+params[0].value+"%"
    }
},

也可直接設(shè)置 formatter: "
{a}: {c}%"

折線單個(gè)點(diǎn)不顯示處理

echarts 折線的使用大家可以直接參考echarts 折線圖，在此不多贅述，下面直接看一下我們項(xiàng)目中遇到的顯示問題。
由于 echarts 折線默認(rèn)標(biāo)注出與坐標(biāo)刻度對(duì)應(yīng)的折線的點(diǎn)，在折線上有不與坐標(biāo)軸對(duì)應(yīng)的散點(diǎn)（前后值為空）時(shí)，在數(shù)據(jù)量較少時(shí)可直接設(shè)置

series: [{
    type: "line",
    showAllSymbol: true //標(biāo)注所有數(shù)據(jù)點(diǎn)
}]

但數(shù)據(jù)量較大時(shí)，這種方式就不適合了，仔細(xì)閱讀文檔后找到了以下思路，標(biāo)注所有數(shù)據(jù)點(diǎn)后，逐個(gè)設(shè)置symbolSize的大小，從而實(shí)現(xiàn)標(biāo)注出需要顯示的點(diǎn)

series: [{
    type: "line",
    showAllSymbol: true //標(biāo)注所有數(shù)據(jù)點(diǎn),
    data:[{
        value: 12,
        symbolSize： 0,
    },{
        value: 12,
        symbolSize： 4,
    }]
}]

項(xiàng)目中可以根據(jù)實(shí)際需求寫循環(huán)進(jìn)行設(shè)置，對(duì)這個(gè)問題的說明就到這里，喜歡的話請(qǐng)關(guān)注，點(diǎn)贊，收藏~謝謝閱讀！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54436.html

相關(guān)文章

  • 【echarts3】 折線圖我踩過的那些坑 （tooltip 設(shè)置，line 單個(gè)點(diǎn)/散點(diǎn)不顯示問題

    摘要：折線圖小技巧折線圖功能豐富且官方文檔詳細(xì)易懂，上手比較容易，這篇文章將分享一些項(xiàng)目中踩過的坑，示例主要以多條曲線為主，對(duì)大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細(xì)清晰，官方示例也很豐富，中還有很多功能更強(qiáng)大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細(xì)易懂，上手比較容易，這篇文章將分享一些項(xiàng)目中踩過的坑，示例主要以多條曲線...

    MonoLog 評(píng)論0 收藏0

  • echarts3的折線圖怎么分段顯示不同的顏色

    摘要：原來的格式修改為現(xiàn)在的格式篇幅所限，我這里沒有詳細(xì)列出來詳細(xì)請(qǐng)?jiān)L問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。 一.場(chǎng)景 在使用echarts3做圖表的時(shí)候，可能會(huì)遇到一些特殊的需求： 星期一到星期四這幾個(gè)點(diǎn)的折線顯示一個(gè)顏色，周五到周日這幾個(gè)點(diǎn)的折線顯示另外一個(gè)顏色，來起到強(qiáng)調(diào)區(qū)別的作用。 二.效果圖 先看一下效果圖，你會(huì)有一個(gè)更清晰的認(rèn)識(shí): showImg(...

    J4ck_Chan 評(píng)論0 收藏0

  • echarts3的折線圖怎么分段顯示不同的顏色

    摘要：原來的格式修改為現(xiàn)在的格式篇幅所限，我這里沒有詳細(xì)列出來詳細(xì)請(qǐng)?jiān)L問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。 一.場(chǎng)景 在使用echarts3做圖表的時(shí)候，可能會(huì)遇到一些特殊的需求： 星期一到星期四這幾個(gè)點(diǎn)的折線顯示一個(gè)顏色，周五到周日這幾個(gè)點(diǎn)的折線顯示另外一個(gè)顏色，來起到強(qiáng)調(diào)區(qū)別的作用。 二.效果圖 先看一下效果圖，你會(huì)有一個(gè)更清晰的認(rèn)識(shí): showImg(...

    mumumu 評(píng)論0 收藏0

  • ECharts折線圖多個(gè)折線每次只顯示一條

    摘要：?jiǎn)栴}一個(gè)折線圖中有多條折線。通過設(shè)置為與后，對(duì)軸進(jìn)行復(fù)用，并每次只展示一條折線，這樣能夠較好的展示每個(gè)折線的變化趨勢(shì)與大致范圍，不過一次看不了多個(gè)折線的參考文章文檔配置項(xiàng)文檔折線圖多條折線的時(shí)候怎么控制每次只能限制條 問題 一個(gè)折線圖中有多條折線。由于折線之間數(shù)值范圍相差較大（折線A范圍[0-50]，折線B范圍[10000-20000]……），如果用單Y軸來表示，折線的變化趨勢(shì)不明顯。...

    _DangJin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<