【待处理：自定义图例点击图例颜色置灰，雷达图对应每一圈的颜色也要置灰】
2个文件
<template>
<div class="chart">
<div class="header">
<div class="title">管理评价画像</div>
<div class="legend">
<ul>
<li v-for="(item,index) in legend" :key="index">
<i class="itembefore" :style="{color:item.color}"></i>
<div>{{item.title}}</div>
</li>
</ul>
</div>
</div>
<div id="radar"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { option, legend } from "./options";
export default {
data() {
return {
myChart: {},
legend
};
},
mounted() {
this.myChart = echarts.init(document.getElementById("radar"));
this.myChart.setOption(option);
}
};
</script>
<style lang="less" scoped>
.chart {
width: 374px;
transform: translate(50%, 50%);
.header {
display: block;
height: 65px;
background-color: rgb(84, 84, 111);
color: #fff;
.title {
padding: 10px 0 0 28px;
}
.legend {
ul {
display: flex;
justify-content: center;
padding: 0;
li {
list-style: none;
padding: 0 10px;
box-sizing: border-box;
font-size: 12px;
display: flex;
.itembefore::before {
content: "----";
margin-right: 4px;
}
}
}
}
}
#radar {
width: 374px;
height: 220px;
.format {
display: flex;
justify-content: space-between;
border: red;
width: 300px;
.item-name {
width: 300px;
}
.item-value {
width: 300px;
}
}
.title {
}
}
}
</style>
options.vue
let valueArr = [83, 53, 81, 70, 85, 48, 90, 10, 6];
let i = -1;
let itemValue = 0;
let indicator = [{ name: '制度及机制建设', max: 100, color: "rgb(192, 188, 195)" }, { name: '报表统计', max: 100, color: "rgb(192, 188, 195)" }, { name: '披露与报备', max: 100, color: "rgb(192, 188, 195)" }, { name: '交易识别与审批', max: 100, color: "rgb(192, 188, 195)" }, { name: '限额监控', max: 100, color: "rgb(192, 188, 195)" }, { name: '关联方管理', max: 100, color: "rgb(192, 188, 195)" }];
export const option = {
backgroundColor: 'rgb(84, 84, 111)',
tooltip: {
formatter: () => {
const format = indicator.map((items, index) => {
return `<div class=format>
<div class='item-name'>${items.name}</div>
<div class='item-value'>${valueArr[index]}</div>
</div>`
})
let str = `<div class='title'>管理评价</div>`
format.forEach((i) => {
str += i
})
return str
}
},
radar: {
center: ['50%', '50%'], //调整雷达图的位置
indicator: indicator,
splitArea: {
show: true,
},
splitNumber: 3, // 雷达图线条
splitLine: {
lineStyle: {
color: ['#03cc71', '#ff4d4d', '#ffa800'],
type: 'dashed'
}
},
startAngle: 60,
radius: 70,
axisLine: {
lineStyle: {
type: "dashed"
}
},
name: {
rich: {
a: {
color: '#000',
lineHeight: 16
},
b: {
color: '#fff',
align: 'center',
backgroundColor: '#F2821D', //#F7C242,#B0DAAA,#CECECE
padding: 2,
borderRadius: 4
},
c: {
color: '#fff',
align: 'center',
backgroundColor: '#F7C242', //#F7C242,#B0DAAA,#CECECE
padding: 2,
borderRadius: 4
},
d: {
color: '#fff',
align: 'center',
backgroundColor: '#B0DAAA', //#F7C242,#B0DAAA,#CECECE
padding: 2,
borderRadius: 4
},
e: {
color: '#fff',
align: 'center',
backgroundColor: '#CECECE', //#F7C242,#B0DAAA,#CECECE
padding: 2,
borderRadius: 4
}
},
formatter: (a) => {
let isOdd = (valueArr.length % 2 != 0)
let nosplitArr = isOdd ? [0, parseInt(valueArr.length / 2), parseInt(valueArr.length / 2) + 1] : [0, parseInt(valueArr.length / 2)]
console.log('splitArr', nosplitArr);
i++
let splitStr = '\n'
if (nosplitArr.includes(i)) {
splitStr = ' '
}
itemValue = parseInt(`${valueArr[i]}`)
if (itemValue > 80) {
return `{b|${valueArr[i]}}\n{a|${a}}${splitStr}`
} else if (itemValue > 60) {
return `{c|${valueArr[i]}}\n{a|${a}}${splitStr}`
} else if (itemValue > 50) {
return `{d|${valueArr[i]}}\n{a|${a}}${splitStr}`
} else {
return `{e|${valueArr[i]}}\n{a|${a}}${splitStr}`
}
}
}
},
series: [{
type: 'radar',
itemStyle: {
color: 'rgb(255, 207, 66)', // 颜色
borderColor: "rgba(254, 252, 252, 1)"
},
areaStyle: {
opacity: 0.1, // 透明度
},
symbolSize: 6,
data: [{
value: valueArr,
symbolSize: 8,
areaStyle: {
// color: '#AEE4FF'
color: 'rgb(255, 207, 66)', // 颜色
}
}]
}],
};
export const legend = [{ title: "最大值", color: "#03cc71" }, { title: "平均值", color: "#ffa800" }, { title: "最小值", color: "#ff4d4d" }]
