vue+antv实现雷达图的示例代码
程序员文章站
2022-06-22 12:21:41
一、下载依赖npm install @antv/data-setnpm install @antv/g2二、代码实现
一、下载依赖
npm install @antv/data-set
npm install @antv/g2
二、代码实现
<template>
<div ref="container" />
</template>
<script>
import dataset from '@antv/data-set'
import { chart } from '@antv/g2'
export default {
// 创建雷达图
mounted() {
this.constradar()
},
methods: {
constradar() {
const data = [
{ item: '工作效率', a: 70, b: 30 },
{ item: '考勤', a: 60, b: 70 },
{ item: '积极性', a: 50, b: 60 },
{ item: '帮助同事', a: 40, b: 50 },
{ item: '自主学习', a: 60, b: 70 },
{ item: '正确率', a: 70, b: 50 }
]
const { dataview } = dataset
const dv = new dataview().source(data)
dv.transform({
type: 'fold',
fields: ['a', 'b'], // 展开字段集
key: 'user', // key字段
value: 'score' // value字段
})
const chart = new chart({
container: this.$refs.container,
autofit: true,
height: 500
})
chart.data(dv.rows)
chart.scale('score', {
min: 0,
max: 80
})
chart.coordinate('polar', {
radius: 0.8
})
chart.tooltip({
shared: true,
showcrosshairs: true,
crosshairs: {
line: {
style: {
linedash: [4, 4],
stroke: '#333'
}
}
}
})
chart.axis('item', {
line: null,
tickline: null,
grid: {
line: {
style: {
linedash: null
}
}
}
})
chart.axis('score', {
line: null,
tickline: null,
grid: {
line: {
type: 'line',
style: {
linedash: null
}
}
}
})
chart.line().position('item*score').color('user').size(2)
chart
.point()
.position('item*score')
.color('user')
.shape('circle')
.size(4)
.style({
stroke: '#fff',
linewidth: 1,
fillopacity: 1
})
chart.area().position('item*score').color('user')
chart.render()
//修改数据
const newdata = [
{ item: '工作效率', a: 20, b: 30 },
{ item: '考勤', a: 30, b: 70 },
{ item: '积极性', a: 10, b: 60 },
{ item: '帮助同事', a: 40, b: 50 },
{ item: '自主学习', a: 60, b: 70 },
{ item: '正确率', a: 20, b: 50 }
]
// 立刻更新
settimeout(() => {
// 处理数据开始
const dv = new dataview().source(newdata)
dv.transform({
type: 'fold',
fields: ['a', 'b'], // 展开字段集
key: 'user', // key字段
value: 'score' // value字段
})
// 处理结束
// 正式使用处理之后的数据进行图标更新
chart.changedata(dv.rows)
}, 3000)
}
}
}
</script>
<style></style>
三、实现效果
数据修改前
数据修改后
到此这篇关于vue+antv实现雷达图的文章就介绍到这了,更多相关vue雷达图内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！