vue结合AntV G2的使用踩坑记录

目录
  • vue结合AntV G2使用踩坑
  • AntV-G2语法总结
    • 目的
    • 第一步语法基础
    • 第二步设置坐标轴的外观与度量
    • 第二步创建view

vue结合AntV G2使用踩坑

官网使用import G2 from '@antv/g2';引入但是会报一个

"export 'default' (imported as 'G2') was not found in '@antv/g2'  得错误

找了半天原因,最终解决办法

import * as G2 from '@antv/g2'

AntV-G2语法总结

目的

使用antv-g2完成一个图表,该图表有两种结构组成,散点图与矩形图组成。我们需要将散点图与矩形图分别在两个view中绘制,所以还需要总结一下view的概念。

第一步语法基础

首先是引入相应依赖,其次是创建html容器<div id="c1"></div>,最后是数据以及相应初始化代码

const data = [
  { feature: 'Battery', value: 0.22, phone: 'iPhone' },
  { feature: 'Brand', value: 0.28, phone: 'iPhone' },
  { feature: 'Contract', value: 0.29, phone: 'iPhone' },
  { feature: 'Design', value: 0.17, phone: 'iPhone' },
  { feature: 'Internet', value: 0.22, phone: 'iPhone' },
  { feature: 'Large', value: 0.02, phone: 'iPhone' },
  { feature: 'Price', value: 0.21, phone: 'iPhone' },
  { feature: 'Smartphone', value: 0.5, phone: 'iPhone' },
  { feature: 'Battery', value: 0.27, phone: 'Samsung' },
  { feature: 'Brand', value: 0.16, phone: 'Samsung' },
  { feature: 'Contract', value: 0.35, phone: 'Samsung' },
  { feature: 'Design', value: 0.13, phone: 'Samsung' },
  { feature: 'Internet', value: 0.2, phone: 'Samsung' },
  { feature: 'Large', value: 0.13, phone: 'Samsung' },
  { feature: 'Price', value: 0.35, phone: 'Samsung' },
  { feature: 'Smartphone', value: 0.38, phone: 'Samsung' },
  { feature: 'Battery', value: 0.26, phone: 'Nokia Smartphone' },
  { feature: 'Brand', value: 0.1, phone: 'Nokia Smartphone' },
  { feature: 'Contract', value: 0.3, phone: 'Nokia Smartphone' },
  { feature: 'Design', value: 0.14, phone: 'Nokia Smartphone' },
  { feature: 'Internet', value: 0.22, phone: 'Nokia Smartphone' },
  { feature: 'Large', value: 0.04, phone: 'Nokia Smartphone' },
  { feature: 'Price', value: 0.41, phone: 'Nokia Smartphone' },
  { feature: 'Smartphone', value: 0.3, phone: 'Nokia Smartphone' },
];
const chart = new Chart({
  container: 'c1',
  autoFit: false,
  width: 600,
  height: 300,
});
chart.data(data);
chart.point().position('feature*value');
chart.render();

首先创建了一个chart对象

const chart = new Chart({
  container: 'c1',
  autoFit: false,
  width: 600,
  height: 300,
})

然后我们填充相应的data

chart.data(data);

再进行图形设置(point)以及相应坐标的设置(position)

chart.point().position('feature*value');

最后进行图像绘制

chart.render();

第二步设置坐标轴的外观与度量

外观axis设置

在g2中我们使用axis设置坐标轴的外观的显示特性,我们一般可以不用设置。相关设置可以参考官方 axis API

度量配置

G2 中的度量 (Scale) 是一个非常重要的概念,用于定义数据的类型和展示方式,在下列方面起到重要的作用:

  • 生成坐标轴刻度值
  • 显示图例项
  • 格式化数据展示的文本

G2 中提供了下面几种度量,也就是连续和分类两个大类别

  • identity,常量类型的数值,也就是说数据的某个字段是不变的常量
  • linear,连续的数字 [1, 2, 3, 4, 5]
  • cat,分类,[‘男’, ‘女’]
  • time,连续的时间类型
  • log,连续非线性的
  • Log,数据将 [1, 10, 100,1000] 转换成 [0, 1, 2, 3]
  • pow,连续非线性的pow 数据 将 [2, 4, 8, 16, 32] 转换成 [1,2, 3, 4, 5]
  • timeCat,非连续的时间,比如股票的时间不包括周末或者未开盘的日期
  • quantize,分段度量,例如[0-100, 100-200, 200-300] 在一个区间内映射到一个值上
  • quantile,密度分段度量,会根据数据的分布自动计算一个个的区间段

