1. 程式人生 > >ECharts點選事件自定義引數

ECharts點選事件自定義引數

實際開發中可能需要傳自定義引數到點選事件,通過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 }