首页 >> js开发 >> js在vue项目中引用Antv G2,以饼图为例讲解js大全
js在vue项目中引用Antv G2,以饼图为例讲解js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
我就废话不多说了，大家还是直接看代码吧~
npm install @antv/g2 --save
npm install @antv/g2 --savetemplate内容： template内容：
js部分：js部分：
//引入G2组件
import G2 from "@antv/g2";
export default {
name:"",
//数据部分
data(){
return{
sourceData: [],//声明一个数组
chart: {}, //全局定义chart对象
id: Math.random().toString(36).substr(2), //动态生成ID,便于多次引用
}
},
//初始加载
mounted() {
this.initComponent();
},
methods: {
//初始化获取数据
initStrateGoal() {
debugger;
let _this = this;
_this.$http
.$get("后台接口地址")
.then(function(response) {
if (_this.$util.isBlank(response.data)) {
return;
}
_this.sourceData = response.data;
//调用绘图方法
_this.getDrawing(_this.sourceData);
})
.catch(function(error) {
_this.$message.error(_this, error);
});
},
//绘制图形
getDrawing(sourceData) {
let _this = this;
// Step 1: 创建 Chart 对象
_this.chart = new G2.Chart({
container: _this.id,
forceFit: true,
height: 255,
padding: [30, 0, 35, 0],
animate: false
// margin: [0, 500]
});
let sumCount = 0;
for (let i in sourceData) {
sumCount = sumCount + Number(sourceData[i].count);
}
// Step 2: 载入数据源
_this.chart.source(sourceData, {
percent: {
formatter: function formatter(val) {
val = val + "%";
return val;
}
}
});
_this.chart.coord("theta", {
radius: 0.75,
innerRadius: 0.6
});
//消息提示
_this.chart.tooltip({
showTitle: false,
itemTpl:
'{name}: {value} '
});
// 辅助文本
_this.chart.guide().html({
position: ["50%", "50%"],
html:
'
alignX: "middle",
alignY: "middle"
});
// Step 3：创建图形语法，绘制饼图
var interval = _this.chart
.intervalStack()
.position("percent")
.color("item")
.label("percent", {
formatter: function formatter(val, item) {
return item.point.item + ": " + val;
}
})
.tooltip("item*percent", function(item, percent) {
//数据显示为百分比形式
percent = percent + "%";
return {
name: item,
value: percent
};
})
.style({
lineWidth: 1,
stroke: "#fff"
});
// Step 4：最后一步渲染至画布
_this.chart.render();
//初始加载图片后默认显示第一个条目突起，点击后进行变更
interval.setSelected(sourceData[0]);
},
//因为父级页面用的事Tab调用，会有显示不全的现象发生，所以销毁所有对象后重新加载
reloadDrawing() {
//销毁画布对象
this.chart.destroy();
//重新调用数据进行加载
this.initStrateGoal();
}
}
}
//引入G2组件
import G2 from "@antv/g2";
export default {
name:"",
//数据部分
data(){
return{
sourceData: [],//声明一个数组
chart: {}, //全局定义chart对象
id: Math.random().toString(36).substr(2), //动态生成ID,便于多次引用
}
},
//初始加载
mounted() {
this.initComponent();
},
methods: {
//初始化获取数据
initStrateGoal() {
debugger;
let _this = this;
_this.$http
.$get("后台接口地址")
.then(function(response) {
if (_this.$util.isBlank(response.data)) {
return;
}
_this.sourceData = response.data;
//调用绘图方法
_this.getDrawing(_this.sourceData);
})
.catch(function(error) {
_this.$message.error(_this, error);
});
},
//绘制图形
getDrawing(sourceData) {
let _this = this;
// Step 1: 创建 Chart 对象
_this.chart = new G2.Chart({
container: _this.id,
forceFit: true,
height: 255,
padding: [30, 0, 35, 0],
animate: false
// margin: [0, 500]
});
let sumCount = 0;
for (let i in sourceData) {
sumCount = sumCount + Number(sourceData[i].count);
}
// Step 2: 载入数据源
_this.chart.source(sourceData, {
percent: {
formatter: function formatter(val) {
val = val + "%";
return val;
}
}
});
_this.chart.coord("theta", {
radius: 0.75,
innerRadius: 0.6
});
//消息提示
_this.chart.tooltip({
showTitle: false,
itemTpl:
'{name}: {value} '
});
// 辅助文本
_this.chart.guide().html({
position: ["50%", "50%"],
html:
'
alignX: "middle",
alignY: "middle"
});
// Step 3：创建图形语法，绘制饼图
var interval = _this.chart
.intervalStack()
.position("percent")
.color("item")
.label("percent", {
formatter: function formatter(val, item) {
return item.point.item + ": " + val;
}
})
.tooltip("item*percent", function(item, percent) {
//数据显示为百分比形式
percent = percent + "%";
return {
name: item,
value: percent
};
})
.style({
lineWidth: 1,
stroke: "#fff"
});
// Step 4：最后一步渲染至画布
_this.chart.render();
//初始加载图片后默认显示第一个条目突起，点击后进行变更
interval.setSelected(sourceData[0]);
},
//因为父级页面用的事Tab调用，会有显示不全的现象发生，所以销毁所有对象后重新加载
reloadDrawing() {
//销毁画布对象
this.chart.destroy();
//重新调用数据进行加载
this.initStrateGoal();
}
}
}*父级页面时tab调用，并且是一个页面多次引用，有两个坑*父级页面时tab调用，并且是一个页面多次引用，有两个坑1.tab点击时，有的页面显示不全，样式也有问题，需要销毁重构（只是我的个人方案，有其他方案的话可以推荐）2.一个页面有多个图表，id是不能重复的，必须动态生成补充知识：vue+antv与数据库交互实现数据可视化图表补充知识：补充知识：vue+antv与数据库交互实现数据可视化图表一、安装antv一、安装antv
npm install @antv/g2
npm install @antv/g2二、在官网选择自己需要的图表二、在官网选择自己需要的图表https://g2.antv.vision/zh/examples/galleryhttps://g2.antv.vision/zh/examples/gallery这里以这个图为例右侧就是实现这个图的代码，在这里加上.color(“type”)即可根据字段名显示不同的颜色这里数据的字段和值可以按需更改（更改字段名称的话要把下面相关的字段名全部替换）三、整合vue antv三、整合vue antv在vue中引入antv
import { Chart } from "@antv/g2";
import { Chart } from "@antv/g2";指定一个容器来放图表
替换默认的data数据
data() {
return {
mydata: [
{ roomTypeName: "单人间", checkInValue: 654, checkInPercent: 0.02 },
{ roomTypeName: "双人间", checkInValue: 654, checkInPercent: 0.02 },
{ roomTypeName: "钟点房", checkInValue: 4400, checkInPercent: 0.2 },
{ roomTypeName: "海景房", checkInValue: 5300, checkInPercent: 0.24 },
{ roomTypeName: "主题房", checkInValue: 6200, checkInPercent: 0.28 },
{ roomTypeName: "家庭房", checkInValue: 3300, checkInPercent: 0.14 },
{ roomTypeName: "总统房", checkInValue: 1500, checkInPercent: 0.06 }
]
};
},
data() {
return {
mydata: [
{ roomTypeName: "单人间", checkInValue: 654, checkInPercent: 0.02 },
{ roomTypeName: "双人间", checkInValue: 654, checkInPercent: 0.02 },
{ roomTypeName: "钟点房", checkInValue: 4400, checkInPercent: 0.2 },
{ roomTypeName: "海景房", checkInValue: 5300, checkInPercent: 0.24 },
{ roomTypeName: "主题房", checkInValue: 6200, checkInPercent: 0.28 },
{ roomTypeName: "家庭房", checkInValue: 3300, checkInPercent: 0.14 },
{ roomTypeName: "总统房", checkInValue: 1500, checkInPercent: 0.06 }
]
};
},把绘图代码复制进来把绘图代码复制进来此处需要把默认的container：‘container' 修改为自己指定的容器id，渲染数据时，将data修改为this.xxx（自己定义的数据名称），不同的图修改的地方可能会不同
methods: {
initComponent() {
const chart = new Chart({
container: "roomTypeCheckIn",
autoFit: true,
height: 500,
padding: [50, 20, 50, 20]
});
chart.data(this.mydata);
chart.scale("checkInValue", {
alias: "销售额"
});
chart.axis("roomTypeName", {
tickLine: {
alignTick: false
}
});
chart.axis("checkInValue", false);
chart.tooltip({
showMarkers: false
});
chart
.interval()
.position("roomTypeName*checkInValue")
.color("roomTypeName");
chart.interaction("element-active");
// 添加文本标注
this.mydata.forEach(item => {
chart
.annotation()
.text({
position: [item.roomTypeName, item.checkInValue],
content: item.checkInValue,
style: {
textAlign: "center"
},
offsetY: -30
})
.text({
position: [item.roomTypeName, item.checkInValue],
content: (item.checkInPercent * 100).toFixed(0) + "%",
style: {
textAlign: "center"
},
offsetY: -12
});
});
chart.render();
}
}
methods: {
initComponent() {
const chart = new Chart({
container: "roomTypeCheckIn",
autoFit: true,
height: 500,
padding: [50, 20, 50, 20]
});
chart.data(this.mydata);
chart.scale("checkInValue", {
alias: "销售额"
});
chart.axis("roomTypeName", {
tickLine: {
alignTick: false
}
});
chart.axis("checkInValue", false);
chart.tooltip({
showMarkers: false
});
chart
.interval()
.position("roomTypeName*checkInValue")
.color("roomTypeName");
chart.interaction("element-active");
// 添加文本标注
this.mydata.forEach(item => {
chart
.annotation()
.text({
position: [item.roomTypeName, item.checkInValue],
content: item.checkInValue,
style: {
textAlign: "center"
},
offsetY: -30
})
.text({
position: [item.roomTypeName, item.checkInValue],
content: (item.checkInPercent * 100).toFixed(0) + "%",
style: {
textAlign: "center"
},
offsetY: -12
});
});
chart.render();
}
}
在mounted函数中调用绘图方法
mounted() {
this.initComponent();
},
mounted() {
this.initComponent();
},启动项目即可看到最终效果三、与数据库交互三、与数据库交互添加一个获取数据的方法（按自己的接口进行相应的替换）
getData() {
roomTypeApi.getRoomTypeStatistics().then(res => {
this.mydata = res.data.data
})
},
getData() {
roomTypeApi.getRoomTypeStatistics().then(res => {
this.mydata = res.data.data
})
},在created函数中调用获取数据的函数
created() {
this.getData()
},
created() {
this.getData()
},在watch函数中监听数据，数据发生变化时重新渲染图表
watch: {
mydata(b,a) {
this.chart.changeData(b)
this.chart.render()
}
},
watch: {
mydata(b,a) {
this.chart.changeData(b)
this.chart.render()
}
},最后得到的图表数据就是数据库中的数据了以上这篇在vue项目中引用Antv G2,以饼图为例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考。
npm install @antv/g2 --save
npm install @antv/g2 --savetemplate内容： template内容：
js部分：js部分：
//引入G2组件
import G2 from "@antv/g2";
export default {
name:"",
//数据部分
data(){
return{
sourceData: [],//声明一个数组
chart: {}, //全局定义chart对象
id: Math.random().toString(36).substr(2), //动态生成ID,便于多次引用
}
},
//初始加载
mounted() {
this.initComponent();
},
methods: {
//初始化获取数据
initStrateGoal() {
debugger;
let _this = this;
_this.$http
.$get("后台接口地址")
.then(function(response) {
if (_this.$util.isBlank(response.data)) {
return;
}
_this.sourceData = response.data;
//调用绘图方法
_this.getDrawing(_this.sourceData);
})
.catch(function(error) {
_this.$message.error(_this, error);
});
},
//绘制图形
getDrawing(sourceData) {
let _this = this;
// Step 1: 创建 Chart 对象
_this.chart = new G2.Chart({
container: _this.id,
forceFit: true,
height: 255,
padding: [30, 0, 35, 0],
animate: false
// margin: [0, 500]
});
let sumCount = 0;
for (let i in sourceData) {
sumCount = sumCount + Number(sourceData[i].count);
}
// Step 2: 载入数据源
_this.chart.source(sourceData, {
percent: {
formatter: function formatter(val) {
val = val + "%";
return val;
}
}
});
_this.chart.coord("theta", {
radius: 0.75,
innerRadius: 0.6
});
//消息提示
_this.chart.tooltip({
showTitle: false,
itemTpl:
'
});
// 辅助文本
_this.chart.guide().html({
position: ["50%", "50%"],
html:
'
目标总数
' +
sumCount +
"
",' +
sumCount +
"
alignX: "middle",
alignY: "middle"
});
// Step 3：创建图形语法，绘制饼图
var interval = _this.chart
.intervalStack()
.position("percent")
.color("item")
.label("percent", {
formatter: function formatter(val, item) {
return item.point.item + ": " + val;
}
})
.tooltip("item*percent", function(item, percent) {
//数据显示为百分比形式
percent = percent + "%";
return {
name: item,
value: percent
};
})
.style({
lineWidth: 1,
stroke: "#fff"
});
// Step 4：最后一步渲染至画布
_this.chart.render();
//初始加载图片后默认显示第一个条目突起，点击后进行变更
interval.setSelected(sourceData[0]);
},
//因为父级页面用的事Tab调用，会有显示不全的现象发生，所以销毁所有对象后重新加载
reloadDrawing() {
//销毁画布对象
this.chart.destroy();
//重新调用数据进行加载
this.initStrateGoal();
}
}
}
//引入G2组件
import G2 from "@antv/g2";
export default {
name:"",
//数据部分
data(){
return{
sourceData: [],//声明一个数组
chart: {}, //全局定义chart对象
id: Math.random().toString(36).substr(2), //动态生成ID,便于多次引用
}
},
//初始加载
mounted() {
this.initComponent();
},
methods: {
//初始化获取数据
initStrateGoal() {
debugger;
let _this = this;
_this.$http
.$get("后台接口地址")
.then(function(response) {
if (_this.$util.isBlank(response.data)) {
return;
}
_this.sourceData = response.data;
//调用绘图方法
_this.getDrawing(_this.sourceData);
})
.catch(function(error) {
_this.$message.error(_this, error);
});
},
//绘制图形
getDrawing(sourceData) {
let _this = this;
// Step 1: 创建 Chart 对象
_this.chart = new G2.Chart({
container: _this.id,
forceFit: true,
height: 255,
padding: [30, 0, 35, 0],
animate: false
// margin: [0, 500]
});
let sumCount = 0;
for (let i in sourceData) {
sumCount = sumCount + Number(sourceData[i].count);
}
// Step 2: 载入数据源
_this.chart.source(sourceData, {
percent: {
formatter: function formatter(val) {
val = val + "%";
return val;
}
}
});
_this.chart.coord("theta", {
radius: 0.75,
innerRadius: 0.6
});
//消息提示
_this.chart.tooltip({
showTitle: false,
itemTpl:
'
});
// 辅助文本
_this.chart.guide().html({
position: ["50%", "50%"],
html:
'
目标总数
' +
sumCount +
"
",' +
sumCount +
"
alignX: "middle",
alignY: "middle"
});
// Step 3：创建图形语法，绘制饼图
var interval = _this.chart
.intervalStack()
.position("percent")
.color("item")
.label("percent", {
formatter: function formatter(val, item) {
return item.point.item + ": " + val;
}
})
.tooltip("item*percent", function(item, percent) {
//数据显示为百分比形式
percent = percent + "%";
return {
name: item,
value: percent
};
})
.style({
lineWidth: 1,
stroke: "#fff"
});
// Step 4：最后一步渲染至画布
_this.chart.render();
//初始加载图片后默认显示第一个条目突起，点击后进行变更
interval.setSelected(sourceData[0]);
},
//因为父级页面用的事Tab调用，会有显示不全的现象发生，所以销毁所有对象后重新加载
reloadDrawing() {
//销毁画布对象
this.chart.destroy();
//重新调用数据进行加载
this.initStrateGoal();
}
}
}*父级页面时tab调用，并且是一个页面多次引用，有两个坑*父级页面时tab调用，并且是一个页面多次引用，有两个坑1.tab点击时，有的页面显示不全，样式也有问题，需要销毁重构（只是我的个人方案，有其他方案的话可以推荐）2.一个页面有多个图表，id是不能重复的，必须动态生成补充知识：vue+antv与数据库交互实现数据可视化图表补充知识：补充知识：vue+antv与数据库交互实现数据可视化图表一、安装antv一、安装antv
npm install @antv/g2
npm install @antv/g2二、在官网选择自己需要的图表二、在官网选择自己需要的图表https://g2.antv.vision/zh/examples/galleryhttps://g2.antv.vision/zh/examples/gallery这里以这个图为例右侧就是实现这个图的代码，在这里加上.color(“type”)即可根据字段名显示不同的颜色这里数据的字段和值可以按需更改（更改字段名称的话要把下面相关的字段名全部替换）三、整合vue antv三、整合vue antv在vue中引入antv
import { Chart } from "@antv/g2";
import { Chart } from "@antv/g2";指定一个容器来放图表
替换默认的data数据
data() {
return {
mydata: [
{ roomTypeName: "单人间", checkInValue: 654, checkInPercent: 0.02 },
{ roomTypeName: "双人间", checkInValue: 654, checkInPercent: 0.02 },
{ roomTypeName: "钟点房", checkInValue: 4400, checkInPercent: 0.2 },
{ roomTypeName: "海景房", checkInValue: 5300, checkInPercent: 0.24 },
{ roomTypeName: "主题房", checkInValue: 6200, checkInPercent: 0.28 },
{ roomTypeName: "家庭房", checkInValue: 3300, checkInPercent: 0.14 },
{ roomTypeName: "总统房", checkInValue: 1500, checkInPercent: 0.06 }
]
};
},
data() {
return {
mydata: [
{ roomTypeName: "单人间", checkInValue: 654, checkInPercent: 0.02 },
{ roomTypeName: "双人间", checkInValue: 654, checkInPercent: 0.02 },
{ roomTypeName: "钟点房", checkInValue: 4400, checkInPercent: 0.2 },
{ roomTypeName: "海景房", checkInValue: 5300, checkInPercent: 0.24 },
{ roomTypeName: "主题房", checkInValue: 6200, checkInPercent: 0.28 },
{ roomTypeName: "家庭房", checkInValue: 3300, checkInPercent: 0.14 },
{ roomTypeName: "总统房", checkInValue: 1500, checkInPercent: 0.06 }
]
};
},把绘图代码复制进来把绘图代码复制进来此处需要把默认的container：‘container' 修改为自己指定的容器id，渲染数据时，将data修改为this.xxx（自己定义的数据名称），不同的图修改的地方可能会不同
methods: {
initComponent() {
const chart = new Chart({
container: "roomTypeCheckIn",
autoFit: true,
height: 500,
padding: [50, 20, 50, 20]
});
chart.data(this.mydata);
chart.scale("checkInValue", {
alias: "销售额"
});
chart.axis("roomTypeName", {
tickLine: {
alignTick: false
}
});
chart.axis("checkInValue", false);
chart.tooltip({
showMarkers: false
});
chart
.interval()
.position("roomTypeName*checkInValue")
.color("roomTypeName");
chart.interaction("element-active");
// 添加文本标注
this.mydata.forEach(item => {
chart
.annotation()
.text({
position: [item.roomTypeName, item.checkInValue],
content: item.checkInValue,
style: {
textAlign: "center"
},
offsetY: -30
})
.text({
position: [item.roomTypeName, item.checkInValue],
content: (item.checkInPercent * 100).toFixed(0) + "%",
style: {
textAlign: "center"
},
offsetY: -12
});
});
chart.render();
}
}
methods: {
initComponent() {
const chart = new Chart({
container: "roomTypeCheckIn",
autoFit: true,
height: 500,
padding: [50, 20, 50, 20]
});
chart.data(this.mydata);
chart.scale("checkInValue", {
alias: "销售额"
});
chart.axis("roomTypeName", {
tickLine: {
alignTick: false
}
});
chart.axis("checkInValue", false);
chart.tooltip({
showMarkers: false
});
chart
.interval()
.position("roomTypeName*checkInValue")
.color("roomTypeName");
chart.interaction("element-active");
// 添加文本标注
this.mydata.forEach(item => {
chart
.annotation()
.text({
position: [item.roomTypeName, item.checkInValue],
content: item.checkInValue,
style: {
textAlign: "center"
},
offsetY: -30
})
.text({
position: [item.roomTypeName, item.checkInValue],
content: (item.checkInPercent * 100).toFixed(0) + "%",
style: {
textAlign: "center"
},
offsetY: -12
});
});
chart.render();
}
}
在mounted函数中调用绘图方法
mounted() {
this.initComponent();
},
mounted() {
this.initComponent();
},启动项目即可看到最终效果三、与数据库交互三、与数据库交互添加一个获取数据的方法（按自己的接口进行相应的替换）
getData() {
roomTypeApi.getRoomTypeStatistics().then(res => {
this.mydata = res.data.data
})
},
getData() {
roomTypeApi.getRoomTypeStatistics().then(res => {
this.mydata = res.data.data
})
},在created函数中调用获取数据的函数
created() {
this.getData()
},
created() {
this.getData()
},在watch函数中监听数据，数据发生变化时重新渲染图表
watch: {
mydata(b,a) {
this.chart.changeData(b)
this.chart.render()
}
},
watch: {
mydata(b,a) {
this.chart.changeData(b)
this.chart.render()
}
},最后得到的图表数据就是数据库中的数据了以上这篇在vue项目中引用Antv G2,以饼图为例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考。
相关文章:
- js解决vue项目中出现Invalid Host header的问题js大全
- js如何在Express4.x中愉快地使用async的方法js大全
- jsVue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例js大全
- js微信小程序实现多张图片上传功能js大全
- js深入了解Vue3模板编译原理js大全
- jsvue实现下载文件流完整前后端代码js大全
- js解决vue elementUI 使用el-select 时 change事件的触发问题js大全
- jsVue项目利用axios请求接口下载exceljs大全
- js代码关于JavaScript中异步/等待的用法与理解
- js微信小程序实现日历小功能js大全
刚刚发布热门点击发布时间
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
