内容简介:大家好,我是宝器!啰里八嗦开场就不多写了,写这篇文章是最近发现了一款比较好看的可视化工具,想给大家安利一波。直接说名字,G2。
大家好,我是宝器!
啰里八嗦开场就不多写了,写这篇文章是最近发现了一款比较好看的可视化工具,想给大家安利一波。
直接说名字,G2。
啊呸,截错图了,不是G2俱乐部哈。
真的悟空在哪?
G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。 (这里一堆专业介绍名词引用在官网,别问,问就是懒。)
划重点 :用起来简单,可绘制 反应业务的交互式统计图表 。
来点案例?好的,O机宝K。
01
某APP活跃用户分布
实现:
import { Chart } from '@antv/g2';
const data = [
{ type: '未知', value: 654, percent: 0.02 },
{ type: '17 岁以下', value: 654, percent: 0.02 },
{ type: '18-24 岁', value: 4400, percent: 0.2 },
{ type: '25-29 岁', value: 5300, percent: 0.24 },
{ type: '30-39 岁', value: 6200, percent: 0.28 },
{ type: '40-49 岁', value: 3300, percent: 0.14 },
{ type: '50 岁以上', value: 1500, percent: 0.06 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
padding: [50, 20, 50, 20],
});
chart.data(data);
chart.scale('value', {
alias: '销售额(万)',
});
chart.axis('type', {
tickLine: {
alignTick: false,
},
});
chart.axis('value', false);
chart.tooltip({
showMarkers: false,
});
chart.interval().position('type*value');
chart.interaction('element-active');
// 添加文本标注
data.forEach((item) => {
chart
.annotation()
.text({
position: [item.type, item.value],
content: item.value,
style: {
textAlign: 'center',
},
offsetY: -30,
})
.text({
position: [item.type, item.value],
content: (item.percent * 100).toFixed(0) + '%',
style: {
textAlign: 'center',
},
offsetY: -12,
});
});
chart.render();
02
某企业经营现金流
实现:
## 基本上修改图表的数据和格式 在定义一些CSS的样式就可以了
## 其他类似01的实现
const data = [
{ year: '2013', value: -3.1 },
{ year: '2014', value: 0.8 },
{ year: '2015', value: 2.3 },
{ year: '2016', value: 3.5 },
{ year: '2017', value: 5.4 },
];
03
战狼3关注来源
实现:
import { Chart } from '@antv/g2';
const otherRatio = 6.67 / 100; // Other 的占比
const otherOffsetAngle = otherRatio * Math.PI; // other 占的角度的一半
const data = [
{ type: '微博', value: 93.33 },
{ type: '其他', value: 6.67 },
];
const other = [
{ type: '论坛', value: 1.77 },
{ type: '网站', value: 1.44 },
{ type: '微信', value: 1.12 },
{ type: '客户端', value: 1.05 },
{ type: '新闻', value: 0.81 },
{ type: '视频', value: 0.39 },
{ type: '博客', value: 0.37 },
{ type: '报刊', value: 0.17 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
});
chart.legend(false);
chart.tooltip({
showMarkers: false,
});
/*其他基本类似01 02*/
03
动态条形图
当然,还有很多案例:
不必担心不会用,教程真的超A。
为了保证持续而稳定的输出,涛哥开启了视频号100天打卡计划,
每天用视频记录自己的所思所考, 分享各种 黑科技工具 系列等等
尤其开启了 爬虫系列 工具 教程,从入门到入狱 ,目前更新了几十期视频了。
涛哥每天都在给大家分享干货,欢迎大家关注我。
学Python,也学更多黑科技。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 可视化工具不知道怎么选?深度评测5大Python数据可视化工具
- JVM 进阶之路(九):性能监控工具(可视化工具篇)
- 「工具推荐」golang 代码可视化工具 go-callvis
- Docker可视化工具Portainer
- 几款数据可视化的工具介绍
- 强推!十大顶级大数据可视化工具
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。