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函数中监听数据，数据发生变化时重新渲染图表

  watch: {
    
    
    mydata(b,a) {
    
    
        this.chart.changeData(b)
        this.chart.render()
    }
  },

最后得到的图表数据就是数据库中的数据了