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 子集的起始值。

echarts 不连续的两点之间连线相关推荐

Unity UGUI中两点之间连线的通用实现
这里实现两控件之间进行连线,线段使用图片完成,主要是涉及到坐标的转换和图片的缩放同时也实现了手指和指定ui控件点之间的连线 using System; using System.Collection ...
JavaScript - demo - 两点之间画线
代码: <html><head></head><body><script>var f;window.onmousedown = functi ...
arcgis两点之间连线_ArcGIS中实现一种流向地图的方法
其实早在2011年,Esri的制图专家Mamata Akella就发表了一篇Blog,介绍在ArcGIS中实现一种流向地图的方法[1],来展示2011年Esri用户大会的参会者来源,如下图所示. 这里 ...
arcgis两点之间连线_使用ArcGIS制作城市关系强度图（附数据下载）
规划或地理等相关专业的同学可能会遇到城市关系强度图的制作.我们主要介绍制图部分,至于城市间关系强度如何计算,请左转自行查文献或相关资料学习. ArcMap中有个XY转线(XY to Line)的GP工 ...
qt 在移动的两点之间连线_几种移动端跨平台技术区别
H5+原生混合开发模式,WebView渲染(Cordova.Ionic.微信小程序.uniapp) 这类app称为混合应用或Hybrid App.(如果一个应用的大多数功能都是H5实现的话叫Web A ...
js 画两点之间的连线
文章目录思路描述根据css3角度旋转两点之间,利用离散的点,一个一个的拼凑案例案例一:CSS3 角度变换案例二:手动添加两点之间的连线思路描述根据css3角度旋转根据两点,计算出两点 ...
在Visio中实现任意两点之间的连线
在Visio中有时候很难实现两点之间的连线,往往连线会胡乱跳转到其他位置,本人在网上查找了各种方法,网上提到最多的方法是取消自动连接,然而本人实验上百次也没什么卵用,连线还是会自动跳转到其他位置.比如 ...
使用二阶贝塞尔曲线画出两点之间的连线
使用二阶贝塞尔曲线画出两点之间的连线二阶贝塞尔曲线公式控制点的位置游戏中需要手动生成多个点来连接两个关卡,以达到更加可视化的目的. 最终效果如图: 二阶贝塞尔曲线公式 B(t) = (1-t)2 ...
两点之间的连线java_java计算图两点之间的路径实例代码
java计算图两点之间的路径总结本文实例为大家分享了java计算图两点之间的所有路径的具体代码,供大家参考,具体内容如下 1.给定图如下: 2.求0到3之间可达的所有路径这里问题就是关于搜索遍历的 ...

echarts 不连续的两点之间连线

echarts 不连续的两点之间连线相关推荐

最新文章

热门文章