echarts 雷达图 配置边缘文字带图 点击边缘的文字的回调
- 渐变色的宽线条,5.0版本上下两种首尾闭合的方式
- 在radar中(也就是边上一圈文字加上数值和图片)
- 能够实现点击边上的图片文字对每一项进项操作(比如跳转相应页面)
<template>
<div class="radar-box">
<div id="radar-pie" ref="radar" :events="chartEvents" />
<!-- <h2>{
{ text }}</h2> -->
</div>
</template>
<script>
import * as echarts from 'echarts'
import AllIcon from '@/assets/img/right.png'
import MentalIcon from '@/assets/img/report-question.png'
// import common from '@/data/index.js'
export default {
props: {
// loopData: {
// type: Array,
// default: () => []
// }
whereUse: {
type: String,
default: 'all'
},
values: {
type: Array,
default: () => []
}
},
data() {
return {
text: 'gtrgrgbv',
maxNumber: 110,
reportText: ['心脏健康', '生命活力', 'BMI', '神经系统', '呼吸健康'],
mentalText: ['抗压能力', '自主神经\n平衡系统度', '身体活力', '心脏稳定性指数', '自主神经 \n系统活性', '心理情绪 ']
// mentalText2: ['抗压能力', '自主神经', '身体活力', '心脏稳定性指数', '自主神经 ', '心理情绪 ']
}
},
computed: {
},
mounted() {
this.draw()
},
methods: {
draw() {
// const maxIndicator = 180 // 雷达图的最大值
const myChart = echarts.init(this.$refs.radar)
const values = this.values
const indicatorList = this.whereUse === 'all' ? this.reportText.map(item => {
return {
name: item,
max: this.maxNumber
}
}) : this.whereUse === 'mental' ? this.mentalText.map(item => {
return {
name: item,
max: this.maxNumber
}
}) : ''
const Option = {
radar: {
// shape: 'circle',
// startAngle: 60,
center: ['50%', '50%'],
radius: '55%',
closed: true,
name: {
textStyle: {
color: '#65639C',
borderRadius: 3,
padding: [3, -5]
},
rich: {
a: { // 名字
color: '#65639C',
align: 'center',
lineHeight: 20,
fontSize: 12
},
b: { // 数据
color: '#5137DF',
align: 'center',
// backgroundColor: '#666',
fontSize: 17,
fontWeight: 600,
padding: 2,
borderRadius: 4
},
c: { // 箭头
align: 'center',
width: 15,
height: 15,
fontSize: 10,
backgroundColor: { // 重点在这设置图片
image: this.whereUse === 'all' ? AllIcon : this.whereUse === 'mental' ? MentalIcon : ''
}
}
},
formatter: (a, b) => {
console.log('显示的数值', a, b, indicatorList.map(item => item.name).indexOf(a))
const val = values[indicatorList.map(item => item.name).indexOf(a)]
return `{a|${a}}\n{b|${val}}{c|}`
}
},
axisLine: {
lineStyle: {
color: '#CEC9E5',
type: 'dotted',
dashOffset: 15
}
},
indicator: indicatorList,
splitArea: {
show: true,
areaStyle: {
color: ['#FAF7FF', '#fff', '#FAF7FF', '#F5EFFF', '#FAF7FF', '#F5EFFF'] // 图表背景的颜色
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'dotted',
color: '#CEC9E5' // 设置网格的颜色
}
},
triggerEvent: true
// shape: 'circle'
},
series: [
// { 5.0之前使用这个使得首尾相连
// name: '首尾相连',
// type: 'radar',
// // radarIndex: 1,
// z: 1,
// symbolSize: 0,
// symbol: 'diamond',
// // symbolRotate: 180,
// data: [{
// value: values,
// name: '闭合',
// itemStyle: {
// normal: {
// color: '#639AFF'
// }
// }
// }]
// },
{
name: '雷达图',
type: 'radar',
symbolSize: 0,
// radarIndex: 2,
z: 2,
// areaStyle: {normal: {}},
data: [{
value: values,
name: '当前部门',
emphasis: {
label: {
show: true,
color: '#fff',
fontSize: 14,
backgroundColor: '#0D1B42',
borderRadius: 5,
padding: 3,
shadowBlur: 3
}
},
itemStyle: {
normal: {
color: '#639AFF',
lineStyle: {
width: 10
}
}
},
lineStyle: {
width: 10,
// type: [6, 10],
color: new echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: '#639AFF' },
{ offset: 1, color: '#B353FF' }
]
),
cap: 'round',
join: 'miter',
miterLimit: 5
}
}
]
}
]
}
console.log('图', Option)
myChart.setOption(Option)
// window.onresize = myChart.resize
window.addEventListener('resize', function() { myChart.resize() })
// 添加点击事件监听器
const that = this
myChart.on('click', function(e) {
console.log('点击图', e)
const text = e.name
// const currentText = text.match(/{a|(\S*)}/)[1]
const currentIndexList = (that.whereUse === 'all' ? that.reportText : that.whereUse === 'mental' ? that.mentalText : []).map(item => text.indexOf(item))
const currentIndex = currentIndexList.findIndex((v) => v !== -1)
console.log('是否需要划拉', text, currentIndex)
if (currentIndex !== -1) {
that.$emit('change', currentIndex, that.whereUse)
}
})
// myChart.getZr().off('click')
// // 点击文字(只有文字不配图片单独配置的话)
// myChart.getZr().on('click', function(e) {
// console.log('点击图边上文字部分', e, e.topTarget.style, e.topTarget.style.text)
// const text = e.topTarget.style.text
// const currentIndex = (that.whereUse === 'all' ? that.reportText : that.whereUse === 'mental' ? that.mentalText2 : []).findIndex((v) => v === text)
// console.log('是否需要划拉', text, currentIndex)
// if (currentIndex !== -1) {
// that.$emit('change', currentIndex)
// }
// })
},
handleClick(params) {
// 点击事件处理函数,可以在这里调用其他函数
console.log(params)
}
}
}
</script>
<style lang="scss" scoped>
.radar-box {
// background-color: #000;
display: flex;
color: #fff;
width: 95%;
margin: auto;
}
#radar-pie {
width: 100%;
height: 280px;
margin-top: 10px;
}
</style>