echarts折线图实现切断效果

需求描述：

折线图如果相邻的两个值都是0则不显示这一段水平折线。

分析

如果折线图上的数值为0会在，x轴有一段水平线，如果能将这段隐藏就达到了折线图切割的效果。
echarts中有个折线图渲染属性 visualMap， 可以利用这个属性对折线进行修饰。让被选中的区间透明就达到切割的目的了。

全局设置--visualMap是个对象

visualMap:{
        show: false,
        dimension: 0,
        pieces: [{ // 这是需要渲染的折线区间。得到数据后只需要计算出这个区间就可以了
            gt: 6,
            lt: 8
        }, {
            gt: 12,
            lt: 13
        }]
        , outOfRange: {opacity: 1} // 区间外渲染
        , inRange: {opacity: 0} // 区间内透明，即如果数据区间为0就不显示
    }

单个设置 -- visualMap是个数组

visualMap: [
    {
        show: false,
        seriesIndex: 0, // 如果有多条折线可利用此属性区别渲染哪条折线
        dimension: 0,
        pieces: [{ // 这是需要渲染的折线区间。得到数据后只需要计算出这个区间就可以了
            gt: 6,
            lt: 8
        }, {
            gt: 12,
            lt: 13
        }]
        , outOfRange: {opacity: 1} // 区间外渲染
        , inRange: {opacity: 0} // 区间内透明，即如果数据区间为0就不显示
    },
]

实现

因为我有多条折线，在后台返回的数据后操作获取渲染区间 pieces 就可以了

setLineChart: function (list = []) {
    let vm = this
    let dataX = []
    let seriersArr = [
        {
            name: '融资金额系数',
            type: 'line',
            data: []
        },
        {
            name: '融资联控系数',
            type: 'line',
            data: []
        },
        {
            name: '池融资余额系数',
            type: 'line',
            data: []
        },
        {
            name: '信用融资余额',
            type: 'line',
            data: []
        }
    ]
    list.forEach((item, idx) => {
        vm.lineChartPam.forEach((key, index) => {
            let num = ApiUtils.valueToText(item[key], 'money')
            seriersArr[index].data.push(num)
            if (index === 0) {
                dataX.push(item['queryDate'])
            }
        })
    })

    let option = Object.assign({}, vm.optionTpl) // 获取基础echarts模板
    option.xAxis.data = dataX
    option.tooltip = { // 气泡设置如果数据是0就用'--'表示，不为0就保留两位小数加上百分号
        trigger: 'axis',
        axisPointer: {  // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
            let html = params[0].name + "<br>"
            for (let i = 0; i < params.length; i++) {
                // 下面一行时气泡前的小圆点标志
                html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;10px;height:10px;background-color:' + params[i].color + ';"></span>'
                if (params[i].value == 0) {
                    html += params[i].seriesName + ": " + '--' + "<br>"
                } else {
                    html += params[i].seriesName + ": " + params[i].value.toFixed(2) + "%<br>"
                }
            }
            return html
        }
    }
    option.visualMap = vm.setArrArea(seriersArr) // 设置渲染区间
    option.series = seriersArr
    vm.initChart(option)
},

// 如果折线数据是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
},

参考

https://www.echartsjs.com/examples/zh/editor.html?c=line-sections
https://www.echartsjs.com/zh/option.html#visualMap-piecewise.seriesIndex