var originaldatalist = [
{
name: "周一",
data: [
{
name: "直接访问",
data: 320
},
{
name: "邮件营销",
data: 120
},
{
name: "联盟广告",
data: 220
},
{
name: "视频广告",
data: 150
},
{
name: "搜索引擎",
data: 820
}
]
},
{
name: "周二",
data: [
{
name: "直接访问",
data: 302
},
{
name: "邮件营销",
data: 132
},
{
name: "联盟广告",
data: 182
},
{
name: "视频广告",
data: 212
},
{
name: "搜索引擎",
data: 832
}
]
},
{
name: "周三",
data: [
{
name: "直接访问",
data: 301
},
{
name: "邮件营销",
data: 101
},
{
name: "联盟广告",
data: 191
},
{
name: "视频广告",
data: 201
},
{
name: "搜索引擎",
data: 901
}
]
}
]

转换成

    var datalist = [
{
name: "直接访问",
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: "邮件营销",
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: "联盟广告",
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: "视频广告",
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: "搜索引擎",
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
];

1、使用三层循环

    var yAxis = [];
var datalist = [];
for (var i = 0; i < originaldatalist.length; i++) {
yAxis.push(originaldatalist[i].name);
for (var j = 0; j < originaldatalist[i].data.length; j++) {
//判断是否有值
var tempk = -1;
for (var k = 0; k < datalist.length; k++) {
if (datalist[k].name == originaldatalist[i].data[j].name) {
tempk = k;
}
}
//有值添加无值新建
if (tempk >= 0) {
datalist[tempk].data.push(originaldatalist[i].data[j].data);
} else {
var temp = {
name: originaldatalist[i].data[j].name,
data: [originaldatalist[i].data[j].data]
}
datalist.push(temp);
}
}
}

2、先使用concat扁平化为一个数组,再使用双循环合并同类项

 var yAxis = [];
var datalist = [];
for (var i = 0; i < originaldatalist.length; i++) {
yAxis = yAxis.concat(originaldatalist[i].name);
datalist = datalist.concat(originaldatalist[i].data);
}
for (var i = 0; i < datalist.length; i++) {
var listtemp = [datalist[i].data];
for (var j = i + 1; j < datalist.length; j++) {
if (datalist[i].name == datalist[j].name) {
listtemp.push(datalist[j].data);
datalist.splice(j, 1);
j--;
}
}
datalist[i].data = listtemp;
}

3、先使用concat扁平化,再使用reduce合并同类项

    var yAxis = [];
var datalist = [];
for (var i = 0; i < originaldatalist.length; i++) {
yAxis = yAxis.concat(originaldatalist[i].name);
datalist = datalist.concat(originaldatalist[i].data);
}
var xx = datalist.reduce(function (res, item) {
//findIndex: 传入一个测试条件(函数)符合条件的数组第一个元素位置。
var index = res.findIndex(function (v) {
return v.name == item.name;
});
if (index > -1) {
if (Array.isArray(res[index].data)) {
res[index].data.push(item.data);
} else {
var listtemp = [res[index].data];
listtemp.push(item.data);
res[index].data = listtemp;
}
} else {
res.push(item);
}
return res;
}, []);
datalist = xx;
console.log(yAxis.join(","));
console.log(datalist);

4、先扁平化,后使用哈希(hash)来合并同类项

    var yAxis = [];
var datalist = [];
for (var i = 0; i < originaldatalist.length; i++) {
yAxis = yAxis.concat(originaldatalist[i].name);
datalist = datalist.concat(originaldatalist[i].data);
}

  //用个hash表存一下name在结果里对应的位置,就能将时间复杂度从幂函数降低到线性的时间复杂度
var hashTable = {};
var datalist = datalist.reduce(function (result, _ref) {
var name = _ref.name, data = _ref.data;
hashTable[name] !== undefined ? result[hashTable[name]].data.push(data) : hashTable[name] = result.push({
name: name,
data: [data]
}) - 1;
return result;
}, []);
console.log(yAxis.join(","));
console.log(datalist);

Echart数据转换(水平数据变成垂直数据)的更多相关文章

  1. 将undefault和null的数据转换成bool类型的数据 使用!!

    <script> var o={}; var a=null; console.info(!!o.name); </script> 输出false 此方法是将undefault和 ...

  2. Android中如何将Bitmap byte裸数据转换成Bitmap图片int数据

    Android中如何将Bitmap byte裸数据转换成Bitmap图片int数据 2014-06-11 10:45:14   阅读375次 我们在JNI中处理得到的BMP图片Raw数据,我们应该如何 ...

  3. C# 封装SDK 获取摄像头的水平角度和垂直角度

    最近需要做一个C#版本的控制终端,控制摄像头,获取摄像头的水平角度和垂直角度 获取当前摄像头的角度,需要调用一个名为NET_DVR_GetDVRConfig的bool类型的函数 在C++中,函数定义: ...

  4. 理解水平扩展和垂直扩展 (转载 http://yunjiechao-163-com.iteye.com/blog/2126981)

      当一个开发人员提升计算机系统负荷时,通常会考虑两种方式垂直扩展和水平扩展.选用哪种策略主要依赖于要解决的问题 以及系统资源的限制.在这篇文章中我们将讲述这两种策略并讨论每种策越的优缺点.如果你已经 ...

  5. Web 站点的水平扩展和垂直扩展 (译文)

    当一个开发人员提升计算机系统负荷时,通常会考虑两种方式垂直扩展和水平扩展.选 用哪种策略主要依赖于要解决的问题以及系统资源的限制.在这篇文章中我们将讲述这两种策略并讨论每种策越的优缺点.如果你已经有一 ...

  6. 数据库水平拆分和垂直拆分区别(以mysql为例)

    数据库水平拆分和垂直拆分区别(以mysql为例) 数据库水平拆分和垂直拆分区别(以mysql为例)   案例:     简单购物系统暂设涉及如下表: 1.产品表(数据量10w,稳定) 2.订单表(数据 ...

  7. 第六篇:R语言数据可视化之数据分布图(直方图、密度曲线、箱线图、等高线、2D密度图)

    数据分布图简介 中医上讲看病四诊法为:望闻问切.而数据分析师分析数据的过程也有点相似,我们需要望:看看数据长什么样:闻:仔细分析数据是否合理:问:针对前两步工作搜集到的问题与业务方交流:切:结合业务方 ...

  8. ElasticSearch 学习记录之 分布式文档存储往ES中存数据和取数据的原理

    分布式文档存储 ES分布式特性 屏蔽了分布式系统的复杂性 集群内的原理 垂直扩容和水平扩容 真正的扩容能力是来自于水平扩容–为集群添加更多的节点,并且将负载压力和稳定性分散到这些节点中 ES集群特点 ...

  9. mysql的水平拆分和垂直拆分

    转:http://www.cnblogs.com/sns007/p/5790838.html 1,水平分割: 例:QQ的登录表.假设QQ的用户有100亿,如果只有一张表,每个用户登录的时候数据库都要从 ...

随机推荐

  1. makefile编写规则

    cc = g++ -std=c++11 prom = calc deps = FtTest.h obj = FtTest.o newft.o LIBS = -lgtest_c11 $(prom): $ ...

  2. [ipsec][strongswan] 用strongswan pki工具生成自签名证书

    如题.我在实验环境里,分别要为两个endpoint(T9和T129)生成证书. 证书是如何生成的呢? 证书是由根证书机构签发的.申请证书的人将request提交给根证书机构,然后根证书机构根据requ ...

  3. jQuery:实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容

    实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片 ...

  4. 解决 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 问题

    https://blog.csdn.net/weixin_41196185/article/details/81114226 今天在启动vue项目的时候报了这样一个错误 观察到关键词是 FATAL E ...

  5. Python基础(十一) 类继承

    类继承: 继承的想法在于,充份利用已有类的功能,在其基础上来扩展来定义新的类. Parent Class(父类) 与 Child Class(子类): 被继承的类称为父类,继承的类称为子类,一个父类, ...

  6. mysql----------mysql5.7.11导入sql文件时报错This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled

    1.导入sql文件出现如下错误. [Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in ...

  7. 【2017-05-18】WebForm的Repeater控件及简单控件

    <%@ %> - 这里面写一些声明和引用的 <%  %> - 编写C#代码的 <%= %> - 往界面上输出一个变量的值 <%# Eval("属性名 ...

  8. pypi上传命令

    windows 1.新建一个setup.py文件与你自己写的.py模块放在一个文件夹内 内容: from distutils.core import setup setup( name = " ...

  9. SolrJ的入门

    什么是SolrJ? solrj是访问solr服务的java客户端,提供索引和搜索的请求方法, SolrJ和图形界面操作的区别就类似于数据库中使用jdbc和mysql客户端的区别一样. 我在测试Solr ...

  10. window 系统虚拟机安装mac系统

    前言: 我们用的是虚拟机,物理机安装一是复杂,二是兼容性实在太差,所以不推荐使用,除非你的电脑配置不够.这篇文章很长,如果想安装的话建议收藏,否则你有可能记不住步骤,我尽量缩减步骤,所以如果你想安装黑 ...