echarts中connectNulls的问题 40C

数据中存在多段空数据,但是我的需求是超过7天的空值数据不连接空值点,不超过7天的进行连接。

 option = {
    title: {
        text: '折线图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: [{
                name: '测试',
                icon: 'rect'
            }]
    },
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        name: "日期",
        nameLocation: 'end',
        nameGap: 38,
        boundaryGap: true,
        axisLine: {
            show: false,
            onZero: false
        },
        data: [
            "2016-02-04",
            "2016-02-05",
            "2016-02-06",
            "2016-02-07",
            "2016-02-08",
            "2016-02-09",
            "2016-02-10",
            "2016-02-11",
            "2016-02-12",
            "2016-02-13",
            "2016-02-14",
            "2016-02-15",
            "2016-02-16",
            "2016-02-17",
            "2016-02-18",
            "2016-02-19",
            "2016-02-20",
            "2016-02-21",
            "2016-02-22",
            "2016-02-23",
            "2016-02-24",
            "2016-02-25",
            "2016-02-26",
            "2016-02-27",
            "2016-02-28",
            "2016-02-29",
            "2016-03-01",
            "2016-03-02",
            "2016-03-03",
            "2016-03-04",
            "2016-03-05",
            "2016-03-06",
            "2016-03-07",
            "2016-03-08",
            "2016-03-09",
            "2016-03-10",
            "2016-03-11",
            "2016-03-12",
            "2016-03-13",
            "2016-03-14",
            "2016-03-15",
            "2016-03-16",
            "2016-03-17",
            "2016-03-18",
            "2016-03-19",
            "2016-03-20",
            "2016-03-21",
            "2016-03-22",
            "2016-03-23",
            "2016-03-24",
            "2016-03-25",
            "2016-03-26",
            "2016-03-27",
            "2016-03-28",
            "2016-03-29",
            "2016-03-30",
            "2016-03-31",
            "2016-04-01",
            "2016-04-02",
            "2016-04-03",
            "2016-04-04",
            "2016-04-05",
            "2016-04-06",
            "2016-04-07",
            "2016-04-08",
            "2016-04-09",
            "2016-04-10",
            "2016-04-11",
            "2016-04-12",
            "2016-04-13",
            "2016-04-14",
            "2016-04-15",
            "2016-04-16",
            "2016-04-17",
            "2016-04-18",
            "2016-04-19",
            "2016-04-20",
            "2016-04-21",
            "2016-04-22",
            "2016-04-23",
            "2016-04-24",
            "2016-04-25",
            "2016-04-26",
            "2016-04-27",
            "2016-04-28",
            "2016-04-29",
            "2016-04-30",
            "2016-05-01",
            "2016-05-02",
            "2016-05-03",
            "2016-05-04",
            "2016-05-05",
            "2016-05-06",
            "2016-05-07",
            "2016-05-08",
            "2016-05-09",
            "2016-05-10",
            "2016-05-11"
        ],
        axisLabel: {
            show: true,
            formatter: function (value) {
                return value;
            },
            showMinLabel: true,
            showMaxLabel: true
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '测试',
            type: 'line',
            symbol: "none",
            showAllSymbol:true,
            data: [
                {
                    "value": "67.8100",
                    "symbol": "rect",
                    "symbolSize": 11
                },
                "68.2200",
                "68.1600",
                "68.0700",
                "67.9300",
                "67.9100",
                 null,
                 null,
                 null,
                 null,
                 null,
                 null,
                 null,
                 null,
                 null,
                "68.3300",
                "68.3600",
                "68.3300",
                "68.2400",
                "68.1700",
                "68.0900",
                "68.1700",
                "68.0800",
                "67.9600",
                "67.8700",
                "67.7700",
                "67.7500",
                "67.8400",
                "67.9500",
                "68.0200",
                "68.1500",
                "68.2900",
                "68.3000",
                "68.2300",
                "68.1300",
                "68.0200",
                "68.0100",
                "67.8700",
                "67.6900",
                "67.5400",
                 null,
                 null,
                 null,
                "67.3300",
                "67.2800",
                "67.4400",
                "67.5100",
                "67.5300",
                "67.5200",
                "67.5100",
                "67.6000",
                "67.5400",
                "67.4600",
                "67.3100",
                "67.2400",
                "67.2400",
                "67.2100",
                "67.2200",
                "67.1700",
                "67.2100",
                "67.3700",
                "67.4800",
                "67.6100",
                "67.7200",
                "67.7700",
                "67.7700",
                "67.7800",
                "67.6400",
                "67.6600",
                "67.5900",
                "67.5000",
                "67.4600",
                "67.3700",
                "67.2000",
                "67.1500",
                "67.1100",
                "67.0600",
                "67.1100",
                "67.2400",
                "67.2800",
                "67.2800",
                "67.3500",
                "67.3200",
                "67.1000",
                "67.1000",
                "67.0400",
                "66.9300",
                "66.7400",
                "66.6900",
                "66.6900",
                "66.7400",
                "66.7900",
                "66.7900",
                "66.7100",
                "66.7100",
                "66.8000",
                "66.8600",
                {
                    "value": "68.4700",
                    "symbol": "rect",
                    "symbolSize": 11
                }
            ],
        }
    ]
};

