Antv | G2-Plot图表在vue项目中的使用

最新推荐文章于 2024-05-17 20:07:07 发布

星野寄月

最新推荐文章于 2024-05-17 20:07:07 发布

阅读量4.4k

点赞数

文章标签： echarts vue.js

本文链接：https://blog.csdn.net/qq_52403971/article/details/120442186

版权

什么是G2-Plot

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。（详情可查看g2官网。）
G2图表、 Echarts图表都是我们在vue项目中视图化很好表现的形式，因此利用好图表对视图和模型数据进行连接，能够很好的进行数据分析和数据表达。
G2的特性：
📦 开箱即用、默认好用的高质量统计图表
🎨 提炼自企业级产品的视觉语言和设计规范
📊 响应式图表：致力于解决图表在任何数据和显示尺寸下的基本可读性问题
🔳 图层化设计方法：在 G2Plot 体系下，图表不仅仅只是各不相关的实例，图层概念的引入提供了多图表组合叠联动，共同讲述一个数据故事的可能性

G2在常规html中的引用和使用：
1.引入g2**

**
第一种方法：


 
<!-- 引入在线资源 -->
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
  const {
      Line } = G2Plot;
</script>

第二种方法：

<!-- 下载到本地 引入本地脚本 -->
<script src="./g2plot.min.js"></script>
<script>
  const {
      Line } = G2Plot;
</script>

2. 设置父容器

<div id="root"></div>

3. 引入数据

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
];

4渲染并创建图表

const line = new Line('container', {
  data,
  xField: 'year',
  yField: 'value',
});

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta<

最低0.47元/天解锁文章

星野寄月

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
Antv | G2-Plot图表在vue项目中的使用

什么是G2-PlotG2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。（详情可查看g2官网。）G2图表、 Echarts图表都是我们在vue项目中视图化很好表现的形式，因此利用好图表对视图和模型数据进行连接，能够很好的进行数据分析和数据表达。G2的特性：???? 开箱即用、默认好用的高质量统计图表???? 提炼自企业级产品的
复制链接

扫一扫