vue+antv与数据库交互实现数据可视化图表
一、安装antvnpm install @antv/g2二、在官网选择自己需要的图表https://g2.antv.vision/zh/examples/gallery这里以这个图为例右侧就是实现这个图的代码,在这里加上.color(“type”)即可根据字段名显示不同的颜色这里数据的字段和值可以按需更改(更改字段名称的话要把下面相关的字段名全部替换)三、整合vue antv在vue中引入antv
·
一、安装antv
npm install @antv/g2
二、在官网选择自己需要的图表
https://g2.antv.vision/zh/examples/gallery
这里以这个图为例
右侧就是实现这个图的代码,在这里加上.color(“type”)即可根据字段名显示不同的颜色
这里数据的字段和值可以按需更改(更改字段名称的话要把下面相关的字段名全部替换)
三、整合vue antv
在vue中引入antv
import { Chart } from "@antv/g2";
指定一个容器来放图表
<template>
<div id="roomTypeCheckIn"></div>
</template>
替换默认的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 }
]
};
},
把绘图代码复制进来
此处需要把默认的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();
}
}
在mounted函数中调用绘图方法
mounted() {
this.initComponent();
},
启动项目即可看到最终效果
三、与数据库交互
添加一个获取数据的方法(按自己的接口进行相应的替换)
getData() {
roomTypeApi.getRoomTypeStatistics().then(res => {
this.mydata = res.data.data
})
},
在created函数中调用获取数据的函数
created() {
this.getData()
},
在watch函数中监听数据,数据发生变化时重新渲染图表
注意此处的chart需要先在data中定义,initComponent()方法中对chart处理完毕后通过 this.chart = chart进行赋值
watch: {
mydata(b,a) {
this.chart.changeData(b)
this.chart.render()
}
},
最后得到的图表数据就是数据库中的数据了
更多推荐
已为社区贡献2条内容
所有评论(0)