折线图 - 断点处理echarts category配置项内容和展示

解决折线图中的断点显示问题: 用虚线连接断点,所以需要写个算法根据前后的值取一个虚拟值,然后用虚线连接。

配置项如下
      var dataArr = [0,0,79,85,0,0,82,78,86];
option = {
    backgroundColor:"#0B1837",
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none',
        },
        textStyle: {
            fontSize: 18,
        },
        formatter: function (params){
            var sname = params[0].seriesName;
            var areaname = params[0].name;
            var val = params[0].value;
            if(window.isNaN(params[0].value)||val==''){
                val = '暂无数据';
            }else{
                val += '万人';
            }
            return areaname+'<br/>'+ sname+ ': ' + val;
        }
    },
    grid: {
        left: '8%',
        right: '0',
        top: '20%',
        bottom: '15%'
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#2d4c99',
                },
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                color: '#ffffff',
                fontSize: 16,
                interval: 0
            },
            data: ['2017.09','2017.12','2018.03','2018.06','2018.09','2018.12','2019.03','2019.06','2019.09'],
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '单位:万人           ',
            nameGap: 20,
            nameTextStyle: {
                color: '#bebebe',
                fontSize: 12,
            },
            min: 75,
            max: 86,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0d2b75',
                    type: 'dashed',
                },
            },
            axisLabel: {
                show: true,
                color: '#ffffff',
                fontSize: 14,
                interval: 0
            },
        },
    ],
    series: [
        {
            type: 'line',
            name: '低保对象',
            lineStyle: {
                color: '#08eaef',
                type: 'solid',
                width: 3,
            },
            symbolSize: 8,
            data: dealnullData(dataArr),
            z: 1,
        },
        // 虚线
        {
            type: 'line',
            // 连接空值点
            connectNulls: true,
            lineStyle: {
                color: '#a5a5a5',
                type: 'dashed',
                width: 2,
            },
            symbol: 'none',
            data: dealnullData(dataArr),
            // data: tabDashedArr,
            z: 0,
        },
    ]
};
// 处理断点的算法
function dealnullData(dataArr) {
    var tabDashed = [];
    var temp='';
    var len = dataArr.length;

    for(var i=0;i<len;i++){
        for(var j=i;j<len;j++){
            if(dealTabData(dataArr[j])!=''){
                temp = dealTabData(dataArr[j]);
                tabDashed[i]=dealTabData(dataArr[j]);
                break;
            }else{
                if(temp!=''){
                    if(j<len-1) {
                        for (var add = 0; add + j < len; add++) {
                            if (dealTabData(dataArr[j + add]) != '') {
                                // tabDashed[i] = (temp + dealTabData(dataArr[j + add])) / 2;
                                tabDashed[i] = '';
                                break;
                            }
                        }
                        break;
                    }else {
                        tabDashed[i] = temp;
                        break;
                    }
                }
            }
        }
    }
    return tabDashed;
}
function dealTabData(obj) {
    if(obj=='0'){
        obj='';
    }
    return obj;
}
    
截图如下