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
},