• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue+antv实现雷达图的示例代码

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、下载依赖

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雷达图内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue基础之侦听器详解发布时间:2022-02-05
下一篇:
JavaScript事件委托原理发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap