在vue中使用antV

  介绍

在vue中使用antV-G2展示基础面积图

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

一、安装 antV-G2

npm install @antv/g2 --save

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

import { Chart } from 	@antv/g2	;

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

<!-- 引入在线资源，选择你需要的 g2 版本以替换 version 变量 -->
<script src=/{{version}}/dist/js></script>

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

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

ct chart = new G2.Chart({/* your opti */
});

二、在vue中使用antV-G2展示折线图

//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(){return {chart:null,//图表对象showData:[//图表中将要显示的数据{year: 1951 年,sales: 8},{year: 1952 年,sales: 52},{year: 1956 年,sales: 61},{year: 1957 年,sales: 145},{year: 1958 年,sales: 48},{year: 1959 年,sales: 8},{year: 1960 年,sales: 8},{year: 1962 年,sales: 8}],}
},

//创建chart
createChart(){ = new Chart({container: 	container	,//chart容器idautoFit: false,//图表是否自适应容器宽高，默认为 falsewidth: 800,//图标宽度height: 400,//图表高度padding: [40, 40, 80, 40],//图表内边距,依次为:上，右，下，左// defaultInteracti: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(){.data(this.showData);
},

//设置坐标轴
setChartAxis(){.scale(sales, {//Y轴 字段是 度量nice: true,});//设置Y轴//.axis(sales,false);//不需要Y轴，可以设置false.axis(sales, {//Y轴样式grid:{line:{type:line,style:{// fill:	#ff0000	,stroke:#fff,opacity:0.,lineDash:[1,],//虚线}},},label:{style:{fill:#fff,//文字颜fontFamily: Microsoft YaHei,//文字字体fontWeight: 400,//文字粗细fontSize: 12,//文字大小}},line:{style:{stroke:#fff,//坐标轴颜}},tickLine: {style:{stroke:#fff,//刻度线颜}},subTickLine:{style:{stroke:#fff,//小刻度颜}}});//设置X轴//.axis(year,false);//不需要Y轴，可以设置false.axis(year, {//X轴样式label: {formatter: (val) => {return val;// return val * 100  	%	;},style:{fill:#fff,//文字颜fontFamily: Microsoft YaHei,//文字字体fontWeight: 400,//文字粗细fontSize: 12,//文字大小}},line:{style:{stroke:#fff,//坐标轴颜}},tickLine: {style:{stroke:#fff,//刻度线颜}},subTickLine:{style:{stroke:#fff,//小刻度颜}}});
},

//设置提示框信息样式
setChartTooltip(){.tooltip({showMarkers: false,showCroairs: true,croairs:{line:{style:{stroke:#fff,//辅助线颜lineWidth:1,//辅助线粗细},}},domStyles:{	g2-tooltip	:{background:rgba(00, 00, 00,0.5),//背景RGBA形式的值color:#ffffff,//文字颜oxShadow:0px 0px 5px #000000,//阴影大小 阴影颜 },},customItems: (items) => {//自定义显示的内容格式// cole.log(items)// cole.log(items)items[0].name=sales;return items;},});
},

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

//设置图表折线和面积相关属性【折线和面积样式】
setChartStyle(){//折线样式var line=.line();line.style({ lineWidth:2,}).state({// selected:{//   style:{//     stroke:	red	,//   }// }active:{style:{stroke:#2681ff,//鼠标经过 折线颜}}}).position(year*sales)//X轴 * Y轴.color(#2681ff)//折线颜.shape(circle);//曲率//折线上是否显示值标签//line.label(false);//不需要显示，可以设置falseline.label(sales, {//标签值content: (originData) => {return originData[sales]万;//设置值标签最终显示的内容},style: {fill: #fff,fontFamily: Microsoft YaHei,fontWeight: 400,fontSize: 16,// fill: #ffffff,},position:top,//显示位置})//显示圆点--折线上的圆点.point()//获得圆点对象.size(4)//圆点大小.style({ // strokeOpacity:1,fill: #2681ff,//圆点颜stroke:#fff,//圆点边框颜}).state({// selected:{//   style:{//     stroke:	red	,//   }// }active:{style:{fill: #681ff,//鼠标经过 圆点颜stroke:#ff00ff,//鼠标经过 圆点边框颜}}}).position(year*sales).color(#2681ff)//圆点颜.shape(	circle	);//面积样式.area().position(year*sales).color(#B704E4)//面积颜.shape(	circle	);//曲率
},

.legend(false);//设置为false，表示不显示图例

//设置动画
setChartAnimate(){// .animate(false);//设置为false，表示不使用动画效果.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 // 动画执行时间},})
},

//渲染图表
.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: 8},{year: 1952 年,sales: 52},{year: 1956 年,sales: 61},{year: 1957 年,sales: 145},{year: 1958 年,sales: 48},{year: 1959 年,sales: 8},{year: 1960 年,sales: 8},{year: 1962 年,sales: 8}],}},created(){},mounted(){this.init();},methods:{// 初始化init(){();//创建chartthis.setChartData();//设置字段和数据this.setChartAxis();//设置坐标轴和度量this.setChartTooltip();//设置提示信息.interaction(	element-active	);//设置图表样式this.setChartStyle();//设置图表折线相关属性.legend(false);//设置为false，表示不显示图例this.setChartAnimate();//设置动画//渲染图表.render();},//创建chartcreateChart(){ = new Chart({container: 	container	,//chart容器idautoFit: false,//图表是否自适应容器宽高，默认为 falsewidth: 800,//图标宽度height: 400,//图表高度padding: [40, 40, 80, 40],//图表内边距,依次为:上，右，下，左// defaultInteracti: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(){.data(this.showData);},//设置坐标轴setChartAxis(){.scale(sales, {//Y轴 字段是 度量nice: false,//是否自动调整 min、max 。默认为falsemin: 10,//度量最小值，max: 200,//度量最大值，如果不需要指定最大值可以设置max=null，或者不要填该参数});//设置Y轴//.axis(sales,false);//不需要Y轴，可以设置false.axis(sales, {//Y轴样式grid:{line:{type:line,style:{// fill:	#ff0000	,stroke:#fff,//网格线颜opacity:0.,//网格线透明度lineDash:[1,],//虚线}},},label:{style:{fill:#fff,///Y轴文字颜fontFamily: Microsoft YaHei,///Y轴文字字体fontWeight: 400,///Y轴文字粗细fontSize: 12,///Y轴文字大小}},line:{style:{stroke:#fff,//坐标轴颜}},tickLine: {style:{stroke:#fff,//刻度线颜}},subTickLine:{style:{stroke:#fff,//小刻度颜}}});//设置X轴//.axis(year,false);//不需要Y轴，可以设置false.axis(year, {//X轴样式label: {formatter: (val) => {return val;// return val * 100  	%	;},style:{fill:#fff,//文字颜fontFamily: Microsoft YaHei,//文字字体fontWeight: 400,//文字粗细fontSize: 12,//文字大小}},line:{style:{stroke:#fff,//坐标轴颜}},tickLine: {style:{stroke:#fff,//刻度线颜}},subTickLine:{style:{stroke:#fff,//小刻度颜}}});},//设置提示框信息样式setChartTooltip(){.tooltip({showMarkers: false,showCroairs: true,croairs:{line:{style:{stroke:#fff,//辅助线颜lineWidth:1,//辅助线粗细},}},domStyles:{	g2-tooltip	:{background:rgba(00, 00, 00,0.5),//背景RGBA形式的值color:#ffffff,//文字颜oxShadow:0px 0px 5px #000000,//阴影大小 阴影颜 },},customItems: (items) => {//自定义显示的内容格式// cole.log(items)// cole.log(items)items[0].name=sales;return items;},});},//设置图表折线和面积相关属性【折线和面积样式】setChartStyle(){//折线样式var line=.line();line.style({ lineWidth:2,}).state({// selected:{//   style:{//     stroke:	red	,//   }// }active:{style:{stroke:#2681ff,//鼠标经过 折线颜}}}).position(year*sales)//X轴 * Y轴.color(#2681ff)//折线颜.shape(circle);//曲率//折线上是否显示值标签//line.label(false);//不需要显示，可以设置falseline.label(sales, {//标签值content: (originData) => {return originData[sales]万;//设置值标签最终显示的内容},style: {fill: #fff,fontFamily: Microsoft YaHei,fontWeight: 400,fontSize: 16,// fill: #ffffff,},position:top,//显示位置})//显示圆点--折线上的圆点.point()//获得圆点对象.size(4)//圆点大小.style({ // strokeOpacity:1,fill: #2681ff,//圆点颜stroke:#fff,//圆点边框颜}).state({// selected:{//   style:{//     stroke:	red	,//   }// }active:{style:{fill: #681ff,//鼠标经过 圆点颜stroke:#ff00ff,//鼠标经过 圆点边框颜}}}).position(year*sales).color(#2681ff)//圆点颜.shape(	circle	);//面积样式.area().position(year*sales).color(#B704E4)//面积颜.shape(	circle	);//曲率},//设置动画setChartAnimate(){// .animate(false);//设置为false，表示不使用动画效果.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 // 动画执行时间},})},},
}
</script><style lang=scss>
body{ background: #222;}
.container{width:800px; height: 800px; margin: 100px auto; background: cadetblue;}
</style>

数据可视化工具推荐

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

界面展示

1. 大屏编辑界面 
   ()
2. 可视化大屏 
   ()
3. 数据模型 
   ()
4. 数据源 
   ()

模板展示

1. 健身数据报告

()

1. 智慧园区数据统计中心

()

1. 交通安全主题

()

1. 财务数据大屏

()

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

()

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