介绍
在vue中使用antV-G2展示半径饼状图
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": 39
},
{
"year": "1952 年",
"sales": 52
},
{
"year": "1956 年",
"sales": 61
},
{
"year": "1957 年",
"sales": 45
},
{
"year": "1958 年",
"sales": 28
},
{
"year": "1959 年",
"sales": 38
},
{
"year": "1960 年",
"sales": 20
},
{
"year": "1962 年",
"sales": 45
}
],
}
},
创建chart
//创建chart
createChart(){
this.chart = new Chart({
container: 'container',//chart容器id
autoFit: false,//图表是否自适应容器宽高,默认为 false
width: 800,//图标宽度
height: 400,//图表高度
padding: [10, 10, 80, 10],//图表内边距,依次为:上,右,下,左
// defaultInteractions:"ellipsis-text",//配置图表默认交互,仅支持字符串形式。G2 默认支持的交互有 'tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'
pixelRatio:window.devicePixelRatio,//设置设备像素比,默认取浏览器的值 window.devicePixelRatio
renderer:"canvas",//指定渲染引擎,默认使用 canvas。可选:'canvas' | 'svg'
theme:"dark",//配置主题,目前 g2 默认有 dark 主题模式,如需要自定义配置,可以先通过 registerTheme 注册主题,再设置主题 key。
visible:true,//chart 是否可见,默认为 true,设置为 false 则会隐藏。
});
},
设置展示数据 showData
//设置数据
setChartData(){
this.chart.data(this.showData);
},
设置坐标轴以及绘制半径
//设置坐标轴
setChartAxis(){
this.chart.coordinate('theta', {
radius: 0.98,//半径:范围0-1
});
this.chart.scale('sales');//Y轴 度量值
var _this=this;
let max = 0;//获得饼状图最大值
this.showData.forEach(function(obj) {
if (obj['sales'] > max) {
max = obj['sales'];
}
});
//使用registerShape函数绘制圆半径
registerShape('interval', 'slice-shape', {
draw(cfg, container) {
const points = cfg.points;
const origin = cfg.data;
const percent = origin['sales'] / max;
const xWidth = points[2].x - points[1].x;
const width = xWidth * percent;
let path = [];
path.push(['M', points[0].x, points[0].y]);
path.push(['L', points[1].x, points[1].y]);
path.push(['L', points[0].x + width, points[2].y]);
path.push(['L', points[0].x + width, points[3].y]);
path.push('Z');
path = this.parsePath(path);
return container.addShape('path', {
attrs: {
fill: cfg.color,
path,
},
});
},
});
},
设置提示框信息样式
//设置提示框信息样式
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:颜色数组,柱体的颜色会循环的从颜色数组中取出来
.shape('slice-shape') //半径饼图
.adjust('stack');
//柱子上是否显示值标签
//line.label(false);//不需要显示,可以设置false
line.label("sales", {//标签值
content: (originData) => {
return originData["sales"]+"万";//设置值标签最终显示的内容
},
style: {
fill: "#fff",
fontFamily: "Microsoft YaHei",
fontWeight: 400,
fontSize: 16,
// fill: "#ffffff",
},
offset: '-50%',//偏移位置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,registerShape } from '@antv/g2';
//柱状图
export default {
components: {},
name:"test",
data(){
return {
chart:null,//图表对象
showData:[//图表中将要显示的数据
{
"year": "1951 年",
"sales": 39
},
{
"year": "1952 年",
"sales": 52
},
{
"year": "1956 年",
"sales": 61
},
{
"year": "1957 年",
"sales": 45
},
{
"year": "1958 年",
"sales": 28
},
{
"year": "1959 年",
"sales": 38
},
{
"year": "1960 年",
"sales": 20
},
{
"year": "1962 年",
"sales": 45
}
],
}
},
created(){
},
mounted(){
this.init();
},
methods:{
// 初始化
init(){
this.createChart();//创建chart
this.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();
},
//创建chart
createChart(){
this.chart = new Chart({
container: 'container',//chart容器id
autoFit: false,//图表是否自适应容器宽高,默认为 false
width: 800,//图标宽度
height: 400,//图表高度
padding: [10, 10, 80, 10],//图表内边距,依次为:上,右,下,左
// defaultInteractions:"ellipsis-text",//配置图表默认交互,仅支持字符串形式。G2 默认支持的交互有 'tooltip', 'legend-filter', 'legend-active', 'continuous-filter', 'ellipsis-text'
pixelRatio:window.devicePixelRatio,//设置设备像素比,默认取浏览器的值 window.devicePixelRatio
renderer:"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.98,//半径:范围0-1
});
this.chart.scale('sales');//Y轴 度量值
var _this=this;
let max = 0;//获得饼状图最大值
this.showData.forEach(function(obj) {
if (obj['sales'] > max) {
max = obj['sales'];
}
});
//使用registerShape函数绘制圆半径
registerShape('interval', 'slice-shape', {
draw(cfg, container) {
const points = cfg.points;
const origin = cfg.data;
const percent = origin['sales'] / max;
const xWidth = points[2].x - points[1].x;
const width = xWidth * percent;
let path = [];
path.push(['M', points[0].x, points[0].y]);
path.push(['L', points[1].x, points[1].y]);
path.push(['L', points[0].x + width, points[2].y]);
path.push(['L', points[0].x + width, points[3].y]);
path.push('Z');
path = this.parsePath(path);
return container.addShape('path', {
attrs: {
fill: cfg.color,
path,
},
});
},
});
},
//设置提示框信息样式
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:颜色数组,柱体的颜色会循环的从颜色数组中取出来
.shape('slice-shape') //半径饼图
.adjust('stack');
//柱子上是否显示值标签
//line.label(false);//不需要显示,可以设置false
line.label("sales", {//标签值
content: (originData) => {
return originData["sales"]+"万";//设置值标签最终显示的内容
},
style: {
fill: "#fff",
fontFamily: "Microsoft YaHei",
fontWeight: 400,
fontSize: 16,
// fill: "#ffffff",
},
offset: '-50%',//偏移位置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)
官网
- 情天数据可视化 www.51qingtian.com