用antv-G2实现雷达图

这种图在echarts中也有，这里我们用蚂蚁数据可视化部门的产品antv-G2

https://antv.vision/zh

https://g2.antv.vision/zh/examples/radar/radar#basic
这类第三方的工具，基本上都是根据官方文档跑起来初始demo，然后查手册进行学习

安装必要依赖

npm install @antv/data-set @antv/g2

创建一个组件来实现雷达图

在这个组件中来创建雷达图组件并完成初始化。

|-index.vue
|-calender.vue # 日历组件
|-radar.vue    # 雷达图组件

下面的代码在官网中参考过来的：雷达图 | G2

<template><div id="container" />
</template><script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
export default {mounted() {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 } = DataSetconst dv = new DataView().source(data)dv.transform({type: 'fold',fields: ['a', 'b'], // 展开字段集key: 'user', // key字段value: 'score' // value字段})const chart = new Chart({container: '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()}
}
</script>

画图涉及DOM元素,要在mounted时,才能在vue中访问

总结

api
        ○日期：今天星期几？ (new Date()).getDay()
        ○字符串截取。 "2021-05-06" ---> 06
●数据可视化
        ○echarts
        ○antv-g2
                ■获取dom，要在vue的mounted钩子函数

用antv-G2实现雷达图相关推荐

antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: js部分: //引入G2组件 import G2 from "@a ...
SpringBoot+AntV实现饼状图中的花瓣图
场景效果简介 Anv官网: http://antv.alipay.com/zh-cn/g2/3.x/index.html G2是可视化图形语法. G2的API文档: https://www.yuq ...
基于AntV G2实现一个通用可视化Vue插件
前言 AntV G2坚持自然.确定性.意义感.生长性的设计价值观.与其他可视化插件不同的是,G2是以数据驱动的高交互可视化图形语法,具有高度的易用性和可扩展性. 随着业务可视化不断发展,数据复杂度越来 ...
Python之基础详解（十二）：进阶，用pyecharts绘制世界地图、玫瑰图、雷达图
我之前发过一篇博文基本讲解了基本绘制地图的方法. 我这里打算直接调用api来创建实时动态地图,并且分析数据绘制了玫瑰图,雷达图. 步骤配套资源下载: 第一步:配置环境第二步:爬取数据第三步:创建 ...
可转债列表页与日频交易数据呈现：fastapi+antV G2
百天计划之第36篇,关于"AI量化智能投研平台"建设. 目标可以很大,行动要聚焦且具体. 把一件件小事做成,做出价值点就可以了. 好奇心可以很重,也可以探索很多新鲜的知识,但需要围 ...
JFreeChart 生成蜘蛛网/刻度雷达图
JFreeChart 实现雷达图一. 效果展示二.功能实现 2.1 添加maven依赖  <dependency><groupId> ...
g2.Chart折线图绘制
目录一.官方文档二.g2.Chart折线图绘制 (一).引入g2.js (二).创建 div 图表容器 (三).绘图 1.静态数据 2.动态数据一.官方文档 https://www.yuque. ...
差异表达基因热图怎么看_R绘图雷达图-单基因泛癌差异表达的另类展现形式
往期回顾: R语言学习系列之"多变的热图" 蚂蚁金服在线可视化引擎 G2 R绘图:无与伦比的华丽风行(桑基图) R绘图:相关性分析与作图(单基因相关性) R绘图:相关性分析与作图R ...
html5雷达图绘制,Canvas 绘制雷达图
最近做的一个需求,场景之一是绘制一个雷达图,找了一圈,似乎 AntV 下的 F2 很适合拿来主义: 但是接着又考虑了一下,我当前所做的项目并不是可视化项目,今后大概率也不会有这种可视化图表的需求,只是 ...

用antv-G2实现雷达图

安装必要依赖

创建一个组件来实现雷达图

总结

用antv-G2实现雷达图相关推荐

最新文章

热门文章