自定义博客皮肤VIP专享

*博客头图：

点击选择上传的图片

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

点击选择上传的图片

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

点击选择上传的图片

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览取消提交

自定义博客皮肤

上一步保存

weixin_43378385的博客

原创 Antv G2plot学习笔记（一）

Antv G2plot学习笔记（一）官方网址：https://g2plot.antv.vision/zh 在执行官方的实例中，发现无法将数据进行图表展示，经过好友的分享和实践发现是出在变量引用不到的问题，之前的const linePlot = new Line(）无法获取到，修改为G2Plot.Line(）即可，下面是我写的实例，仅供参照。 <!DOCTYPE html> &lt...

2020-04-02 15:24:56 7105 5

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

小小的爬虫 CSDN认证博客专家 CSDN认证企业博客

码龄6年

暂无认证

IP 属地：江苏省

IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）

1: 原创

138万+: 周排名

191万+: 总排名

7105: 访问

: 等级

86: 积分

1: 粉丝

2: 获赞

4: 评论

3: 收藏

私信

关注

最新评论

Antv G2plot学习笔记（一）
小小的爬虫: 一样的，替换就可以了
Antv G2plot学习笔记（一）
小小的爬虫: [code=html] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script> </head> <body> <div id="container"></div> </body> <script type="text/javascript"> //import { Pie } from '@antv/g2plot'; const data = [ { type: '分类一', value: 27, }, { type: '分类二', value: 25, }, { type: '分类三', value: 18, }, { type: '分类四', value: 15, }, { type: '分类五', value: 10, }, { type: '其它', value: 5, }, ]; console.log(G2Plot) const piePlot = new G2Plot.Pie(document.getElementById('container'), { forceFit: true, title: { visible: true, text: '多色饼图', }, description: { visible: true, text: '指定颜色映射字段(colorField)，饼图切片将根据该字段数据显示为不同的颜色。指定颜色需要将color配置为一个数组。\n当把饼图label的类型设置为inner时，标签会显示在切片内部。设置offset控制标签的偏移值。', }, radius: 0.8, [/code]
Antv G2plot学习笔记（一）
小小的爬虫: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script> </head> <body> <div id="container"></div> </body> <script type="text/javascript"> //import { Pie } from '@antv/g2plot'; const data = [ { type: '分类一', value: 27, }, { type: '分类二', value: 25, }, { type: '分类三', value: 18, }, { type: '分类四', value: 15, }, { type: '分类五', value: 10, }, { type: '其它', value: 5, }, ]; console.log(G2Plot) const piePlot = new G2Plot.Pie(document.getElementById('container'), { forceFit: true, title: { visible: true, text: '多色饼图', }, description: { visible: true, text: '指定颜色映射字段(colorField)，饼图切片将根据该字段数据显示为不同的颜色。指定颜色需要将color配置为一个数组。\n当把饼图label的类型设置为inner时，标签会显示在切片内部。设置offset控制标签的偏移值。', }, radius: 0.8, data, angle
Antv G2plot学习笔记（一）
xiao梦笔记: 如果现在是要做饼图但不是在vue项目中知识在一个单独的html页面中本来是要引入import { Pie } from '@antv/g2plot'; 但是现在是htnl页面[code=html] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script> </head> <body> <div id="container"></div> <script> // import { Pie } from '@antv/g2plot'; const data = [ { type: '分类一', value: 27, }, { type: '分类二', value: 25, }, { type: '分类三', value: 18, }, { type: '分类四', value: 15, }, { type: '分类五', value: 10, }, { type: '其它', value: 5, }, ]; const piePlot = new G2Plot.Pie(document.getElementById('container'), { forceFit: true, title: { visible: true, text: '多色饼图', }, description: { visible: true, text: '指定颜色映射字段(colorField)，饼图切片将根据该字段数据显示为不同的颜色。指定颜色需要将color配置为一个数组。\n当把饼图label的类型 [/code]
Antv G2plot学习笔记（一）
xiao梦笔记: 那其他模块呢？g2plot中的pie模块如果在html页面中改如何引用呢您知道吗 [code=html] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script> </head> <body> <div id="container"></div> <script> const data = [{ date: '2018/8/1', type: 'download', value: 4623, }, { date: '2018/8/1', type: 'register', value: 2208, }, { date: '2018/8/1', type: 'bill', value: 182, }, { date: '2018/8/2', type: 'download', value: 6145, }, { date: '2018/8/2', type: 'register', value: 2016, }, { date: '2018/8/2', type: 'bill', value: 257, }, { date: '2018/8/3', type: 'download', value: 508, }, [/code]