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


先上图

echarts图表断点连线的几种解决方案_第1张图片

                                            图一

echarts图表断点连线的几种解决方案_第2张图片

                                                图二

可以看到,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轴未设置数据的地方,如果想显示日期+该日无数据的提示框就很难做到了,因为该处是没有节点存在的。

你可能感兴趣的:(前端学习)