echarts 不连续的两点之间连线

        最近完成一个新需求,两个不连续的点连线。我们知道,echarts图中的曲线,都是基于x轴的连续的y轴的坐标点链接而成,也就是每一个x轴数据对应一个y轴的数据。当前的需求是x轴日期值,y轴数据起始有值,中间全部为null,line图则显示为两个点,现在要求这两个点要连接起来。                数据类型为:

                xdata:["2022-02-01", "2022-02-02", "2022-02-03", "2022-02-04", "2022-02-05"]

                seriesData:"data": [0.35, null, null,null, null, 2.55]

        echarts有一个很好用的配置项能满足这一需求,就是用markline。下面贴出配置项数据,以供参考:

option ={
    "tooltip": {
        "trigger": "axis"
    },
    "legend": {
        "data": [
            "净值"
        ]
    },
    "grid": {
        "left": "3%",
        "right": "4%",
        "bottom": "3%",
        "containLabel": true
    },
    "xAxis": {
        "type": "category",
        "axisLabel": {
            "margin": 20
        },
        "axisTick": {
            "alignWithLabel": true
        },
        "boundaryGap": true,
        "data": [
           "2022-02-01", "2022-02-02", "2022-02-03", "2022-02-04", "2022-02-05"
        ]
    },
    "yAxis": {
        "type": "value",
        "show": true,
        "offset": 15,
        "splitNumber": 5
    },
    "series": [
        {
            "name": "75分位数",
            "type": "line",
            "data": [
               0.35, null, null,null, null, 2.55
               
            ],
             markLine: {
              symbol:'none',
              data: [
                [
                  {
                      "coord": [
                          "2022-02-01",
                          0.35
                      ]
                  },
                  {
                      "coord": [
                          "2022-02-05",
                          2.55
                      ]
                  }
                ]
              ],
              lineStyle: {
                type: "solid",
                width: 2
              }
            }
        },
        
    ]
}

          如果有多条线,则动态计算每一个series 子集的起始值。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要让echarts折线图的线连接,可以使用以下方法: 引用\[1\]中的代码片段显示了一个折线图的配置,其中type属性设置为'scatter',这意味着不显示两点之间的线。如果要显示线段连接,可以将type属性设置为'line'。 引用\[2\]中的代码片段展示了另一种方法,通过在数据中插入空值来实现线段的断开。在数据数组中插入null值,可以在折线图中创建断开的效果。 引用\[3\]中提供了两种方案。方案一是在dataZoom中添加filterMode: 'empty'属性,这样可以过滤掉空值,使得折线图的线段连接。方案二是在y轴设置中添加yAxis: { min:'dataMin', max:'dataMax' },并在数据处理阶段重新绘制图形,从源头避免异常竖线的产生。 综上所述,要让echarts折线图的线连接,可以通过将type属性设置为'line',在数据中插入null值,或者在dataZoom中添加filterMode: 'empty'属性来实现。 #### 引用[.reference_title] - *1* [echarts 折线图 隐藏两点之间的线](https://blog.csdn.net/YHJ_2298/article/details/122362416)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echarts折线图中实现去掉两点间的线段](https://blog.csdn.net/weixin_44496135/article/details/129447389)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Echarts 折线图拐弯处竖线解决办法,Echarts 折线图二次查询出现竖直线解决办法](https://blog.csdn.net/weixin_41346436/article/details/123105315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值