ECharts點選事件自定義引數
阿新 • • 發佈:2019-02-16
實際開發中可能需要傳自定義引數到點選事件,通過params.data(傳入的原始資料項)實現自定義引數(console列印結果)
效果圖:
原始碼:(注意紅色部分)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>echartsDemo</title>
<script type="text/javascript" src="js/echarts/echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準備一個具備大小(寬高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
//點選事件
myChart.on('click', function(param) {
console.log(param);
console.log(param.data.name);
console.log(param.data.value);
console.log(param.data.userDefined);
});
// 指定圖表的配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [{
name: "名稱",
value: 5,
userDefined: "test123456"
} , 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
ECharts所有的滑鼠事件包含引數 params
,這是一個包含點選圖形的資料資訊的物件,如下格式:
{// 當前點選的圖形元素所屬的元件名稱,// 其值如 '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
}