Gráfico de líneas echarts para lograr el efecto de corte

Descripción de requisitos:

Gráfico de líneas Si los dos valores adyacentes son 0, esta línea horizontal no se muestra.

Análisis

Si el valor en el gráfico de líneas es 0, habrá una línea horizontal en el eje X. Si puede ocultar esta sección, puede lograr el efecto de cortar el gráfico de líneas.
Hay un atributo de representación de mapa de línea visualMap en echarts, puede usar este atributo para modificar la línea. Haga que la sección seleccionada sea transparente para lograr el propósito de cortar.

Configuración global: visualMap es un objeto

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

Single setting-visualMap es una matriz

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

Lograr

Debido a que tengo varias polilíneas, entre bastidores después de que los datos devueltos por la sección de adquisición de la operación de representación piecesse

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;width: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
},

Referencia

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