前端数据可视化之AntV的G2Plot、G6、L7入门

最新推荐文章于 2023-05-14 23:15:00 发布

Ashley的成长之路

最新推荐文章于 2023-05-14 23:15:00 发布

阅读量7.9k

点赞数 5

分类专栏：数据可视化文章标签：数据可视化 antV g6 g2Plot L7

本文链接：https://blog.csdn.net/weixin_40297452/article/details/110088737

版权

数据可视化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

AntV 是蚂蚁金服全新一代数据可视化解决方案，AntV 不是一个解决方案，他是一套解决方案，AntV包括以下解决方案

G2：可视化引擎
G2Plot：图表库
G6 : 图可视化引擎
Graphin：基于G6的图分析组件
F2 ：移动可视化方案
ChartCube：AntV 图表在线制作
L7：地理空间数据可视化

因为是为下一个项目做技术调研，所以本文重点介绍项目可能用到的G2Plot、G6、L7 的入门使用

一、G2Plot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
    <title>antV-G2Plot demo</title>
</head>
<body>
    <div id="g2-container"></div>
    <script>
        const { Line } = G2Plot;
        const chartData = [
            { year: 2015, value: 100 },
            { year: 2016, value: 200 },
            { year: 2017, value: 250 },
            { year: 2018, value: 410 },
            { year: 2019, value: 953 },
            { year: 2020, value: 1030 },
            { year: 2021, value: 100 },
        ];
        const line = new Line('g2-container', {
            data: chartData,
            xField: 'year',
            yField: 'value',
        });
        line.render();
    </script>
</body></html>

效果图：

经过看了官方的文档和官方的示例，总结了下，G2Plot的绘图流程如下：

1、引入js库

2、编写渲染容器DOM

3、准备渲染数据

4、获取渲染DOM对象

5、初始化G2Plot绘图对象，配置相关参数

6、调用render完成渲染

二、G6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>antV-G6 Demo</title>
</head>
<body>
    <div id="mountNode"></div>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script>
    <script>
        // 定义数据源
        const data = {
            // 点集
            nodes: [
                {
                    id: 'node1',
                    x: 100,
                    y: 200,
                    label: 'hello',
                    size: 60,
                    labelCfg: {
                        position: 'center',
                        style: {
                            fontSize: 12
                        }
                    },
                    style: {
                        stroke: '#888',
                        lineWidth: 3
                    }
                },
                {
                    id: 'node2',
                    x: 300,
                    y: 200,
                    size: 60,
                    label: 'world'
                },
            ],
            // 边集
            edges: [
                {
                    source: 'node1',
                    target: 'node2',
                    label: '连接线'
                },
            ],
        };
        // 创建 G6 图实例
        const graph = new G6.Graph({
            container: 'mountNode',
            width: 800,
            height: 500,
        });
        graph.data(data);
        graph.render();
    </script>
</body></html>

效果图：

G6的绘图流程如下：

1、引入js库

2、编写渲染容器DOM

3、准备渲染数据

4、获取渲染DOM对象

5、初始化G6绘图对象（如：G6.Graph），配置相关参数

6、调用render完成渲染

三：L7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='https://unpkg.com/@antv/l7'></script>
    <title>antV-L7 demo</title>
    <style>
        body {margin: 0;padding: 0;}
    </style>
</head>
<body>
    <div id="l7-map"></div>
    <script>
        const scene = new L7.Scene({
            id: 'l7-map',
            map: new L7.GaodeMap({
                style: 'dark',
                center: [116.412646, 39.911797],
                pitch: 0,//地图仰角
                zoom: 4,
                token: 'e865388347***********'//换自己的高德key
            }),
        })
        //显示全球发电站
        fetch("https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json")
            .then(res => res.json()).then(data => {
                data.features = data.features.filter(item => item.properties.capacity > 500)//显示发电量大于500的
                const pointLayer = new L7.PointLayer({}).source(data).shape('circle').size('capacity', [0, 10]).color('capacity', ['#0A3663','#1558AC','#3771D9','#4D89E5','#64A5D3','#72BED6','#83CED6',
                    '#A6E1E0',
                    '#B8EFE2',
                    '#D7F9F0'
                ]).style({
                    strokeWidth: 0,
                    opacity: 0.7
                }).active(true);
                scene.addLayer(pointLayer);
            })
    </script>
</body></html>

效果图：

L7的绘图流程如下：

1、引入js库

2、编写渲染容器DOM

3、初始化地图对象L7.Scence

4、请求数据

5、数据清洗(如果需要的话)

6、初始化绘图对象（如：L7.PointLayer）

7、调用scene.addLayer方法绘图

本文是简单写了几个展示demo，很多个性化配置项是没有展示出来的，不过antV官方文档挺详细的，根据需求翻官方文档就行，这类框架使用都是根据API配置对应参数，只要耐心找，总能找到的！（哈哈哈）

官方文档传送门：

G2Plot：https://g2plot.antv.vision/en/docs/manual/introduction

G6：https://g6.antv.vision/en/docs/manual/introduction

L7：https://l7.antv.vision/en/docs/api/l7

ps：学习过程的简单记录，若有不恰当之处，欢迎指正！

Ashley的成长之路

关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
前端数据可视化之AntV的G2Plot、G6、L7入门

AntV 是蚂蚁金服全新一代数据可视化解决方案，AntV 不是一个解决方案，他是一套解决方案，AntV包括以下解决方案G2：可视化引擎 G2Plot：图表库 G6 : 图可视化引擎 Graphin：基于G6的图分析组件 F2 ：移动可视化方案 ChartCube：AntV 图表在线制作 L7：地理空间数据可视化因为是为下一个项目做技术调研，所以本文重点介绍项目可能用到的G2Plot、G6、L7 的入门使用一、G2Plot<!DOCTYPE html><ht.
复制链接

扫一扫