echarts雷达图点击事件包含（2.x，3.85，4.02）测试最近看见别⼈问的问题，点击雷达图的拐点，获取点击数据的问题，直接上代码。
echarts 2x 的点击事件
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title></title>
<script src="echarts.baidu/build/dist/echarts.js"></script>
</head>
<body>
<div id="main" ></div>
</body>
</html>
<script>
//配置图表路径
paths:{
echarts:'echarts.baidu/build/dist'
}
});
//加载图表js⽂件
require(
[
'echarts',
'echarts/chart/radar',  //要什么图表类型配置什么类型
],
function (ec){
//基于准备好的dom，初始化echarts图表
var myChart= ec.ElementById('main'));
var option = {
polar: [{
indicator: [
{ text: '销售', max: 6500},
{ text: '管理', max: 16000},
{ text: '信息技术', max: 30000},
{ text: '客服', max: 38000},
{ text: '研发', max: 52000},
{ text: '市场', max: 25000}
]
}],
series: [{
name: "",
type: "radar",
data: [{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: "预算分配"
}],
itemStyle: {
normal: {
color: "#1DBB37"
}
}
},{
name: "",
type: "radar",
data: [{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: "实际开销"
}],
itemStyle: {
normal: {
color: "rgb(51, 153, 254)"
}
}
}
],
};
var ecConfig = require('echarts/config');
<(ecConfig.EVENT.CLICK,function(param){
//点击后执⾏操作
alert(param.name)
});
myChart.setOption(option);
});
</script>
echarts 3.x && 4.x 的点击事件
测试版本 3.85和4.02版本
var dom = ElementById("container");
var myChart = echarts.init(dom);
var option = {
polar: [{
indicator: [
{ text: '销售', max: 6500},
{ text: '管理', max: 16000},
{ text: '信息技术', max: 30000},
{ text: '客服', max: 38000},
{ text: '研发', max: 52000},
{ text: '市场', max: 25000}
]
}],
series: [{
name: "",
type: "radar",
data: [{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: "预算分配"
}],
itemStyle: {
normal: {
color: "#1DBB37"
}
}
},{
name: "",
type: "radar",
data: [{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: "实际开销"
}],
itemStyle: {
normal: {
color: "rgb(51, 153, 254)"
}
}
}
],
};
//单击后执⾏操作
<('click',(param) => {
console.log(param)
});
// 双击事件
<('dblclick', (param) => {
console.log(param)
})
myChart.setOption(option);
单击事件参数返回
双击事件参数返回
echarts⿏标事件说明（4.02版本）
{
// 当前点击的图形元素所属的组件名称，
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
/
/ 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。    seriesType: string,
// 系列在传⼊的 option.series 中的 index。当 componentType 为 'series' 时有意义。
seriesIndex: number,
// 系列名称。当 componentType 为 'series' 时有意义。
seriesName: string,
// 数据名，类⽬名
name: string,
// 数据在传⼊的 data 数组中的 index
dataIndex: number,
// 传⼊的原始数据项
data: Object,
// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
// dataType 的值会是 'node' 或者 'edge'，表⽰当前点击在 node 还是 edge 上。    // 其他⼤部分图表中只有⼀种 data，dataType ⽆意义。
dataType: string,
// 传⼊的数据值
value: number|Array
// 数据图形的颜⾊。当 componentType 为 'series' 时有意义。
color: string
}
注意triggerEvent属性的设置。
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title></title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" ></div>
</body>
setoption</html>
<script>
//绑定元素
var myChart = echarts.ElementById('main'));
option = {
title: {
text: '基础雷达图'
},
radar: {
indicator: [
{ name: '销售', max: 6500},
{ name: '管理', max: 16000},
{ name: '信息技术', max: 30000},
{ name: '客服', max: 38000},
{ name: '研发', max: 52000},
{ name: '市场', max: 25000}
],
name:{
formatter:function(v){
console.log(v);
return v;
}
},
triggerEvent:true
},
series: [{
name: '预算vs开销',
type: 'radar',
data : [
{
value : [4300, 10000, 28000, 35000, 50000, 19000],
name : '预算分配'
},
{
value : [5000, 14000, 28000, 31000, 42000, 21000],
name : '实际开销'
}
]
}]
};
//绘制图表
myChart.setOption(option);
//添加点击事件
<('click', function (params) {
console.log(params)
alert(params.name)
if(params.name=="研发"){ //判断点击⽂字
alert("aaa")
}
})
</script>
　params的返回值
个⼈觉得echarts的⽂档和功能还不太丰富，highcherts也是⼀个不错的选择。
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="main" ></div>
</body>
</html>
<script src="jquery.js"></script>
<script src="highcharts.min.js"></script>
<script src="highcharts-more.js"></script>
<script>
$(function () {
Highcharts.chart('main', {
chart: {
polar: true//图表类型
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {  //数据配置项
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert(this.category);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
highcharts有⼀个问题，⽂件体积⽐较⼤，如果图表使⽤的地⽅⽐较少，功能要求不⾼时，建议不使⽤，性能差点。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。