Echarts折线图如何补全断点以及如何隐藏断点的title

  做报表的时候,尤其是做图表的时候时常会碰到某一记录的值中缺少某个时间段(比如月份或季度)的值,导致图表显示残缺不全,for example:

        

如果照实显示的话确实不太美观(除非贵公司确实需要特别准确的数据除外~),当然我们的客户是做信托的,算钱的系统和时常开会追KPI的时候看报表系统~;给领导写报告图表当然不能太另类~\(≧▽≦)/~,遂业务部门的同学要求我们尽可能在数据准确的情况下将图表做的更美观些些,...吾以为这个貌似难难滴欸。。。。,怎么办。。。。,研究来研究去,之后我们将报表做成了这样纸>>>

        

    感觉挺好的,不知业务的妹纸是否满意(✿◡‿◡)

细看....细看,比如图中34个月与35个月是没有数据滴,哈哈,成功!!

一下分享下我的思路:

        A>首先要取得所有部门的期限内的所有数据(当然这个过程你需要自己码代码获得一份完整的月份数据,要不然你怎么知道记录的断点位置呢,是不?)

        B>然~,整理你的数据,分层是必要的(如果数据库能按按部门分层月份,干嘛还要这么累啊(=@__@=))

        C>再~,两层遍历,等等干什么呢?-->这是要找出断点,并用统一的mark以标示

          (具体就是外层循环月份List,然后遍历所有的按部门归类的部门的月份找出此部门再哪个期限缺值)

        D>然~,看似以上已经找出了断点了,但试想下如果这些断点都是以‘—’补全,图还是会断啊~~~,怎么办;

           啊哈 so easy~ 将此断点补上前后两个值的平均值不就是一条直线啦,啦啦啦~

        E>啦啦啦,搞定\(^o^)/YES!   。。。。,浏览器打开页面~ (⊙﹏⊙)b 为什么为什么为什么还会显示title呢,

           这样会暴露程序猿的审美····,how? 官方API搞定....

直接放代码可能让各位一头雾水,先给一份样例数据方便大家调试:

          