图片说明

10个回答

data处理下,遍历下数据,null不超过7的自己补个数字上去

在出图表前先处理数据,将空数据补全或删除。
关键是判断是否连续空7天以上。是的话删除这段时间的日期和空值,不是的话补全空值,用两边的平均值或随意一边的值代替。
判断连续空值是否7天:弄个循环,估计得两层。我想下。

在图上标识一个默认位置(空值位置),没值得时候就显示到空值位置,遍历补缺!

外层循环日期,判断数值是否空,空的话进内层循环。计数i,记下数值score
内层循环日期,从i开始,判断数值是否空。是空,用j记录空值数量,累加,判断当前连续空值数,j是否大于7,记下结果bool。非空,结束内层。
外层判断bool, 处理空值。

图片说明
没见过这种需求,直接数据抠出来补一条线

在图上标识一个默认位置(空值位置),没值得时候就显示到空值位置,遍历补缺,在图上标识一个默认位置(空值位置),没值得时候就显示到空值位置,遍历补缺,在图上标识一个默认位置(空值位置),没值得时候就显示到空值位置,遍历补缺

自己做一个判断,超过7天的正常为null,不超过7天的将null换为0,这样线就连起来了,当然补其他值也可以

null值以0代替,这样就不会断掉了

这种数据可以在后台用后台语言先处理好,把处理好的直接返回给前台使用就可以了,比在前台处理更方便。

