解决给echarts的数据添加null，线断断续续问题

最新推荐文章于 2022-02-14 14:15:14 发布
最新推荐文章于 2022-02-14 14:15:14 发布
阅读量2.7k 收藏 5
点赞数 1
分类专栏： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y_shihao/article/details/109517751
版权

需求：

几只不同基金，需要画图比较，但是给的值的日期不是连续的，如
A：[8/3,8/4,8/6,…11/2]
B：[8/4,8/5,…11/2]

因为后台没有做补全处理，也没要求将缺少数据补全为前一天有数据的日期，所以就给数据填充null，但是画出来的图为不连续的在这里插入图片描述

解决方法

为了解决这个问题，在echarts中找到了connectNulls这个属性，发现它能连接空数据
在这里插入图片描述
所以只需要在series中设置它为true就能连接

series:[
	{
		connectNulls: true,
	}
]

设置后，如图
在这里插入图片描述

YoungShiHao
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决JSON数据因为null导致数据加载失败的方法
01-20
一、首先分析问题： 使用NSJSONSerialization或者AFN框架的AFHTTPSessionManager（底层也是NSJSONSerialization）将NSData数据转化成OC对象，有时会出现URL正确，加载数据任然会报错： reason: '-[NSNull length]: unrecognized selector sent to instance 分析原因发现，转化出来的OC对象中含有null.所以，NSNull没有length方法，所以会报找不到方法错误。 二、解决办法：将”null”替换成“ ”。      1.先将NSData数据转化成NSString；
ehcarts折线图某点没数据设置该点处的连接断开，以及如何让x轴和y轴的值一一对应上（如x轴有2015年，但是后端返回的数据里2015年的值为Null,导致数据出现错位的情况）
weixin_44229267的博客
03-16 626
话不多说，直接上代码 1、首先要确保后台传过来的数据类型是一一对应形式的，如下所示（其中年份2010对应的是x轴数据，：后面的值是x轴的2010年对应的y轴某值） { 2010: "320" 2011: "332" 2012：null, 2013: "334" 2014： "390" 2015: 330 2016: "320" } 2、然后用object.entries（）做类型转换，转换成如下结构 [ ["2010", 320]
echarts的数据是null,折线图断线，连不起来
while(life)++；
03-08 8298
数据是Null的时候，折线图断断续续的， 想要连起来，有个属性:connectNulls,设置为true，为空值时，不会断线了。 这个属性写在series中： option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series:
echarts折线图，解决断点问题
dandan__666的博客
02-14 3849
echarts折线图如果后台返回的数据为null或者非法时，折现会出现断裂情况， 解决办法非常简答，只需要在serise内增加一个属性connectNulls，并设置为true即可 series: [ { data: [820, 932, 901, 934, 1290, null, 1330, 1320], type: 'line', connectNulls:true, smooth: true } ] ...
echarts折线图无数据断开解决方法
素味平生的博客
06-19 7087
示例： 解决方法：series的connectNulls属性支持连接空值
Echarts折线图遇到null值，段点怎么相连？
weixin_42266130的博客
08-26 3870
使用Echarts的时候，由于其中一个折现图y轴数据为NULL，出现了段点导致无法连接，通过查阅Echarts文档，在series加上connectNulls: true就可以了，如以下代码。 series: [ { name: "实况", data: [], type: "line", smooth: true, color: "#ff6000", connectNulls: true }, { name: "预报", data.
echarts总结
weixin_42979149的博客
11-16 9006
connectNulls 折线图连接空数据 connectNulls: true 折线图连接空数据，默认是false，不连接，就会出现中间断开的情况，如图 设置connectNulls: true 折线图设置线宽 折线图设置线宽 ，下面这个设置不起作用 lineStyle:{ width: 20 }, 要用 lineStyle:{ normal:{ width: 5 } .........
ECharts 折线图使用series.connectNulls实现断点连接空数据
旭东怪的博客
10-12 6579
1 使用详解 series.connectNulls 说明：是否连接空数据。 2 原始效果图 3 实现代码（断点连接空数据） <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // ..
echarts 折线图 x轴为时间轴
热门推荐
qq_29381609的博客
01-13 2万+
因为最近项目做监控图，需要折线图的x轴是时间轴，之前不了解，解决以后来写个总结吧。 echart 中的折线图，x轴的类型，官方文档为: 其他类型，官网有例子，这里我只写一下time类型的 结果： 源代码：（此处放置了我写的整个方法，因为懒，可以忽略text参数，主要说下data参数） 因为x轴 类型设置为time ,所以data 的格式需要处理为固定格式:...
django 解决自定义序列化返回处理数据为null的问题
09-16
主要介绍了django 解决自定义序列化返回处理数据为null的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决微信小程序引用echarts视图模糊的问题
03-29
在小程序项目中需要...const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr //解决小程序视图模糊的问题，必写 }); canvas.setChart(chart); var checkName
Mybatis查不到数据查询返回Null问题
09-01
mybatis突然查不到数据，查询返回的都是Null，但是 select count(*) from xxx查询数量，返回却是正常的。好多朋友遇到这样的问题不知所措，下面小编通过本教程简单给大家说明下
echarts去掉折线图中的横线
Y_shihao的博客
01-11 7476
需求 将echarts顶部的横线去掉 解决方法 一开始的思路是想着找配置如何单独的把线删除掉，发现自己并没有找到，后面想到可以通过设置横线的颜色与背景色一样达到删除的效果 // 给splitLine 的lineStyle的color属性提供一个数组 // 想哪条线消失就哪条线与背景色相同，这样就能达到删除的效果 yAxis: [ splitLine: { lineStyle: { // 使用深浅的间隔色
echarts-柱状图实现正负坐标倒圆角设置及bar颜色设置
Y_shihao的博客
12-03 2260
需求 1.每根bar正负坐标倒圆角 2.每根bar颜色渐变 3.每根bar透明度不同，当factor_rank这个值小于50%，则透明度为0.4 实现 主要是根据series-bar中的data它能进行个性化定义，所以我们可以在我们传给echarts的data添加itemStyle这个属性,这样我们每一根bar都有自己独有的样式 const obj ={ name: "动量", value: 20, // echarts对个别数据记性个性
实现x轴第一个点左对齐，最后一个点右对齐
Y_shihao的博客
11-05 2223
效果如图 方法： 在formatter函数中，利用空格进行占位的操作 xAxis: { axisLabel:{ showMaxLabel:true, // 展示最大值 showMinLabel:true, // 展示最小值 formatter: function(value,index){ if(index === 0) { return ' ' + value; } if(index === data.length -1) { return
实现y轴文字左对齐
Y_shihao的博客
12-02 2209
效果 代码 //在yAxis的axisLabel属性中设置textStyle axisLabel: { textStyle: { align:'left',//设置左对齐 baseline:'middle' }, margin:45, //刻度标签与轴线之间的距离 }, ...
实现x轴两端对齐操作
Y_shihao的博客
11-29 1502
想要实现的效果 x轴的第一个和最后一个两端对齐 解决方法 具体的做法是利用formatter函数 动态运算拿到最后一个值 进行处理 具体代码如下 利用空格进行占位 骚操作 formatter: function(value, index) { let seriesData = data[0].data; if (index === 0) { return ` ...
vue 中 给 echarts 添加异步加载
最新发布
05-31
在 Vue 中给 Echarts 添加异步加载，可以按照以下步骤进行操作： 1. 安装 Echarts： ``` npm install echarts ``` 2. 在 vue 文件中，引入 Echarts 组件： ``` import echarts from 'echarts' ``` 3. 在 data ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值