下图是具体代码:

   注:echarts需要的数据样例如19~31注释部分

      37~40行获取limits数据,也就是x轴月份数据

      30~56行处理echarts分层数据(按部门划分)

      62~121行处理断点数据(将已经分层的里面的月份‘—’处理成前后值的平均数,使折线平滑)

          在这个之前需要对月份数据排序(从小到大排序),方法在最下面哈

      至于怎么将断点数据默认不显示,呢,答案很简单->请注意104行里面有个参数:“symbol:'none'”,这是官方API

        如对最后的图表的结构数据不懂,请看这里,看这里:http://echarts.baidu.com/echarts2/doc/example/line2.html

     function generateChart04() {
var detailData = module.page["allFundStatD4s"].detaillist,
legendData=[],//标题名称组
limits=[],//期限
myData={},//系列数据
label={normal:{
show: true,
//position: 'top',
formatter: '{c}%'
}},
seriesData=[];
/**
* A>构建系列结构数据
* B>系列数据格式化和断点处理
* C>图表显示样式处理
*/
/*
* 系列数据样例->
* {"广州管理部":{
* "期限":{1:0.173,6:0.863,9:0.777,12:0.66,36:0.039},#myLimits
* "datas"{"广州管理部",type:"line",data:"(取)期限",
* label:{
* normal: {
show: true,
position: 'top',
formatter: '{c}%'
},
* }
* }
* }
* }
*/
for(var i in detailData){
//如果没有当前legend值,先初始化新建个;如果有,则更新当前期限值
if(!myData[detailData[i].deptName]){
legendData.push(detailData[i].deptName);//放入图表标题数组中
if(limits.indexOf(detailData[i].realTimeLimit)==-1){//不存在
//if(!(limits.includes(detailData[i].realTimeLimit))){
limits.push(detailData[i].realTimeLimit);//放入期限数组中
}
myData[detailData[i].deptName]={};//声明
myData[detailData[i].deptName].myLimits={};//声明
myData[detailData[i].deptName].myLimits[detailData[i].realTimeLimit]=detailData[i].compositeCost;//放入期限
myData[detailData[i].deptName].datas={};
myData[detailData[i].deptName].datas.name=detailData[i].deptName;//当前legend放入名称
myData[detailData[i].deptName].datas.type="line";//当前legend放入类型
myData[detailData[i].deptName].datas.data=[];//先预留,取到所有系列数据后再填入数据
myData[detailData[i].deptName].datas.label=label;//线型预设值
}else{
if(limits.indexOf(detailData[i].realTimeLimit)==-1){//不存在
//if(!(limits.includes(detailData[i].realTimeLimit))){
limits.push(detailData[i].realTimeLimit);//放入期限数组中
}
myData[detailData[i].deptName].myLimits[detailData[i].realTimeLimit]=detailData[i].compositeCost;//放入期限
}
}
limits.sort();//从小到大排序
/**
* 遍历各个legend
* 填补当前legend的节点数据为‘-’(以便后续对此节点补充平均值以使折线不出现明显的断点)
*/
for(var j in myData){
for(var k in limits){
if(myData[j].myLimits[limits[k]]){
myData[j].datas.data.push((myData[j].myLimits[limits[k]]*100).toFixed(2));
//myData[j].datas.data.push(myData[j].myLimits[limits[k]]==-1?0:(myData[j].myLimits[limits[k]]*100).toFixed(2));
}else{
myData[j].datas.data.push("-");
}
} /**
* 中间断点的补全中间断点
*/
//[-,-,0,99,-,5,-,-];
var before=0,after=0,cnode=0,idx=0;
for(var m in myData[j].datas.data){
idx=idx+1;
if(myData[j].datas.data[m]=="-"){
//continue;//返回,进行下一次循环
if(m==0){
continue;
}else{
if(before>0){
cnode=cnode+1;
after=idx-1;
}
}
if(myData[j].datas.data[m]==(myData[j].datas.data.length-1)){
//初始化标记值
before=0;
after=0;
cnode=0;
}
}else{
if(cnode==0){
before=idx-1;//当前数据的下标的位置
after=idx-1;//当前数据下标的位置
}else{
after=idx-1;
cnode=cnode+1;
for(var n=1;n<cnode;n++){
//myData[j].datas.data[before+n]=(Number(myData[j].datas.data[before])+(myData[j].datas.data[after]-myData[j].datas.data[before])/cnode*n).toFixed(2);
myData[j].datas.data[before+n]={name:limits[before+n]+ "个月", symbol:'none', value:(Number(myData[j].datas.data[before])+(myData[j].datas.data[after]-myData[j].datas.data[before])/cnode*n).toFixed(2)};
}
cnode=0;
before=idx-1;
}
if(!(myData[j].datas.data[Number(m)+1])){//下一个节点是否存在
//存在"-":continue;
//存在number: //初始化标记值
before=0;
after=0;
cnode=0;
}
}
}
seriesData.push(myData[j].datas);
} //X轴数据添加后缀
for(var l in limits){
limits[l]=limits[l]+"个月";
}
var myChart = echarts.init(document.getElementById('chart4'),'macarons');
option = {
title : {
text: '按部门期限分布',
x:'center',
y:'20px',
position:'top'
},
grid:{
y:'80px', //直角坐标系内绘图网格左上角纵坐标,默认值60
x:'150px',
x2:'1%',
y2:'9%'
},
tooltip : {
trigger: 'axis',
formatter:function(params)
{
var relVal;
if (Array.isArray(params)) { //显示各项数据时,params为数组
relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '"></span>'
relVal += params[i].seriesName + ' : ' + params[i].value+"%";
}
} else { //显示平均数时,params为对象
relVal = params.name;
relVal += '<br/>' + params.seriesName + ' : ' + params.value+"%";
}
return relVal;
} },
legend: {
data: legendData,//['资金成本','指导价'],
y:"center",//y:'20px;',
x:"left",
orient:"vertical"
},
toolbox: {
show : true,
// orient:"vertical",
feature: {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true, backgroundColor:'transparent'}
}
},
xAxis:{
/* type: 'category', */
position:'right',
data: limits,
boundaryGap: true,
axisLabel:{
interval:0,
rotate:45,//倾斜度 -90 至 90 默认为0
},
},
yAxis: {
type: 'value',
boundaryGap: [0.3, 0.3],
scale: true,
axisLabel: {
//formatter: '{value}%'
formatter: function (value, index) {
if(value.toString().length>5){
return Number(value.toFixed(5))+"%";
}else{
return value+"%";
} }
}
},
series :seriesData,
};
myChart.setOption(option);
}
     //数组按按数字从小到大排序
