最近看見別人問的問題，點擊雷達圖的拐點，獲取點擊數據的問題，直接上代碼。
echarts 2x 的點擊事件
echarts配置問題：https://www.douban.com/note/509404582/
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title></title>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
<script>
//配置圖表路徑
require.config({
paths:{
echarts:'http://echarts.baidu.com/build/dist'
}
});
//加載圖表js文件
require(
[
'echarts',
'echarts/chart/radar', //要什么圖表類型配置什么類型
],
function (ec){
//基於准備好的dom，初始化echarts圖表
var myChart= ec.init(document.getElementById('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');
myChart.on(ecConfig.EVENT.CLICK,function(param){
//點擊后執行操作
alert(param.name)
});
myChart.setOption(option);
});
</script>
echarts 3.x && 4.x 的點擊事件
測試版本 3.85和4.02版本
var dom = document.getElementById("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)" } } } ], }; //單擊后執行操作 myChart.on('click',(param) => { console.log(param) }); // 雙擊事件 myChart.on('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
}
還有一個就是給雷達圖的文字綁定點擊事件，上代碼。api地址：http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA
注意triggerEvent屬性的設置。
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title></title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
<script>
//綁定元素
var myChart = echarts.init(document.getElementById('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);
//添加點擊事件
myChart.on('click', function (params) {
console.log(params)
alert(params.name)
if(params.name=="研發"){ //判斷點擊文字
alert("aaa")
}
})
</script>
params的返回值
個人覺得echarts的文檔和功能還不太豐富，highcherts也是一個不錯的選擇。
highcharts雷達圖（highcharts叫蜘蛛圖），案例鏈接：https://www.hcharts.cn/demo/highcharts/polar-spider
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="main" style="height:400px;"></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有一個問題，文件體積比較大，如果圖表使用的地方比較少，功能要求不高時，建議不使用，性能差點。