echarts断点数据如何不连接,保持其真实性?

想通过坐标的形式标记点,但是断了的地方不要自动连接点,比如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值,效率有点低

阅读 1.4k
avatarAI BotBETA

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

  1. 设置 connectNullsfalse:
* `connectNulls` 属性决定了是否将断点连接起来。当你设置为 `false` 时,断点将不会自动连接。
  1. 处理数据中的缺失值:
* 对于缺失的数据值,你可以选择在数据中直接表示为 `null`,或者在数据中标记为某个特定的值(例如 -1 或 NaN)。这样 ECharts 就会知道这是一个缺失的值,而不是一个真实的数据点。
  1. 调整图表的类型:
* 你现在使用的是折线图 (`line`)。如果你希望显示断点,并且不希望它们连接,你可以考虑使用散点图 (`scatter`) 或柱状图 (`bar`)。这两种图表类型更适合表示单个的数据点,而不是连续的线条。
  1. 使用 symbolsymbolSize 属性:
* 对于散点图或柱状图,你可以使用 `symbol` 和 `symbolSize` 属性来控制点的样式和大小。这样可以在视觉上更清晰地表示数据点的存在或缺失。
  1. 调整 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 来确保断点不会自动连接。我还使用了 symbolsymbolSize 属性来改进视觉效果。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题