v-chart折线图数据改造

事件缘由

事件缘由

最近因为要做的项目当中需要用的折线图, 使用的框架中引用了v-chart, 可是因为后台返回的数据格式和 v-chart 所需的数据格式不同,出来的折线图和想象中的不一样,所以写了个转换的方法, 因此记录一下

// 后台返回的数据格式为
const retData = [{   id: 1,name: 'x',dataList: [{creatDtm: '2019-08-27 10:00:00',value: '31'},{creatDtm: '2019-08-28 11:00:00',value: '33'},{creatDtm: '2019-08-29 12:00:00',value: '35'},{creatDtm: '2019-08-30 13:00:00',value: '37'}] },{   id: 2,name: 'y',dataList: [{creatDtm: '2019-08-27 10:00:00',value: '20'},{creatDtm: '2019-08-28 11:00:00',value: '22'},{creatDtm: '2019-08-29 12:00:00',value: '24'},{creatDtm: '2019-08-30 13:00:00',value: '26'}] },{   id: 3,name: 'z',dataList: [{creatDtm: '2019-08-27 10:00:00',value: '41'},{creatDtm: '2019-08-28 11:00:00',value: '45'},{creatDtm: '2019-08-29 12:00:00',value: '44'},{creatDtm: '2019-08-30 13:00:00',value: '35'}] }]

而 v-chart 要求的数据格式是: 感觉也不麻烦,所以先简单的做了一下操作

        let columns = ['creatDtm'];let rows = []retData.map(i => {columns.push(i.name)let obj = {}i.dataList.map(j => {obj.createDtm = j.creatDtmobj[i.name] = j.valuerows.push(obj)})})console.log(rows)

结果是:

恩,很好很简单.搞定.

然而看折线图的时候有点傻眼,发现显示的不对劲…

莫名其妙多出来前面的空白日期和莫名其妙的x: 0 y: 0 z: 0
完全不是自己想要的样子…
后来才发现.原来 vchart 需要的数据格式是这样的

 chartData: {columns: ['日期', '销售额','下单率'],rows: [{ '日期': '1月1日', '销售额': 123, '下单率': 10% },{ '日期': '1月2日', '销售额': 1223, '下单率': 10% },{ '日期': '1月3日', '销售额': 2123, '下单率': 10% },{ '日期': '1月4日', '销售额': 4123, '下单率': 10% },{ '日期': '1月5日', '销售额': 3123, '下单率': 10% },{ '日期': '1月6日', '销售额': 7123, '下单率': 10% }]}

…好吧,需要再次处理

        let arr = []rows.reduce(function(initArray,item){let index = item.createDtm;if(initArray[index]){initArray[index].push(item)}else{let items = initArray[index]=[item]arr.push(items)}return  initArray;},[])let newRows = []arr.map(i => {if(i.length > 1) {let obj = {}i.map(j => {obj = {...obj, ...j}})newRows.push(obj)} else {newRows.push(i[0])}})console.log(newRows)

结果是:

效果:

搞定,收工

v-chart折线图数据改造相关推荐

g2.Chart折线图绘制
目录一.官方文档二.g2.Chart折线图绘制 (一).引入g2.js (二).创建 div 图表容器 (三).绘图 1.静态数据 2.动态数据一.官方文档 https://www.yuque. ...
Frappe Chart ——折线图和饼状图
Frappe Chart --折线图和饼状图学习 1.请使用互联网上的图形工具(推荐: Frappe Chart)与以下中国历年GDP数据与世界主要各国军费预算.分别产生 Line chart与Pi ...
C# Chart折线图使用鼠标滚轮放大、缩小和平移曲线方式
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一. Chart折线图使用鼠标滚轮放大.缩小和平移曲线 1.添加鼠标滚轮事件 2.初始化有关参数 3.添加鼠标按下.弹起和移 ...
Axure高保真移动端智能数据监控+用户画像+饼状图+条形图+折线图数据统计+抖音直播app用户数据统计+智慧移动端主播粉丝、评论、播放量大数据统计+套餐购买、续费套餐prd流程
作品介绍:Axure高保真移动端智能数据监控+用户画像+饼状图+条形图+折线图数据统计+直播app用户数据统计+智慧移动端主播粉丝.评论.播放量大数据统计+套餐购买.续费套餐prd流程原型演示及下载 ...
【python科研绘图】双y轴并列柱状图+折线图+数据表结合，并封装图形绘制函数
双y轴并列柱状图+折线图+数据表结合 1. 论文原图 2 数据准备 3 代码实现步骤拆解 3.1 导入第三方库 3.2 数据赋值 3.3 数据绘图 4 函数封装手动反爬虫: 原博地址 https:/ ...
解决echarts的叠堆折线图数据出现坐标和值对不上的问题
说一个小bug,解决echarts的叠堆折线图数据出现坐标和值对不上的问题. 在echarts的叠堆折线图中,有这样的一个问题,从后端请求过来的数据是正确的,但是请求的y轴的值和y轴坐标对不上. 这个 ...
Echarts实现多个Y轴，2个以上不同计量单位的折线图数据横向对比
在做项目时遇到一个需求,要使用主要数据,与气温和降水量做折线图横向对比.这里的问题在于:超过3种计量单位的数据做折线图的话,因为Y轴的计量单位得不同,也就是得有3个以上的Y轴.所以做主要数据和其中一个 ...
echarts 折线图数据太多会导致卡顿_重新定义数据图表，还有比这个更厉害的吗？...
现在很多大厂都有各自的开源项目,有很多已经被用到生产环境中 ,今天分享一个我觉得很有用的开源项目. ECharts 百度开源的项目,一个使用 JavaScript 实现的开源可视化库,可以流畅的运 ...
Pyecharts 折线图与堆积柱状图结合的组合图绘画，折线图数据点在柱状图柱中心
问题/背景最近因科研需要,开始浅浅学习pyecharts,并记录在这个过程遇到的问题以及简单的解决办法. 在使用pyecharts画组合图时遇到了折线图的点无法对准柱状图中心的问题,在网上的文章只找 ...

v-chart折线图数据改造

v-chart折线图数据改造

事件缘由

v-chart折线图数据改造相关推荐

最新文章

热门文章