前端 - echarts断点数据如何不连接，保持其真实性？

Question

想通过坐标的形式标记点，但是断了的地方不要自动连接点，比如Mon和Wed不应该连接起来，因为Tue没有对应值

option = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'value'    },    series: [{        data: [['Mon',150], ['Wed',150]],        type: 'line',    }]};

使用了connectNulls设置为false也不可以
不知道有没有什么设置可以达到这样的效果，还是必须手动补充null值
因为实际情况下横坐标是以秒为单位的时间戳，每一秒对应一个数据值，如果手动补充null值，效率有点低

Answer 1

ECharts 是一个使用 JavaScript 实现的开源可视化库，用于生成各种类型的图表。对于你提出的问题，即如何在 ECharts 中显示断点，保持数据的真实性，并且不希望断点自动连接，你可以通过以下方式来实现：

1. 设置 connectNulls 为 false:

* `connectNulls` 属性决定了是否将断点连接起来。当你设置为 `false` 时，断点将不会自动连接。

2. 处理数据中的缺失值:

* 对于缺失的数据值，你可以选择在数据中直接表示为 `null`，或者在数据中标记为某个特定的值（例如 -1 或 NaN）。这样 ECharts 就会知道这是一个缺失的值，而不是一个真实的数据点。

3. 调整图表的类型:

* 你现在使用的是折线图 (`line`)。如果你希望显示断点，并且不希望它们连接，你可以考虑使用散点图 (`scatter`) 或柱状图 (`bar`)。这两种图表类型更适合表示单个的数据点，而不是连续的线条。

4. 使用 symbol 和 symbolSize 属性:

* 对于散点图或柱状图，你可以使用 `symbol` 和 `symbolSize` 属性来控制点的样式和大小。这样可以在视觉上更清晰地表示数据点的存在或缺失。

5. 调整 xAxis 的类型:

* 你现在使用的是类目轴 (`category`)。如果你的横坐标是时间戳，并且你希望每一秒都有对应的数据点，那么你可能需要使用数值轴 (`value`) 并设置合适的间隔。

下面是一个修改后的代码示例，展示了如何实现这些设置：

option = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'value'    },    series: [{        data: [null, null, ['Wed', 150], ['Thu', 150]], // 表示 Tue 和 Wed 之间有缺失值        type: 'scatter', // 使用散点图来表示数据点        symbol: 'circle', // 使用圆形符号表示数据点        symbolSize: 10, // 设置符号的大小        connectNulls: false // 不连接断点    }]};

这个示例中，我使用了散点图 (scatter) 来表示数据点，并且通过设置 connectNulls: false 来确保断点不会自动连接。我还使用了 symbol 和 symbolSize 属性来改进视觉效果。