echarts,两点连线,中间断裂

在echarts中,line其实是连续的,只是给里面的值赋空即不显示,达到仅仅两点连线的显示效果

例如:

1,连续的连线。重点是data里面都有值

var option = {
                xAxis: {
                    type: ‘category’,
                    data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
                },
                yAxis: {
                    type: ‘value’
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: ‘line’
                }]
            };

echarts,两点连线,中间断裂插图1

2, 两点连线。重点:数据有空值

var option = {
                xAxis: {
                    type: ‘category’,
                    data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
                },
                yAxis: {
                    type: ‘value’
                },
                series: [{
                    data: [820, 932, ”, 934, 1290, ”, 1320],
                    type: ‘line’
                }]
            };

echarts,两点连线,中间断裂插图2

其实data更简单的方式就是用逗号隔开即可(推荐)

data: [820, 932, , 934, 1290, , 1320],

3,再一个

var data = [ [ 15, 0 ], [ -50, 10 ], [ ”, 20 ], [ -46.5, 30 ],
                [ -22.1, 40 ] ];

或者

var data = [ [ 15, 0 ], [ -50, 10 ], [ ”, ” ], [ -46.5, 30 ],
                [ -22.1, 40 ] ];

或者(推荐)

var data = [ [ 15, 0 ], [ -50, 10 ], , [ -46.5, 30 ],
                [ -22.1, 40 ] ];

转载于:https://my.oschina.net/hfq/blog/1608997

标签