前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >雷达图

雷达图

作者头像
onety码生
发布2020-09-18 09:45:07
9860
发布2020-09-18 09:45:07
举报
文章被收录于专栏:码生
代码语言:javascript
复制
let option = {
 /* 标题 /
 title: {
 text: '自定义雷达图'
 },
 / 说明图 /
 legend: {
 data: ['图一','图二', '张三', '李四']
 },
 radar: [
 {
 / 边角label /
 indicator: [
 { text: '指标一' },
 { text: '指标二' },
 { text: '指标三' },
 { text: '指标四' },
 { text: '指标五' }
 ],
 / 边角label展示名称格式化 /
 name: {
 formatter: '【{value}】',
 textStyle: {
 color: '#72ACD1'
 }
 },
 / 中心坐标 /
 center: ['50%', '50%'],
 / 半径 /
 radius: 120,
 / 开始角度 /
 startAngle: 90,
 / 内部分割部分数 /
 splitNumber: 4,
 / 内部分割形状 /
 shape: 'circle',
 / 内部分割区域配置 /
 splitArea: {
 / css /
 areaStyle: {
 / 颜色,每个区域的颜色 /
 color: ['rgba(114, 172, 209, 0.2)',
 'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
 'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
 / 阴影颜色 /
 shadowColor: 'rgba(0, 0, 0, 0.3)',
 / 阴影半径 /
 shadowBlur: 10
 }
 },
 / 轴线配置 /
 axisLine: {
 lineStyle: {
 color: 'rgba(255, 255, 255, 0.5)'
 }
 },
 / 网格线配置 */
 splitLine: {
 lineStyle: {
 color: 'rgba(255, 255, 255, 0.5)'
 }
 }
 }
 ],
 series: [
 {
 name: '雷达图',
 type: 'radar',
 emphasis: {
 lineStyle: {
 width: 4
 }
 },
 data: [
 {
 value: [100, 8, 0.40, -80, 2000],
 name: '图一',
 symbol: 'rect',
 symbolSize: 5,
 lineStyle: {
 type: 'dashed'
 }
 },
 {
 value: [60, 5, 0.30, -100, 1500],
 name: '图二',
 areaStyle: {
 color: 'rgba(255, 255, 255, 0.5)'
 }
 }
 ]
 }
 ]
 }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档