echarts 折線斷開顯示

1、利用空值實現

當某數據不存在時（ps：不存在不代表值為 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。

例如，無數據在折線圖中可表現為該點是斷開的，在其它圖中可表示為圖形不存在。

2、利用visualMap實現

　　折線圖如果相鄰的兩個值都是0則不顯示這一段水平折線。

　　分析

　　如果折線圖上的數值為0會在，x軸有一段水平線，如果能將這段隱藏就達到了折線圖切割的效果。
　　echarts中有個折線圖渲染屬性 visualMap， 可以利用這個屬性對折線進行修飾。讓被選中的區間透明就達到切割的目的了。

visualMap: [
    {
        show: false,
        seriesIndex: 0, // 如果有多條折線可利用此屬性區別渲染哪條折線
        dimension: 0, // x軸
        pieces: [{ // 這是需要渲染的折線區間。得到數據后只需要計算出這個區間就可以了
            gt: 6,
            lt: 8
        }, {
            gt: 12,
            lt: 13
        }], 
　　　　　outOfRange: {opacity: 1}, // 區間外渲染
        inRange: {opacity: 0} // 區間內透明，即如果數據區間為0就不顯示
    },
]

例子：

// 如果折線數據是0就不渲染折線
setArrArea: function (bigArr = []) {
    let visualArr = []
    bigArr.forEach((item, index) => {
        let visual = {
            show: false,
            seriesIndex: index, // 這是代表不同折線
            dimension: 0,
            pieces: [],
            outOfRange: {opacity: 1}，
            inRange: {opacity: 0}
        }
        let arr = item.data
        for (let i = 0, len = arr.length; i < len; i++) {
            if (arr[i] === 0 && arr[i + 1] === 0) {
                let data = {
                    gt: i,
                    lt: i + 1
                }
                visual.pieces.push(data) // 需要渲染的區間數組
            }
        }
        visualArr.push(visual)
    })
    return visualArr
},