主題：使用echarts繪製圖表並，點擊曲線上的點時跳轉到指定鏈接，點擊繪圖區域空白處時，繪製標線
本文中使用的是按需加載的方式引入 echart，若需要使用標線功能，請至少require(“echarts/lib/component/markLine”);
點擊事件
echarts中，有兩種方式可以捕捉點擊事件，
- 用於捕捉曲線的點擊事件：chartInstance.on(‘click’,funtion(param){})；
- 用於捕捉畫布的點擊事件：chartInstance.getZr().on(‘click’,funtion(param){});
第一種點擊事件的捕捉方式，僅能捕捉點擊到echart圖表元素上的事件，例如點擊在曲線上，點擊在座標軸上(需要設置座標軸的slient屬性爲false)，點擊在標線上(需要設置MarkLine的slient屬性爲false); 但無法捕捉點擊在空白位置的事件;
以下是點擊事件回調函數的參數，
來自 events.鼠標事件
{
// 當前點擊的圖形元素所屬的組件名稱，
// 其值如 '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,
// 用戶自定義的數據。只在 graphic component 和自定義系列（custom series）
// 中生效，如果節點定義上設置瞭如：{type: 'circle', info: {some: 123}}。
info: *
}
這個使用比較簡單，我們可以在 series.data中攜帶一些冗餘的數據方便我們在點擊事件回調函數中獲取數據
如,
chartInstance.setOption({
series:{
data: [[x,y, data1,data2,data3...], [x,y, data1,data2,data3...],]
}
});
這樣，在回調函數中 可以獲取到這些冗餘信息，如：
function(param)
{
let nowData = param.data;// [x,y, data1,data2,data3...]
///當然也可以通過索引獲取數據
let index = param.dataIndex；
}
第二種點擊事件的捕捉方式，能捕捉任意點擊在 Canvas上的點擊事件，但是不太方便區分鼠標具體點擊在哪個圖表元素上
這種方式echarts官方文檔中沒有明確說明，並且事件的參數也不夠明確，這裏我依據我的一些經驗給出我的一些用法：
chartInstance.getZr().off('click');
chartInstance.getZr().on('click', function (param)
{
let x = param.offsetX; //獲取當前點擊位置相對於圖表左上角的 橫向偏移量 (單位是像素, 但是不建議直接使用，因爲你可能無法正確映射到圖表上的位置)
let y = param.offsetY; // 獲取當前點擊位置相對於圖表左上角的縱向偏移量
let result = chartInstance.convertFromPixel({
seriesIndex:0,
xAxisIndex:0,
},[x,y]); // echarts 4.0新增 功能，將像素座標轉換爲圖表的邏輯座標，這裏的result就是當前點擊位置的圖表座標索引了
let xAxisDataIndex= result[0];
let xData= xAxisData[xAxisDataIndex]; //通過原始x軸數組獲取x軸位置，可以類似的獲取series的數據
｝
上面的代碼中，我們可以獲取點擊位置的像素座標，並將其轉換爲點擊位置的邏輯座標（也就數據索引）,但是有一個問題，我們無法判斷點擊的位置是圖表元素還是空白處，
下面是點擊在曲線上時的事件參數
下面是點擊在空白處時的事件參數
下面是點擊在非曲線上，但是是圖表元素上時的事件參數
我多次實踐後，得出以下結論：
- param.target !== ‘undefined’ 時，表示點擊在曲線上
- param.target === ‘undefined’ && param.topTarget !== ‘undefined’ 時，表示點擊在非曲線的圖表元素上
- param.tartget === ‘undefined’ && param.topTarget === ‘undefined’ 時，表示點擊在空白區域
因此，我們可以通過上面的條件來判斷當前點擊的位置是否是曲線，從而完成一些操作；
以下是核心示例代碼：
initClickWithMarkLine:function()
{
let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let option = {
xAxis: {
type: 'category',
data: xAxisData,
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
let dom = document.getElementById('app2');
let chartInstance = echarts.init(dom);
chartInstance.setOption(option);
let self = this;
chartInstance.getZr().off('click');//取消監聽點擊事件,也可以防止重複綁定
chartInstance.getZr().on('click',function(param)
{
let x = param.offsetX;
let y = param.offsetY;
let result = chartInstance.convertFromPixel({
seriesIndex:0,
xAxisIndex:0,
},[x,y]);
let index = result[0];
let xAxis =xAxisData[index];
self.setMarkLine(xAxis,chartInstance);
});
},
setMarkLine:function(xAxis,chartInstance)
{
let markLine = {
silent:true, //取消標線的點擊事件
animation:false, //不播放標線的動畫
data: [{
name: xAxis,
xAxis: xAxis, //表示標註 x=xAxis的線, 具體配置項可以參考 https://www.echartsjs.com/zh/option.html#series-line.markLine
label: {
silent: true,
position : 'end',
}
}]
};
chartInstance.setOption({
series:{
markLine:markLine,
},
})
代碼同步上傳至github，工程見：https://github.com/blowingBreeze/Tick/tree/master/Web/demo
具體代碼見： 工程目錄下的 /src/components/ChartClick.vue