html
复制代码
<template>
<div id="echartBasic"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted() {
var chartDom = document.getElementById('echartBasic')
var myChart = echarts.init(chartDom)
const dataObject = [
{
name: 'E',
value: 3000
},
{
name: 'S',
value: 3000
},
{
name: 'T',
value: 3000
},
{
name: 'J',
value: 2000
},
{
name: 'I',
value: 3000
},
{
name: 'N',
value: 2500
},
{
name: 'F',
value: 3500
},
{
name: 'P',
value: 4000
}
]
const dataArray = dataObject.map(n => n.value)
const minNum = Math.min(...dataArray)
const maxNum = Math.max(...dataArray)
const zhongNum = (maxNum - minNum) / 3 + minNum
const option = {
title: {},
legend: {
data: []
},
radar: [
// 虚线
{
center: ['50%', '50%'],
radius: 70,
shape: 'circle',
splitNumber: 4,
color: ['#FFA939'],
axisName: {
formatter: '{value}',
fontSize: 16,
fontWeight: 'bolder',
color: 'rgba(1, 242, 182, 1)'
},
splitArea: {
areaStyle: {
color: ['transparent', 'transparent', 'rgba(114, 172, 209, 0)', 'transparent', 'rgba(114, 172, 209, 0)']
}
},
axisLine: {
lineStyle: {
color: '#E3E3E3'
}
},
splitLine: {
lineStyle: {
color: '#E3E3E3',
type: 'dashed' //dashed solid dotted 射线类型【实线 虚线】
}
},
indicator: dataObject.map(n => ({
name: n.name,
max: maxNum,
color: n.value >= zhongNum ? '#01F2B6' : '#D9D9D9'
}))
},
// 实线
{
center: ['50%', '50%'],
radius: 70,
indicator: dataObject.map(() => ({max: maxNum})),
splitNumber: 1,
shape: 'circle',
splitArea: {
show: false
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: '#E3E3E3',
type: 'solid',
width: 4
}
}
}
],
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
// 真实的
{
symbol: 'none',
value: dataArray,
itemStyle: {
normal: {
color: 'rgba(25, 255, 198, 0.8)' //拐点颜色
}
},
lineStyle: {
width: 2,
labelLine: {
color: 'rgba(25, 255, 198, 0.8)' //拐点边框颜色
}
},
areaStyle: {
// 区域颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: 'rgba(171, 255, 129, 1)'},
{offset: 1, color: 'rgba(25, 255, 198, 1)'}
])
}
},
// 虚假的
{
symbol: 'none',
value: dataObject.map(() => zhongNum),
itemStyle: {
normal: {
color: 'rgba(182, 235, 255, 0.5)' //拐点颜色
}
},
lineStyle: {
width: 2,
labelLine: {
color: 'rgba(182, 235, 255, 0.5)' //拐点边框颜色
}
},
areaStyle: {
// 区域颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.1, [
{offset: 0, color: 'rgba(226, 249, 255, 0.5)'},
{offset: 1, color: 'rgba(182, 235, 255, 0.5)'}
])
}
},
// 拐点
...dataObject.map((n, index) => {
return {
type: 'radar',
// 除了当前的，其他的设置无限大
value: dataObject.map((_, i) => (i == index ? maxNum : maxNum * 100)),
z: 2,
itemStyle: {
normal: {
color: n.value >= zhongNum ? '#01F2B6' : '#D9D9D9'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false //隐藏标示线
}
}
}
})
// {
// value: dataObject.map(() => maxNum),
// itemStyle: {
// normal: {
// color: '#01F2B6'
// }
// },
// lineStyle: {
// width: 0,
// labelLine: {
// show: false //隐藏标示线
// }
// }
// }
]
}
]
}
option && myChart.setOption(option)
},
}
</script>
<style>
#echartBasic {
width: 210px;
height: 210px;
margin: 10px auto 8px auto;
}
</style>
