介绍

G2 是一套基于图形语法理论的可视化底层引擎，以数据驱动，提供图形语法与交互语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

一、安装 antV-G2

通过 npm 安装

npm install @antv/g2 --save

成功安装完成之后，即可使用 import 或 require 进行引用。

import { Chart } from '@antv/g2';

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源：

<!-- 引入在线资源，选择你需要的 g2 版本以替换 version 变量 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/{{version}}/dist/g2.min.js"></script>

<!-- 引入本地脚本 -->
<script src="./g2.js"></script>

使用 script 标签引入 G2 资源时，挂载在 window 上的变量名为 G2，所以在上述实例中需要加上 G2 的前缀。如下：

const chart = new G2.Chart({/* your options */
});

二、在vue中使用antV-G2展示柱状图

创建 `div` 图表容器

//html布局
<template>
<div class="container" id="container"></div>
</template>//对应的CSS样式
<style lang="scss">
body{ background: #222;}
.container{width:800px; height: 800px; margin: 100px auto;}
</style>

在data(){}中准备好将要展示的图表数据

data(){return {chart:null,//图表对象showData:[//图表中将要显示的数据{"year": "1951 年","sales": 38},{"year": "1952 年","sales": 52},{"year": "1956 年","sales": 61},{"year": "1957 年","sales": 145},{"year": "1958 年","sales": 48},{"year": "1959 年","sales": 38},{"year": "1960 年","sales": 38},{"year": "1962 年","sales": 38}],}
},

创建chart

//创建chart
createChart(){this.chart = new Chart({container: 'container',autoFit: false,width: 800,height: 400,padding: [40, 40, 40, 40],});
},

设置展示数据 showData

//设置数据
setChartData(){this.chart.data(this.showData);
},

设置坐标轴

//设置坐标轴
setChartAxis(){this.chart.coordinate('theta', {radius: 0.75,//半径：范围0-1});this.chart.scale('sales');//Y轴 度量值
},

设置提示框信息样式

//设置提示框信息样式
setChartTooltip(){this.chart.tooltip({showMarkers: false,domStyles:{'g2-tooltip':{background:"rgba(00, 00, 00,0.5)",//背景RGBA形式的值color:"#ffffff",//文字颜色boxShadow:"0px 0px 5px #000000",//阴影大小 阴影颜色 },},customItems: (items) => {//自定义显示的内容格式// console.log("items")// console.log(items)items[0].name="sales";return items;},});
},

设置图表样式

this.chart.interaction('element-active');//设置图表样式

设置图表饼图相关属性【饼图样式】

//设置图表饼图相关属性【饼图样式】
setChartStyle(){var line=this.chart.interval();line.state({// selected:{//   style:{//     stroke:'red',//   }// }// active:{//     style:{//     stroke:"#2681ff",//鼠标经过 边框颜色//     }// }}).position("sales")//Y轴 度量字段.color("year", ["#2681ff","#00ff44","#2611ff","#26aa99"])//参数1：year字段为X轴，参数2：颜色数组，柱体的颜色会循环的从颜色数组中取出来.adjust('stack');//柱子上是否显示值标签//line.label(false);//不需要显示，可以设置falseline.label("sales", {//标签值content: (originData) => {return originData["sales"]+"万";//设置值标签最终显示的内容},style: {fill: "#fff",fontFamily: "Microsoft YaHei",fontWeight: 400,fontSize: 16,// fill: "#ffffff",},offset: '40%',//偏移位置50 -- 200})
},

设置图例

//设置图例
setChartLegend(){// this.chart.legend(false);//设置为false，表示不显示图例this.chart.legend("sales", {position: "bottom",//图例位置："top" | "top-left" | "top-right" | "right" | "right-top" | "right-bottom" | "left" | "left-top" | "left-bottom" | "bottom" | "bottom-left" | "bottom-right"itemName:{style:{fill: "#fff",fontFamily: "Microsoft YaHei",fontWeight: 400,fontSize: 16,}},pageNavigator: {marker: {//分页器指示箭头配置项style: {// 非激活，不可点击态时的填充色设置inactiveFill: "#fff",//分页器：箭头颜色inactiveOpacity: 1,//分页器：箭头透明度// 默认填充色设置fill: "#fff",//分页器：颜色opacity: 1,//分页器：透明度size: 12,//分页器：大小},},text: {//分页器指示文本配置项style: {fill: "#fff",//分页器：文本颜色fontSize: 12,//分页器：文本大小},},},});
},

设置动画

//设置动画
setChartAnimate(){// this.chart.animate(false);//设置为false，表示不使用动画效果this.chart.animate({// 初始化时的入场动画appear: {animation: 'fade-in', // 动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'easing: 'easeQuadIn', // 动画缓动效果delay: 100, // 动画延迟执行时间duration: 600 // 动画执行时间},// 更新时的出现动画enter: {animation: 'fade-in', //动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'easing: 'easeQuadIn', // 动画缓动效果delay: 100, // 动画延迟执行时间duration: 600 // 动画执行时间},// 更新时的动画leave: {animation: 'path-out', //动画名称:'fade-out'|'path-out'|'zoom-out'|'lineWidth-out'easing: 'easeQuadIn', // 动画缓动效果delay: 100, // 动画延迟执行时间duration: 600 // 动画执行时间},// 更新时的变化动画update: {animation: 'fade-in', //动画名称:'fade-in'|'fan-in'easing: 'easeQuadIn', // 动画缓动效果delay: 100, // 动画延迟执行时间duration: 600 // 动画执行时间},})
},

渲染图表

//渲染图表
this.chart.render();

三、效果预览

四、完整vue代码文件

<template>
<div class="container" id="container"></div>
</template>
<script>
import { Chart } from '@antv/g2';//柱状图
export default {components: {},name:"test",data(){return {chart:null,//图表对象showData:[//图表中将要显示的数据{"year": "1951 年","sales": 38},{"year": "1952 年","sales": 52},{"year": "1956 年","sales": 61},{"year": "1957 年","sales": 145},{"year": "1958 年","sales": 48},{"year": "1959 年","sales": 38},{"year": "1960 年","sales": 38},{"year": "1962 年","sales": 38}],}},created(){},mounted(){this.init();},methods:{// 初始化init(){this.createChart();//创建chartthis.setChartData();//设置字段和数据this.setChartAxis();//设置坐标轴和度量this.setChartTooltip();//设置提示信息this.chart.interaction('element-active');//设置图表样式this.setChartStyle();//设置图表柱子相关属性// this.chart.legend(false);//设置为false，表示不显示图例this.setChartLegend();//设置图例this.setChartAnimate();//设置动画//渲染图表this.chart.render();//添加点击事件this.addClickEvent();},//创建chartcreateChart(){this.chart = new Chart({container: 'container',//chart容器idautoFit: false,//图表是否自适应容器宽高，默认为 falsewidth: 800,//图标宽度height: 400,//图表高度padding: [40, 40, 80, 40],//图表内边距,依次为:上，右，下，左// defaultInteractions:"ellipsis-text",//配置图表默认交互，仅支持字符串形式。G2 默认支持的交互有 'tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'pixelRatio:window.devicePixelRatio,//设置设备像素比，默认取浏览器的值 window.devicePixelRatiorenderer:"canvas",//指定渲染引擎，默认使用 canvas。可选：'canvas' | 'svg'theme:"dark",//配置主题，目前 g2 默认有 dark 主题模式，如需要自定义配置，可以先通过 registerTheme 注册主题，再设置主题 key。visible:true,//chart 是否可见，默认为 true，设置为 false 则会隐藏。});},//设置数据setChartData(){this.chart.data(this.showData);},//设置坐标轴setChartAxis(){this.chart.coordinate('theta', {radius: 0.75,//半径：范围0-1});this.chart.scale('sales');//Y轴 度量值},//设置提示框信息样式setChartTooltip(){this.chart.tooltip({showMarkers: false,domStyles:{'g2-tooltip':{background:"rgba(00, 00, 00,0.5)",//背景RGBA形式的值color:"#ffffff",//文字颜色boxShadow:"0px 0px 5px #000000",//阴影大小 阴影颜色 },},customItems: (items) => {//自定义显示的内容格式// console.log("items")// console.log(items)items[0].name="sales";return items;},});},//设置图表饼图相关属性【饼图样式】setChartStyle(){var line=this.chart.interval();line.state({// selected:{//   style:{//     stroke:'red',//   }// }// active:{//     style:{//     stroke:"#2681ff",//鼠标经过 边框颜色//     }// }}).position("sales")//Y轴 度量字段.color("year", ["#2681ff","#00ff44","#2611ff","#26aa99"])//参数1：year字段为X轴，参数2：颜色数组，柱体的颜色会循环的从颜色数组中取出来.adjust('stack');//柱子上是否显示值标签//line.label(false);//不需要显示，可以设置falseline.label("sales", {//标签值content: (originData) => {return originData["sales"]+"万";//设置值标签最终显示的内容},style: {fill: "#fff",fontFamily: "Microsoft YaHei",fontWeight: 400,fontSize: 16,// fill: "#ffffff",},offset: '40%',//偏移位置50 -- 200})},//设置图例setChartLegend(){// this.chart.legend(false);//设置为false，表示不显示图例this.chart.legend("sales", {position: "bottom",//图例位置："top" | "top-left" | "top-right" | "right" | "right-top" | "right-bottom" | "left" | "left-top" | "left-bottom" | "bottom" | "bottom-left" | "bottom-right"itemName:{style:{fill: "#fff",fontFamily: "Microsoft YaHei",fontWeight: 400,fontSize: 16,}},pageNavigator: {marker: {//分页器指示箭头配置项style: {// 非激活，不可点击态时的填充色设置inactiveFill: "#fff",//分页器：箭头颜色inactiveOpacity: 1,//分页器：箭头透明度// 默认填充色设置fill: "#fff",//分页器：颜色opacity: 1,//分页器：透明度size: 12,//分页器：大小},},text: {//分页器指示文本配置项style: {fill: "#fff",//分页器：文本颜色fontSize: 12,//分页器：文本大小},},},});},//设置动画setChartAnimate(){// this.chart.animate(false);//设置为false，表示不使用动画效果this.chart.animate({// 初始化时的入场动画appear: {animation: 'fade-in', // 动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'easing: 'easeQuadIn', // 动画缓动效果delay: 100, // 动画延迟执行时间duration: 600 // 动画执行时间},// 更新时的出现动画enter: {animation: 'fade-in', //动画名称:'fade-in'|'fan-in'|'scale-inx'|'scale-iny'|'path-in'|'zoom-in'|'clip-in'easing: 'easeQuadIn', // 动画缓动效果delay: 100, // 动画延迟执行时间duration: 600 // 动画执行时间},// 更新时的动画leave: {animation: 'path-out', //动画名称:'fade-out'|'path-out'|'zoom-out'|'lineWidth-out'easing: 'easeQuadIn', // 动画缓动效果delay: 100, // 动画延迟执行时间duration: 600 // 动画执行时间},// 更新时的变化动画update: {animation: 'fade-in', //动画名称:'fade-in'|'fan-in'easing: 'easeQuadIn', // 动画缓动效果delay: 100, // 动画延迟执行时间duration: 600 // 动画执行时间},})},//添加点击事件addClickEvent(){this.chart.on('element:click', (ev) => {var data=ev.data.data;console.log(data);alert(JSON.stringify(data));});}},
}
</script><style lang="scss">
body{ background: #222;}
.container{width:800px; height: 800px; margin: 100px auto; background: cadetblue;}
</style>

数据可视化工具推荐

基于VUE实现拖拽制作数据可视化大屏

基于SpringBoot+Vue3+mysql开发，支持多种数据源：excel、api接口、mysql、oracle、SqlServer等多种类型的数据源，支持数据模型转换，图形化编辑界面：拖拽即可完成大屏制作和数据配置，无需编程就能轻松搭建数据大屏。私有化部署：使用私有化部署的方式，保障贵公司的数据安全，数据大屏支持加密发布

界面展示

大屏编辑界面

(https://www.51qingtian.com)
可视化大屏

(https://www.51qingtian.com)
数据模型

(https://www.51qingtian.com)
数据源

(https://www.51qingtian.com)

模板展示

健身数据报告

(https://www.51qingtian.com)

智慧园区数据统计中心

(https://www.51qingtian.com)

交通安全主题

(https://www.51qingtian.com)

财务数据大屏

(https://www.51qingtian.com)

智慧医疗大数据可视化大屏

(https://www.51qingtian.com)

官网

情天数据可视化 www.51qingtian.com

在vue中使用antV-G2展示基础饼状图相关推荐

在vue中使用antV-G2展示半径饼状图
介绍在vue中使用antV-G2展示半径饼状图 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实 ...
iOS 中饼状图的自定义绘制
前几天有一个需求是制作一个统计工资的饼状图,但是和一般的饼状图不同的是要求该饼状图中心需要有两条文字,功能需求就是这样,先上一张效果图: 因为咱们的饼状图本身只是一个View ,在调用的时候一定是在一 ...
JFreeChart在Struts2中实现3D饼状图统计
在Struts2中,用JFreeChart实现3D饼状图统计前段时间学习了一下JFreeChart,现在来整理一下自己所作的实例. 下面分别用两种方式来实现: 一种是以java应用程序的方式,一种是 ...
antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: js部分: //引入G2组件 import G2 from "@a ...
vue中使用Antv g6构建简单流程图
vue中使用Antv g6构建简单流程图前端小白第一次使用,项目需要一个流程图,看了一些博客,简单的写了一个,但是还是没实现项目的需求,希望有会的人帮忙指点一下.项目需要实现的是:可以自定义添加节点 ...
AntV中的饼状图中的花瓣图旁边的文字显示label怎样修改
场景官方花瓣图实例: http://antv.alipay.com/zh-cn/g2/3.x/demo/pie/pie-platelets.html 官方示例效果: 需要修改成的效果需要将图形旁边 ...
vue中如何画饼状图
废话不多说,直接上干货. 1.在自己的项目里面安装echarts npm install echarts --s 2.在template中为echarts准备一个容器dom <template& ...
AntV中的饼状图重复渲染问题解决
场景在使用AntV的饼状图时,在页面加载完之后js中会ajax请求一次后台数据, 有一个时间的选择框,选择时间后点击搜索会再次执行ajax请求一次. 效果如图: 可是最终导致的后果是饼状图重复渲染. ...
vue中使用echart绘制柱状图、折现图、饼状图
echarts有几个主要的字段,title.legend.xAxis. yAxis.tooltip.series. title 图表的标题 legend 用来标志图表数据,data字段的数组需要对应每 ...

在vue中使用antV-G2展示基础饼状图

介绍

一、安装 antV-G2

通过 npm 安装

浏览器引入

二、在vue中使用antV-G2展示柱状图

创建 `div` 图表容器

在data(){}中准备好将要展示的图表数据

创建chart

设置展示数据 showData

设置坐标轴

设置提示框信息样式

设置图表样式

设置图表饼图相关属性【饼图样式】

设置图例

设置动画

渲染图表

三、效果预览

四、完整vue代码文件

数据可视化工具推荐

基于VUE实现拖拽制作数据可视化大屏

在vue中使用antV-G2展示基础饼状图相关推荐

最新文章

热门文章

在vue中使用antV-G2展示基础饼状图

介绍

一、安装 antV-G2

通过 npm 安装

浏览器引入

二、在vue中使用antV-G2展示柱状图

创建 div 图表容器

在data(){}中准备好将要展示的图表数据

创建chart

设置展示数据 showData

设置坐标轴

设置提示框信息样式

设置图表样式

设置图表饼图相关属性【饼图样式】

设置图例

设置动画

渲染图表

三、效果预览

四、完整vue代码文件

数据可视化工具推荐

基于VUE实现拖拽制作数据可视化大屏

在vue中使用antV-G2展示基础饼状图相关推荐

最新文章

热门文章

创建 `div` 图表容器