如何将Antv G2饼图改写为长尾词？

本文共计779个文字，预计阅读时间需要4分钟。

我这就帮您

少说废话，直接看代码吧！~ npm install @antv/g2 --savetemplate内容：template div id=pieChart /div /js部分：// 引入G2组件import G2 from '@antv/g2';export default { name: '', // 数据部分};

我就废话不多说了，大家还是直接看代码吧~

npm install @antv/g2 --save

template内容：

<template> <div id="pieChart"></div> </template>

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.$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() } },

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

以上这篇在vue项目中引用Antv G2,以饼图为例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。