可以在后台进行处理。判断日期是否超过7天,超过的话重新赋值

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用Echarts中的问题
使用Echarts中的问题问题一:IE 9-11中使用Echarts,同时却无法正常显示图表问题二:echatrts兼容IE8 问题一:IE 9-11中使用Echarts,同时却无法正常显示图表 问题一:IE 9-11中使用Echarts,同时却无法正常显示图表 确定已经引入echarts.js 确定元素具有宽高 该元素也被echarts初始化 那么这是为什么呢?是数据没给进去吗? 我采用$....
echarts中tooltip的抖动问题
echarts2.0出现的tootlip的位置问题echart2.0中凡是有tootlip的位置都出现你将鼠标放置图片的右侧的时候,tooltip由于是从右侧飘出,所以会出现一定的抖动。如图: 解决此问题的办法是调整此处的tooltip的位置,在你的echarts2.0中程序中修改position:tooltip : { trigger: 'item',
echarts问题
今天遇到问题:柱状图使用markline用两个xAxis表示起点与终点,从数据库取出两个时间分类为起始时间和终止时间push到数组以后,放到对应xAxis位置上时,发现图画不出来,当只有一组数据时可以画出柱状图,请问该怎么做。如下是代码,以及一组数据时做出的图。rn[img=https://img-bbs.csdn.net/upload/201809/11/1536653331_729715.png][/img][img=https://img-bbs.csdn.net/upload/201809/11/1536653342_740722.png][/img][img=https://img-bbs.csdn.net/upload/201809/11/1536653538_271885.png][/img]
mpvue中使用echarts,echarts文件过大问题
首先安装mpvue-echarts:cnpm install mpvue-echarts --save 然后在组件中引用  import mpvueEcharts from "mpvue-echarts"; 接着引入import * as echarts from "../../static/echarts.min.js"; 一开始我直接把echarts所有的组件引进去了,直接超过了小程序项目大小...
angular中使用echarts (echarts 小入门)
angular + echarts 使用 首先在你的index页面通过script标签把echarts引入到你的项目。(下载和引入方式不限官方包括了官网下载,github,npm下载npm install echarts --save,我这里用的最简单的script标签)。如下代码: <script type="text/javascript"src="vendor/echarts3....
在vue中使用 echarts
1. 安装 cnpm install echarts --save 2. 使用 //main.js import echarts from 'echarts' Vue.prototype.$echarts = echarts //组件 <div :id="['echart-'+item.i]" style="height: 100%">{{item.i}}</di...
Echarts中的折线图使用方法
echarts中的折线图是常用的图形,引用的方式是"> 下面用代码来说明其使用: 1、option的设置:  var option={   title : {    text : getConfig().regionUrl + 'AQI日均变化趋势图',    textStyle:{color: '#333999'},    x : 'center',    y : 20   }
在reactnative中使用echarts
要在 react-native 上使用 echarts 的图表库,目前方法主要是使用 react-native 的 webview 利用网页的形式加载 echarts 的图形。 本项目尽量使用少的代码实现本功能。
echarts中画布的清空
最近做项目的时候,需要用到很多echarts图表类的展示,其中有一点让我困扰很久。 如图所示:刚开始的时候可能需要加载全部的数据,但是当我们选择某一个条件的时候,我们只需要加载这一个条件的数据。 这个时候我们要做的方法有2个(目前我知道的): 1.legend:{ selected:{ '周一':false  }  } 就是在legend中的selected选项,我们把需要显示的设
echarts中toolbox乱码问题
问题描述本地引用的echarts源文件,页面其他部分编码显示正常,唯独toolbox鼠标悬停在上面时提示信息显示乱码。 如图所示: 尝试过的方法 使用sublime text 3,notepad++,记事本更改文件编码为utf-8 引入时,在script标签内加入charset属性<script src='echarts.js' charset='utf-8></script> 解决过程看到了林
echarts中数据的循环
echats中的数据循环 echarts中的xAxis中的data和series中的data都是数组格式,只有知道需要什么类型的数据才能数据异步加载中创建出与之对应的数据。 第一步、第二步没有什么不同,下面以柱状图的数据循环为例 第一步初始化 var myChart = echarts.init(document.getElementById(Chartid));第二步、设置标题、图例、空
echarts中饼状图的配置
label文字的位置调整 echarts的API 中 定义了 label[“position”]属性只有3种: inner/inter , outer , center,并不支持自定义图例偏移,选用outer的话,会默认由饼块中间部分引出图例,只能设置labelLine 的length和length2来微调图例与饼图的距离 此时遇到的问题,待后续完善 ...
在安卓中使用echarts
看见js写得echarts觉得非常的棒,所以尝试把它也搬到安卓中。 首先:把echarts放进assets下如图: 用webview来呈现\界面,这里选择用按钮来显示js部分,因为加载html文件比较慢,如果不用按钮来出发请选择用线程睡两秒等一下。 wb.getSettings().setAllowFileAccess(true); wb.getSettings().setJav
echarts在Java中的应用
如何在Java中使用echarts的图表点击事件功能?
vue中ECharts的使用
最近做的一个项目需要用到一些图表,然后就安装了一下echarts, 安装命令:npm install echarts -S 或 cnpm install echarts -S(后者为国内淘宝镜像) 然后引用:可以在main.js中全局引入 或 按需在单个页面引入(前者会将所有echarts图表打包,导致体积过大,所以一般使用后者) 全局引入: // 引入echarts impor...
echarts中的柱状图使用
echarts中的柱状图的使用方法用代码来说明: 1、option的设置:   option={     title : {      text : '废气总量柱形图',      textStyle:{color: 'black',           fontSize: 19,           fontFamily: 'Arial, Verdana, sans-serif',
vue 中 echarts 的简单使用
首先安装 echarts 依赖 npm install echarts -S 全局引入  main.js // 引入echarts import echarts from 'echarts' 然后更改原型链,这样就可以在全局使用通过this.$echarts来全局使用了 created: function()
Echarts中饼状图的使用
先上效果图: 1.首先去官网下载echarts.min.js,并引入项目 2.为 ECharts 准备一个具备大小(宽高)的 容器 3.js构造饼图,js代码如下: var myChart = echarts.init(document.getElementById('main')); option = { title: {//标题组件 ...
echarts在IE8中的兼容性问题
请问哪个版本的echarts图表兼容IE8啊,看官网上说是支持IE8的,可是在IE8下echarts无法显示出来,下了echarts2的版本,也没办法在IE8中显示,怎么办啊
vue中的Echarts的使用
Echarts是一个将数据可视化以图表的形式展现给用户 1.全局安装 npm install echerts -S 2.在main.js中使用 //引入 import echarts from 'echarts' 将其继承在vue的原型上 Vue.prototype.$echarts = echarts 创建Echarts.vue组件 &amp;lt;template&amp;gt; &amp;lt;di...
ECharts在Android中的使用
集成        在build.gradle中添加架包 compile 'com.github.abel533:ECharts:2.2.7'         从官网中将所需图表打包成js (echarts.min.js)放入 assets下的js包中 将index.html一同放入assets下 饼状图        布局文件            一个简单的web
ECharts在vue中的使用
1、安装 npm install echarts --save 2、引入 import echarts from “echarts”; 3、在html页面上定义 &lt;div id="pie" style="width: 800px;height:800px;"&gt;&lt;/div&gt; 4、初始化 mounted(){ this.pieE=echarts.init(documen...
Echarts中引入中国地图
思考:1、迁徙图实现的第一步是引入中国地图,那如何引入中国地图呢?            2、地图引入后在实现迁徙图的相关动效(这个会在接下来的文章中总结,今天先总结下如何在Echarts中引入中国地图) 一、下载echarts.min.js以及china.js文件 1、echarts.min.js文件下载地址:(下载 4X版本的Echarts文件) 2、china.js文件下载地址:百度...
在vue中引入Echarts
一.初始化Vue的项目 这里使用vue-cli中webpack-simple这个模板初始化项目, 在命令行中以此输入 vue init webpack-simple echarts01 cd echarts01 npm install npm run dev 二.引入Echart包 1. 通过以下命令安装Echarts npm install echarts --save 2. 引入Echa...
echarts中的自定义tooltips
百度的echarts其实已经很强大了,直接配置项中的tooltip.formatter 就可以设置, 模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 ‘axis’ 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不...
vue中echarts的使用
1.安装 echarts 依赖 npm install echarts --save 2.main.js 中引入 echarts 依赖 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 3.封装 echarts 的组件 在一个项目中我们通常会多次用到图表,这里建议先封装成组件再应用; 新建chart.vu...
在react中插入Echarts
在毕业设计中需要用到图表,首先想到的就是百度Echarts,简单的叙述一下怎么插入,其余的全靠个人扩展。 用官方的案例: 首先建立一个组件 import React,{Component} from 'react' export class Waterall extends React.Component{ render(){
在vue中封装echarts
echarts是什么 echarts是一个绘制图表的js库。它的底层是使用canvas实现的。比如下面的这类图表,就是使用echarts实现的。 echarts在web网页中的使用 和其他的js库一样,echarts在网页中使用的时候,需要使用script引入它的js库。 &amp;lt;script src=&quot;echarts.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; e...
Java开发中 Echarts的使用
因为公司需要数据可视化,这里采用Echarts插件。 柱状图是最简单的。 测试echarts var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = {     title: {         text: '进
echarts中渐变色的使用
在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient. 截至目前(2017-10-15), echarts的官方API中都没有对这个API添加说明文档, 故用本篇文章来简略说明其用法.为方便讲解, 先上示例代码:{ type: 'bar', itemStyle: {
echarts中的事件触发(legend)
echarts中,要触发legend中的事件,不同于图表中的事件触发,不能直接myChart.on("click", function (param) {}); 使用如下方式: var ecConfig = require('echarts/config'); myChart.on(ecConfig.EVENT.LEGEND_SELECTED, function (param) {});
echarts在vue中的使用
安装:cmd进入项目根文件夹 cnpm install echarts --savemain.js中全局引入:import echarts from 'echarts'Vue.prototype.$echarts = echarts或者不用在main.js中全局引入,哪个页面使用在哪里引入即可,比如我是在load_ajax.vue这个页面用所以,此页面结构如下:&amp;lt;template&amp;gt;  ...
java中echarts的使用
echarts这个插件解决了用Java语言画曲线图难的问题 1.第一步先从后台传来两个json字符串一个是y轴的数值一个为x轴的数值,如例: [‘老年人’,‘儿童’,‘妇女’,‘高血压’,‘糖尿病’,‘精神病’,‘冠心病’] [0,6,1,7,6,4,4] 2.页面上css中添加 #main{ text-align: center; width: 70%; height:70%; marg...
Echarts中自定义地图
在Echarts中,我们很多时候是只需要自己想要的几个区域的地图,这时候提供的地图就不能满足我们的需求,需要我们自己来构建自己想要的地图。 1、首先我们申明一个json对象 var myjson={"type": "FeatureCollection", "features": [ {"type": "Feature","properties":{"id":"11","name":"
echarts中嵌入地图
你们好,有现在有一个问题,就是在echarts中嵌入自己用arcgis做的地图。rnhttp://www.cnblogs.com/naaoveGIS/ 就是这个博客中的效果,就是具体怎么来做还是有问题,有人做过吗?我用的是arcgis api for javascript
echarts
要求双X轴 并且固定一条X轴可以拖动另一条 rn来对比 对应的两条曲线在不同X坐标 下的情况
【echarts】echarts开发详解
echarts官方文档: http://echarts.baidu.com/doc/doc.html#简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRe...
【echarts】echarts开发流程详解
首先是封装echarts option和echarts series的两个POJO类: EchartsOptions.java package com.hollycrm.hollyuniproxy.opration.svcmonitor.entities; import java.util.ArrayList; import java.util.List; import java.util...
【echarts】echarts图表自适应屏幕
                                                echarts图表自适应屏幕   echarts如何自适应屏幕?只要加上两句话就可以啦!    // 基于准备好的dom,初始化echarts图表 var ch_credit_in_major =echarts.init(document.getElementById('ch_lack_cr...
echarts中legend不显示问题
legend中的data要跟series中的data的name相等 值一样才能显示; 如图所示:
相关热词 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图 c# 验证码图片生成类 c# 再次尝试 连接失败 c#开发编写规范 c# 压缩图片好麻烦 c#计算数组中的平均值 c#获取路由参数