度量使用scale函数进行配置,scale(field: string, scaleOption) 设置单个坐标,scale(cfg)批量设置。

坐标度量的通用配置项有:

坐标轴的刻度和范围是由g2自动生成的,我们可以设置min,max数值范围、ticks数组自定义坐标轴显示的刻度文本及刻度数量,formatter自定义刻度格式,tickCount刻度数量、tickInterval刻度间距。

第二步创建view

G2 的图表 Chart,可以创建多个视图 View,每个 View 各自又可以创建其子 View,即在 G2 4.0 中,View 是支持嵌套的。每个 View 同 Chart 一样,拥有自己独立的数据源、坐标系、几何标记、Tooltip 以及图例,你可以这样理解,其实 Chart 也是一种特殊的 View,在类结构设计上,Chart 和 View 的关系如下:

也就是view继承子chart,所以我认为我们在chart设置的属性,view也会继承过来,所以部分配置无需我们在进行单独设置。

const view = chart.createView({
  region: {
    start: { x: 0.2, y: 0.2 }, // 指定该视图绘制的起始位置,x y 为 [0 - 1] 范围的数据
    end: { x: 1, y: 1 }, // 指定该视图绘制的结束位置,x y 为 [0 - 1] 范围的数据
  },
  padding: [20, 40], // 指定视图的留白
});

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue2中使用AntV 以g2plot为实例

    目录 使用AntV以g2plot为例 效果 代码 antV g2的简单运用 安装 语法介绍 使用AntV以g2plot为例 效果 代码 nmp 导入: npm install @antv/g2plot 代码: <template>     <div id="app">         <div id="container"></div>     </div> </template> <sc

  • 在vue项目中引用Antv G2,以饼图为例讲解

    我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: <template> <div id="pieChart"></div> </template> js部分: ​//引入G2组件 import G2 from "@antv/g2"; ​ export default { name:"", //数据部分 data(){ retur

  • vue+阿里的G2图表-antv+折线图实例

    目录 vue阿里的G2图表-antv+折线图 实现效果 实现步骤 antv g2柱状图与折线图混合使用 这是数据 这是组件 vue阿里的G2图表-antv+折线图 之前使用的图表是echarts+highcharts两个常用图表的,现在的话因为项目需要和别的原因也接触使用了阿里的g2图表,感觉效果还是挺好的,在这里分享下 官网入口 实现效果 实现步骤 第一:安装插件 npm install @antv/g2 --save 第二:lineCharts.vue,注意,图表这类型的数据必须mouned

  • 在Vue中使用Viser说明(基于AntV-G2可视化引擎)

    前言 AntV-G2官网推荐使用Viser,本文介绍针对Vue版本的viser-vue简单使用. 安装viser-vue yarn add viser-vue yarn add @antv/data-set main.js中引入 import Viser from 'viser-vue' Vue.use(Viser) 定义d2demo.vue组件 <template> <div> <v-chart :forceFit="true" :height=&quo

  • vue结合AntV G2的使用踩坑记录

    目录 vue结合AntV G2使用踩坑 AntV-G2语法总结 目的 第一步语法基础 第二步设置坐标轴的外观与度量 第二步创建view vue结合AntV G2使用踩坑 官网使用import G2 from '@antv/g2';引入但是会报一个 "export 'default' (imported as 'G2') was not found in '@antv/g2'  得错误 找了半天原因,最终解决办法 import * as G2 from '@antv/g2' AntV-G2语法总结

  • 关于Vue3过渡动画的踩坑记录

    目录 背景 问题定位 进一步分析 总结 背景 在我的 <Vue 3 开发企业级音乐 App>课程问答区,有个同学提了个问题,在歌手列表到歌手详情页面到转场动画中,只有进入动画,却没有离场动画: 该学生确实在这个问题上研究了有一段时间,而且从他的描述,我一时半会儿也想不出哪有问题,于是让他把代码传到 GitHub 上,毕竟直接从代码层面定位问题是最靠谱的. 问题定位 一般遇到此类问题的时候,我的第一反应是他用的 Vue 3 版本可能有问题,毕竟 Vue 3 还在不断迭代过程,某个版本有一些小 b

  • 详解vue-class迁移vite的一次踩坑记录

    目录 what happen 探究 解决 总结 what happen 最进项目从 vue-cli 迁移到了 vite,因为是 vue2 的项目,使用了 vue-class-component类组件做 ts 支持.当然迁移过程并没有那么一帆风顺,浏览器控制台报了一堆错,大致意思是某某方法为 undefined,无法调用.打印了下当前 this,为 undefined 的方法都来自于 vuex-class 装饰器下的方法.这就是一件很神奇的事,为什么只有 vuex-class 装饰器下的方法才会为

  • 详解element-ui 组件el-autocomplete使用踩坑记录

    项目遇到一个比较麻烦的需求,保存用户填写的历史记录,项目使用的element-ui,自然就使用了el-autocomplete组件,然后就是各种踩坑,以下记录以下写代码过程中遇到的问题 createFilter(queryString, filed) { console.log("createFilter==" + queryString) return (item) => { switch (filed) { case 'cardNum': break case 'cardPa

  • vue2.x background:url()的踩坑记录

    目录 background:url()的踩坑记录 backgroundImage路径问题 处理方法 background:url()的踩坑记录 开发模式下vue中background: url(‘../../assets/img/xxxxx’)直接写在行间样式不生效,即不能直接在标签中style属性中写, 必须写在非行间样式才会生效. 如果要写在行间样式中,需要对资源进行导入,比如ES规范的import或者CommomJS规范的require backgroundImage路径问题 项目中图片都

  • 详解vue-socket.io使用教程与踩坑记录

    目录 前言 我遇到的问题 使用教程 安装 引入(main.js) 使用(Page.vue) 解决方案 结合connect事件+store+路由守卫实现拦截 请先允许我狠狠吐个槽:vue-socket.io相关中文博客实在太少太少,来来去去就那么几篇,教程也比较零散,版本也比较老,就算我有暴风式搜索还是找不到解决问题的方案,然后我怒了,开始看源码.写测试demo.几乎把相关的issues都看了一遍,折腾1天后终于...搞定了,下面总结一下~ 考虑到很多小伙伴看完文章还是一头雾水或者无法复现方案,附

  • Web Worker线程解决方案electron踩坑记录

    目录 初始化项目 编写入口文件和 electron 插件 websocket websocket 服务 连接 websocket 服务 发送心跳 取消心跳 重新连接 其它优化 Worker 初始化项目 electron 开发时会遇到一对多的情况,在进行 websocket 通信时,如果接收到服务端多个指令时,而这个指令刚好需要占用线程,这个时候整个界面就会失去响应,那么我们就可以使用线程来解决这个问题. npm create vite@latest electron-worker 执行完后修改

  • .net core 3.1在iis上发布的踩坑记录

    前言 写这篇文章的目的是希望像我一样喜欢.net 的人在发布 core到 iis上时少走点弯路 网上找了些资料,其实实际操作比较简单,就是有几个坑很恶心 踩坑记录 首先是你的服务器需要有core 的运行环境,安装前先关闭iis dotnet-hosting-3.1.4-win.exe 可以去微软的官网找最新的版本(去微软的官网找你要的版本就好了) 安装成功后,第一个坑出现了,启动iis,发现原来在iis上的网站都报503错误了. 直接玩大了,最后发现就是这个东西搞的鬼,你卸载它iis之前的网站就

  • Linux/Docker 中使用 System.Drawing.Common 踩坑记录分享

    前言 在项目迁移到 .net core 上面后,我们可以使用 System.Drawing.Common 组件来操作 Image,Bitmap 类型,实现生成验证码.二维码,图片操作等功能.System.Drawing.Common 组件它是依赖于 GDI+ 的,然后在 Linux 上并没有 GDI+,面向谷歌编程之后发现,Mono 团队使用 C语言 实现了GDI+ 接口,提供对非Windows系统的 GDI+ 接口访问能力,这个应该就是libgdiplus.所以想让代码在 linux 上稳定运

  • Java踩坑记录之Arrays.AsList

    前言 java.util.Arrays的asList方法可以方便的将数组转化为集合,我们平时开发在初始化ArrayList时使用的比较多,可以简化代码,但这个静态方法asList()有几个坑需要注意: 一. 如果对集合使用增加或删除元素的操作将会报错 如下代码: List list = Arrays.asList("a","b","c"); list.add("d"); 输出结果: Exception in thread &q

随机推荐