カット効果を達成するためのecharts折れ線グラフ

要件の説明：

折れ線グラフ隣接する2つの値が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;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
},

参考資料

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