function (val, nextVal) {
return val-nextVal;
}

        ....=========啦啦啦啦~啦啦啦~( ̄▽ ̄~)(~ ̄▽ ̄)~=========....

Echarts折线图表断点如何补全的更多相关文章

  1. echarts 纵坐标数字太长显示补全,以及文字倾斜显示

    如上数字太长,显示补全,以及x坐标的月份当数量大的时候也会显示补全: x可以调节纵坐标label的宽度 y2可以调节横坐标label的高度 grid: { x: 100, //默认是80px y: 6 ...

  2. ECharts数据图表系统? 5分钟上手!

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  3. IntelliJ IDEA 设置代码提示或自动补全的快捷键 (附IntelliJ IDEA常用快捷键)

    修改方法如下: 点击 文件菜单(File) –> 点击 设置(Settings- Ctrl+Alt+S), –> 打开设置对话框. 在左侧的导航框中点击 KeyMap. 接着在右边的树型框 ...

  4. Echarts数据可视化visualMap,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  5. Echarts数据可视化dataZoom,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  6. Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  7. echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等

    这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...

  8. 自动补全、回滚!介绍一款可视化 sql 诊断利器

    Yearning简介 ================= Yearning MYSQL 是一个SQL语句审核平台.提供查询审计,SQL审核等多种功能,支持Mysql,可以在一定程度上解决运维与开发之间 ...

  9. Oracle补全日志(Supplemental logging)

    Oracle补全日志(Supplemental logging)特性因其作用的不同可分为以下几种:最小(Minimal),支持所有字段(all),支持主键(primary key),支持唯一键(uni ...

随机推荐

  1. Android布局方式

    1. LinearLayout(线性布局)     android:orientation="vertical"    android:layout_width="wra ...

  2. 脑洞大开--一条项目中常用的linux命令引发的经典算法题

    小时候家里定了<读者>的月刊,里面记录一个故事:说有有个偏僻的乡村一日突然来了一个美女,她携着万贯家财子女在当地安家落户,成了当地的乡绅.她让她的子女世世代代的保守这个秘密,直到这个秘密不 ...

  3. 基于java.util.logging实现轻量级日志记录库(增加根据当前类class初始化,修复线程池模型(javaEE)下的堆栈轨迹顺序与当前调用方法不一致问题)

    前言: 本章介绍自己写的基于java.util.logging的轻量级日志记录库(baseLog). 该版本的日志记录库犹如其名,baseLog,是个实现日志记录基本功能的小库,适合小型项目使用,方便 ...

  4. java音视频编解码问题:16/24/32位位音频byte[]转换为小端序short[],int[],以byte[]转short[]为例

    前言:Java默认采用大端序存储方式,实际编码的音频数据是小端序,如果处理单8bit的音频当然不需要做转换,但是如果是16bit或者以上的就需要处理成小端序字节顺序. 注:大.小端序指的是字节的存储顺 ...

  5. Jquery操作Table

    Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...

  6. Javascript中的数组去重-indexof方法

    在Javascript中,有时我们会用到数组去重.我在这里给大家介绍一下本人认为最简单实用的一种方法-indexOf()去重. var arr = [1,1,1,2,2,2,3,3,4,5,6,2,1 ...

  7. html5中cookie介绍,封装以及添加,获取,删除

    cookie是储存在用户本地终端上的数据. 在我们登陆网站时有记录密码,也有时间限制比如说7天,5天等等这都是我们利用cookie来写的, 这就是利用了cookie的会话周期,但cookie同时又是不 ...

  8. 基于C#的Appium自动化测试框架(Ⅰ)

    因为工作原因,使用的编程语言都是C#,但是国内相应的Appium资料少得可怜,Java版本的Appium也考虑过,但是奈何自己搞不定Eclipse这个编译环境[说白了就是因为懒-- 无意中看到了外面的 ...

  9. Java使用条件语句和循环结构确定控制流

    与任何程序设计语言一样,Java使用条件语句和循环结构确定控制流.本文将简单讲解条件.循环和switch. 一.块作用域 块(block),即复合语句.是指由一对大括号括起来的若干条简单的Java语句 ...

  10. noip借教室 题解

    题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自然 ...