echarts图表断点连线的几种解决方案

先上图

                                            图一

                                                图二

可以看到，12号与18号这两天的点连线了，说一下解决方案。

方案一：使用dataZoom（与tooltip结合使用时不建议使用）

ECharts的普通折线图是不能连接不连续点的，但是当加入dataZoom（数据区域缩放）属性就能连接了。

将“show”设置为“false”可以隐藏缩放滚动条：

dataZoom: [
{
    type: 'slider',
    show: false,
    yAxisIndex: [0],
    left: '96%',
    bottom: '5%',
    start: 0,
    end: 100                       
}]

缺点：使用tooltip时，折线图外的那些y轴值为""这种空字符串的值，无法在tooltip上正常展示，全被折线最左端的点屏蔽了，碰到这种情况的朋友应该能理解我说的，这边没有准备复现问题的图片。

方案二：对y轴数据进行编辑

option = {
    title: {
        text: '双数值轴折线',
        subtext: '纯属虚构'
    },
    tooltip: {
        formatter: function(params) {
            return params.seriesName + ' : [ ' + params.value[0] + ', ' + params.value[1] + ' ]';
        }
    },
    legend: {
        data: ['数据1']
    },
    calculable: true,
    xAxis: [{
        type: 'category',
        axisTick: {
            interval: 0
        },
        data: ['2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06', '2016-07', '2016-08', '2016-09', '2016-10', '2016-11', '2016-12']
    }],
    yAxis: [{
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#dc143c'
            }
        }
    }],
    series: [{
        name: '数据1',
        type: 'line',
        data: [
            ['2016-01', 10],
            ['2016-03', 7],
            ['2016-05', 8],
            ['2016-06', 6],
            ['2016-11', 12],
            ['2016-12', 9]
        ]
    }]
};

把以上代码运行后可以看到，图表的断点是连线的，我们碰到的断点无法连线的问题是因为使用了如下数据

series: [{
        name: '数据1',
        type: 'line',
        data: [

            ['2016-01', 10],

            ['2016-02', ""],

            ['2016-03', 7],

            ['2016-04', ""],

            ['2016-05', 8],
            ['2016-06', 6]

        ]

    }]

或者类似这种数据

series: [{
        name: '数据1',
        type: 'line',
        data: [

           10，"",7,"",8,6

        ]

    }]

从这个角度看我们只要在传入数据前将折线图中y轴值为空的数值删除处理就可以使断点连接。

缺点：

当使用tooltip时，我们在y轴未设置数据的地方，如果想显示日期+该日无数据的提示框就很难做到了，因为该处是没有节点存在的。