echarts的雷达图使用记录-indicator加点击事件
程序员文章站
2022-05-14 13:05:12
...
看图：
源码：
里面很重要的一句是： triggerEvent: true //开启雷达图的边角名称可点击
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = null;
option = {
title: {
text: '专业雷达图'
},
tooltip: {},
color: ['#C44003', '#7db800', '#00b3be', '#004BBF'],//雷达图中的各方向的线的颜色
legend: {
orient: 'vertical', // 布局方式，默认为水平布局，可选为： 'horizontal' ¦ 'vertical'
x: 'left', // 水平安放位置，默认为全图居中，可选为： 'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为： 'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
data: ['*', '省级', '院级', '本专业'],
top: 30, //距离上面的名称的距离
itemWidth: 20, //图示的宽度
itemHeight: 10, //图示的高度
itemGap: 10, //图示之间的行间距
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#00B3BF',
borderRadius: 3,
padding: [3, 7],
}
},
indicator: [
{name: '师资队伍', max: 6500},
{name: '教育教学', max: 16000},
{name: '实践教学条件', max: 30000},
{name: '社会服务', max: 38000},
{name: '人才培养效果', max: 52000}
],
triggerEvent: true //开启雷达图的边角名称可点击
},
series: [{
name: '专业画像',
type: 'radar',
// areaStyle: {normal: {}},
data: [
{
value: [4300, 1000, 28000, 35000, 50000, 19000],
name: '*'
},
{
value: [5000, 14000, 28000, 3100, 42000, 21000],
name: '省级'
},
{
value: [5100, 1400, 12501, 3100, 42001, 2100],
name: '院级'
},
{
value: [2100, 4400, 1501, 9100, 2001, 2900],
name: '本专业'
}
]
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
// myCharts是整个echars的dom对象
myChart.on('click', function (params) {
console.log(params)
if (params.name == "师资队伍") {
alert("您选中了 师资队伍")
}
alert(params.name);
})
</script>
</body>
</html>