GitHub Selected”是我们在GitHub共享高品质新项目的栏目,包含技术性.学习培训.应用性和各种各样有意思的內容。当期强烈推荐阿里巴巴根据业务场景的大数据可视化解决方法——biz charts。

BizCharts是网易根据G2封裝的React图库,具有G2和React的全部优势。现阶段,Bizcharts早已运用于阿里巴巴云.天猫商城.淘宝网.钉钉打卡.飞猪网等诸多繁杂业务场景。它在协调能力.便捷性和多元性层面达到了传统式数据图表和相对高度订制数据图表的业务流程完成。

特性:

根据 G2.React集成化很多统计分析专用工具强劲的拓展工作能力高自定工作能力阿里数据可视化产品-数据可视化优秀案例-第1张图片快速开始:

1.安裝:

npm install bizcharts --save

2.应用:

建立器皿

应用部件转化成数据图表。

引进数据图表必须的部件用部件制造成必须的数据图表把数据图表3D渲染到 mountNode 连接点上import React from 'react';import ReactDOM from 'react-dom';import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';// 数据库const data = [{ genre: 'Sports', sold: 275, income: 2300 },{ genre: 'Strategy', sold: 115, income: 667 },{ genre: 'Action', sold: 120, income: 982 },{ genre: 'Shooter', sold: 350, income: 5271 },{ genre: 'Other', sold: 150, income: 3710 }];// 界定衡量const cols = { sold: { alias: '销量' }, genre: { alias: '游戏种类' }};// 3D渲染数据图表ReactDOM.render((), document.getElementById('mountNode'));

3.转化成数据图表。

阿里数据可视化产品-数据可视化优秀案例-第2张图片别的设计风格:

柱形图阿里数据可视化产品-数据可视化优秀案例-第3张图片折线统计图阿里数据可视化产品-数据可视化优秀案例-第4张图片条形图阿里数据可视化产品-数据可视化优秀案例-第5张图片饼状图阿里数据可视化产品-数据可视化优秀案例-第6张图片点图阿里数据可视化产品-数据可视化优秀案例-第7张图片面积图阿里数据可视化产品-数据可视化优秀案例-第8张图片图表阿里数据可视化产品-数据可视化优秀案例-第9张图片箱形图阿里数据可视化产品-数据可视化优秀案例-第10张图片烛形图阿里数据可视化产品-数据可视化优秀案例-第11张图片热力地图阿里数据可视化产品-数据可视化优秀案例-第12张图片车内仪表盘阿里数据可视化产品-数据可视化优秀案例-第13张图片漏斗图阿里数据可视化产品-数据可视化优秀案例-第14张图片分面图阿里数据可视化产品-数据可视化优秀案例-第15张图片关系图阿里数据可视化产品-数据可视化优秀案例-第16张图片地形图阿里数据可视化产品-数据可视化优秀案例-第17张图片

评论(0条)

刀客源码 游客评论