用vue3+echarts实现圆形雷达图
本文首发于公众号【一个老码农】
- 安装
echarts
npm install echarts
2. 需要声明一个用来挂载雷达图的div
<template>
<div>
<div ref="chartRef" class="chart-div"></div>
</div>
</template>
<script setup lang="ts">
const chartRef = ref()
</script>
<style scoped>
.chart-div {
margin: 0 auto;
width: 300px;
height: 360px;
}
</style>
- 根据数据和配置渲染雷达图
以下只给出script
代码
<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const chartRef = ref()
const showChart = () => {
var myChart = echarts.init(chartRef.value)
let option
option = {
title: {
text: ''
},
legend: {
// 设置图例显示在底部,可根据实际情况调整
bottom: 0,
// 'circle':圆点(默认值)、'rect':方形、'triangle':三角形、'none':不显示
icon: 'rect',
// 图例宽度
itemWidth: 12,
// 图例高度
itemHeight: 12,
textStyle: {
fontSize: 12, // 设置字号大小
color: '#595959' //设置图例名称颜色
},
// 设置每个图例项的颜色和图例名称
data: [
{
name: '张三',
itemStyle: {
color: 'rgba(81, 132, 210, 0.5)'
}
},
{
name: '李四',
itemStyle: {
color: 'rgba(85, 197, 187, 0.5)'
}
},
{
name: '王五',
itemStyle: {
color: 'rgba(120, 131, 252, 0.5)'
}
},
{
name: '赵六',
itemStyle: {
color: 'rgba(150, 171, 197, 0.5)'
}
},
{
name: '孙七',
itemStyle: {
color: 'rgba(216, 116, 116, 0.5)'
}
}
]
},
radar: {
// polygon 多边形、circle 圆形
shape: 'circle',
// 设置每个维度的名称及最大值,这里每科目满分为100分
indicator: [
{ name: '语文', max: 100 },
{ name: '数学', max: 100 },
{ name: '英语', max: 100 },
{ name: '物理', max: 100 },
{ name: '化学', max: 100 },
{ name: '生物', max: 100 },
{ name: '历史', max: 100 },
{ name: '政治', max: 100 },
{ name: '地理', max: 100 },
{ name: '体育', max: 100 }
],
// 雷达图内部嵌套的多边形或圆形个数(分割线)
splitNumber: 4,
// 分割线样式设置
splitLine: {
lineStyle: {
color: '#EEEFF3', // 设置分割线的颜色
width: 2
}
},
splitArea: {
areaStyle: {
// 分割线之间的填充色设置
color: ['#fff', '#fff', '#fff']
}
},
// 维度项名称设置,颜色、字号(维度在此指的是每个科目)
axisName: {
color: '#8C8C8C',
fontSize: 14
},
// 维度轴线设置
axisLine: {
lineStyle: {
color: '#EEEFF3', // 设置轴线的颜色
width: 1
}
}
},
// 系列数据设置
series: [
{
name: '',
type: 'radar',
symbol: 'none',
data: [
{
// 设置每科目的分值
value: [80, 90, 85, 90, 70, 100, 80, 90, 85, 90],
name: '张三',
areaStyle: {
// 每个数据项的背景颜色设置
color: 'rgba(81, 132, 210, 0.2)'
},
lineStyle: {
// 每个数据项的线的颜色
color: 'rgba(81, 132, 210)'
}
},
{
value: [90, 85, 90, 70, 100, 80, 90, 85, 90, 70],
name: '李四',
areaStyle: {
color: 'rgba(85, 197, 187, 0.2)'
},
lineStyle: {
color: 'rgba(85, 197, 187)'
}
},
{
value: [90, 85, 90, 70, 100, 80, 90, 85, 90, 70],
name: '王五',
areaStyle: {
color: 'rgba(120, 131, 252, 0.2)'
},
lineStyle: {
color: 'rgba(120, 131, 252)'
}
},
{
value: [100, 80, 90, 85, 90, 70, 85, 90, 70, 80],
name: '赵六',
areaStyle: {
color: 'rgba(150, 171, 197, 0.2)'
},
lineStyle: {
color: 'rgba(150, 171, 197)'
}
},
{
value: [80, 90, 85, 90, 70, 85, 90, 70, 80, 100],
name: '孙七',
areaStyle: {
color: 'rgba(216, 116, 116, 0.2)'
},
lineStyle: {
color: 'rgba(216, 116, 116)',
// 设置为虚线
type: 'dashed'
}
}
]
}
]
}
myChart.setOption(option)
}
onMounted(() => {
showChart()
})
</script>
效果图如下: