最近一个需求需要实现以下效果图,尝试了很多种方法都不行,用过g6的同心圆,虽然可以使页面呈现这种效果但是页面缩放时无法获取节点的实际位置导致点击事件无法触发,最后只能回归原始,尝试使用echarts的雷达图来自己修改样式,终于成功,特记录一下以便下次在遇到好找
实现效果图
代码:
init() {
let that = this;
var chartDom = document.getElementById('container');
const width = chartDom.scrollWidth;
const height = chartDom.scrollHeight;
var myChart = echarts.init(chartDom);
var option;
let data = []
let value = []
let i = 1
//对数据的一些处理
if (that.keyAbility.graduateList) {
that.keyAbility.graduateList.forEach(s => {
let course = that.kidCourseList.find(k =>
k.kid == s.kid)
if (course) {
data.push({
i: i++,
name: s.kname,
count: s.avgCount + '%',
max: 100,
id: s.kid,
size: course.courseSize
})
value.push(s.avgCount)
} else {
data.push({i: i++, name: s.kname, count: s.avgCount + '%', max: 100, id: s.kid, size: 0})
value.push(s.avgCount)
}
})
option = {
radar: [
{
indicator: data,//接口获取的数据
triggerEvent: true,
center: ['50%', '50%'],
radius: '60%',
splitNumber: 0,
shape: 'circle',
//文字渲染
axisName: {
formatter: function (value, params) {
return '{top|' + params.i + '.' + value + '}' + '\n' + '{end|' + params.count + ' ' + params.size + '门}';
},
rich: {
// 属性上部分的样式
top: {
color: '#fff',
fontSize: 18,
fontWeight: 600,
align: 'center',
lineHeight: 24
},
// 属性下部分样式
end: {
color: '#24E9EA',
fontSize: 16,
// fontWeight: 600,
align: 'center',
lineHeight: 24
}
}
},
axisLine: {
lineStyle: {
color: '#52ABDC',
type: "dashed"
}
},
// 分割域配置
splitArea: {
areaStyle: {
color: ['transparent'],
}
},
// 分割线配置
splitLine: {
lineStyle: {
color: ['rgba(238, 197, 102, 0)'].reverse()
}
}
}
],
graphic: [
{
type: 'image',
style: {
image: '/yethan/public/assets/images/bigScreen/wingsuit.png', // 图片的URL
x: width / 2 - 50, // 图片的横坐标位置(相对于雷达图)
y: height / 2 - 50, // 图片的纵坐标位置(相对于雷达图)
// z:"9999",
width: 100, // 图片的宽度
height: 100, // 图片的高度
}
},
{
type: 'text',
style: {
text: [
that.grade + "级"
],
x: width / 2 - 35, // 文字的水平位置
y: height / 2 + 55, // 文字的垂直位置
fontSize: [20], // 文字的字号
fill: '#F9220F',
fontWeight: 'bold', // 文字的粗细
textBaseline: 'middle', // 文字的垂直对齐方式
textAlign: 'center' // 文字的水平对齐方式
}
},
{
type: 'text',
style: {
text: [
"能力图像"
],
x: width / 2 + 35, // 文字的水平位置
y: height / 2 + 57, // 文字的垂直位置
fontSize: [16], // 文字的字号
fill: '#fff',
fontWeight: 'bold', // 文字的粗细
textBaseline: 'middle', // 文字的垂直对齐方式
textAlign: 'center' // 文字的水平对齐方式
}
}
],
series: [
{
type: 'radar',
emphasis: {
lineStyle: {
width: 4
}
},
},
]
};
option && myChart.setOption(option);
},