ECharts事件處理與旭日圖實現(xiàn)
事件處理
ECharts 中我們可以通過監(jiān)聽用戶的操作行為來回調(diào)對應的函數(shù)。
ECharts 通過 on 方法來監(jiān)聽用戶的行為，例如監(jiān)控用戶的點擊行為。
ECharts 中事件分為兩種類型:
用戶鼠標操作點擊，如 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。
還有一種是用戶在使用可以交互的組件后觸發(fā)的行為事件，例如在切換圖例開關時觸發(fā)的 'legendselectchanged' 事件），數(shù)據(jù)區(qū)域縮放時觸發(fā)的 'datazoom' 事件等等。
myChart.on('click', function (params) {
// 在用戶點擊后控制臺打印數(shù)據(jù)的名稱
console.log(params);
});
myChart.on('legendselectchanged', function (params) {
console.log(params);
});
chart.on('click', 'series.line', function (params) {
console.log(params);
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
console.log(params);
});一、鼠標事件
ECharts 支持的鼠標事件類型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。
以下實例在點擊柱形圖時會彈出對話框：
// 基于準備好的dom，初始化ECharts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
// 處理點擊事件并且彈出數(shù)據(jù)名稱
myChart.on('click', function (params) {
alert(params.name);
});1、所有的鼠標事件包含參數(shù) params，這是一個包含點擊圖形的數(shù)據(jù)信息的對象，格式如下：
{
// 當前點擊的圖形元素所屬的組件名稱，
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列類型。值可能為：'line'、'bar'、'pie' 等。當 componentType 為 'series' 時有意義。
seriesType: string,
// 系列在傳入的 option.series 中的 index。當 componentType 為 'series' 時有意義。
seriesIndex: number,
// 系列名稱。當 componentType 為 'series' 時有意義。
seriesName: string,
// 數(shù)據(jù)名，類目名
name: string,
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據(jù)項
data: Object,
// sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
// dataType 的值會是 'node' 或者 'edge'，表示當前點擊在 node 還是 edge 上。
// 其他大部分圖表中只有一種 data，dataType 無意義。
dataType: string,
// 傳入的數(shù)據(jù)值
value: number|Array
// 數(shù)據(jù)圖形的顏色。當 componentType 為 'series' 時有意義。
color: string
}2、如何區(qū)分鼠標點擊到了哪里：
myChart.on('click', function (params) {
if (params.componentType === 'markPoint') {
// 點擊到了 markPoint 上
if (params.seriesIndex === 5) {
// 點擊到了 index 為 5 的 series 的 markPoint 上。
}
}
else if (params.componentType === 'series') {
if (params.seriesType === 'graph') {
if (params.dataType === 'edge') {
// 點擊到了 graph 的 edge（邊）上。
}
else {
// 點擊到了 graph 的 node（節(jié)點）上。
}
}
}
});3、使用 query 只對指定的組件的圖形元素的觸發(fā)回調(diào)：
chart.on(eventName, query, handler);
query 可為 string 或者 Object。
（1）如果為 string 表示組件類型。格式可以是 'mainType' 或者 'mainType.subType'。例如：
chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});（2）如果為 Object，可以包含以下一個或多個屬性，每個屬性都是可選的：
{
<mainType>Index: number // 組件 index
<mainType>Name: string // 組件 name
<mainType>Id: string // 組件 id
dataIndex: number // 數(shù)據(jù)項 index
name: string // 數(shù)據(jù)項 name
dataType: string // 數(shù)據(jù)項 type，如關系圖中的 'node', 'edge'
element: string // 自定義系列中的 el 的 name
}例如：
chart.setOption({
// ...
series: [{
name: 'uuu'
// ...
}]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
// series name 為 'uuu' 的系列中的圖形元素被 'mouseover' 時，此方法被回調(diào)。
});例如：
chart.setOption({
// ...
series: [{
// ...
}, {
// ...
data: [
{name: 'xx', value: 121},
{name: 'yy', value: 33}
]
}]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
// series index 1 的系列中的 name 為 'xx' 的元素被 'mouseover' 時，此方法被回調(diào)。
});例如：
chart.setOption({
// ...
series: [{
type: 'graph',
nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
edges: [{source: 0, target: 1}]
}]
});
chart.on('click', {dataType: 'node'}, function () {
// 關系圖的節(jié)點被點擊時此方法被回調(diào)。
});
chart.on('click', {dataType: 'edge'}, function () {
// 關系圖的邊被點擊時此方法被回調(diào)。
});例如：
chart.setOption({
// ...
series: {
// ...
type: 'custom',
renderItem: function (params, api) {
return {
type: 'group',
children: [{
type: 'circle',
name: 'my_el',
// ...
}, {
// ...
}]
}
},
data: [[12, 33]]
}
})
chart.on('mouseup', {element: 'my_el'}, function () {
// name 為 'my_el' 的元素被 'mouseup' 時，此方法被回調(diào)。
});4、你可以在回調(diào)函數(shù)中獲得這個對象中的數(shù)據(jù)名、系列名稱后在自己的數(shù)據(jù)倉庫中索引得到其它的信息候更新圖表，顯示浮層等等，如下示例代碼：
myChart.on('click', function (parmas) {
$.get('detail?q=' + params.name, function (detail) {
myChart.setOption({
series: [{
name: 'pie',
// 通過餅圖表現(xiàn)單個柱子中的數(shù)據(jù)分布
data: [detail.data]
}]
});
});
});二、組件交互的行為事件
在 ECharts 中基本上所有的組件交互行為都會觸發(fā)相應的事件，常用的事件和事件對應參數(shù)在 events 文檔中有列出。
下面是監(jiān)聽一個圖例開關的示例：
// 圖例開關的行為只會觸發(fā) legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
// 獲取點擊圖例的選中狀態(tài)
var isSelected = params.selected[params.name];
// 在控制臺中打印
console.log((isSelected ? '選中了' : '取消選中了') + '圖例' + params.name);
// 打印所有圖例的狀態(tài)
console.log(params.selected);
});
三、代碼觸發(fā) ECharts 中組件的行為
上面我們只說明了用戶的交互操作，但有時候我們也會需要在程序里調(diào)用方法并觸發(fā)圖表的行為，比如顯示 tooltip。
ECharts 通過 dispatchAction({ type: '' }) 來觸發(fā)圖表行為，統(tǒng)一管理了所有動作，也可以根據(jù)需要去記錄用戶的行為路徑。
以上實例用于輪播餅圖中的 tooltip：
setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的圖形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// 高亮當前圖形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex
});
// 顯示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 1000);旭日圖
旭日圖（Sunburst）由多層的環(huán)形圖組成，在數(shù)據(jù)結構上，內(nèi)圈是外圈的父節(jié)點。因此，它既能像餅圖一樣表現(xiàn)局部和整體的占比，又能像矩形樹圖一樣表現(xiàn)層級關系。
ECharts 創(chuàng)建旭日圖很簡單，只需要在 series 配置項中聲明類型為 sunburst 即可，data 數(shù)據(jù)結構以樹形結構聲明，看下一個簡單的實例：
var option = {
series: {
type: 'sunburst',
data: [{
name: 'A',
value: 10,
children: [{
value: 3,
name: 'Aa'
}, {
value: 5,
name: 'Ab'
}]
}, {
name: 'B',
children: [{
name: 'Ba',
value: 4
}, {
name: 'Bb',
value: 2
}]
}, {
name: 'C',
value: 3
}]
}
};一、顏色等樣式調(diào)整
默認情況下會使用全局調(diào)色盤 color 分配最內(nèi)層的顏色，其余層則與其父元素同色。
在旭日圖中，扇形塊的顏色有以下三種設置方式：
- 在 series.data.itemStyle 中設置每個扇形塊的樣式。
- 在 series.levels.itemStyle 中設置每一層的樣式。
- 在 series.itemStyle 中設置整個旭日圖的樣式。
上述三者的優(yōu)先級是從高到低的，也就是說，配置了 series.data.itemStyle 的扇形塊將會覆蓋 series.levels.itemStyle 和 series.itemStyle 的設置。
下面，我們將整體的顏色設為灰色 #aaa，將最內(nèi)層的顏色設為藍色 blue，將 Aa、B 這兩塊設為紅色 red。
var option = {
series: {
type: 'sunburst',
data: [{
name: 'A',
value: 10,
children: [{
value: 3,
name: 'Aa',
itemStyle: {
color: 'red'
}
}, {
value: 5,
name: 'Ab'
}]
}, {
name: 'B',
children: [{
name: 'Ba',
value: 4
}, {
name: 'Bb',
value: 2
}],
itemStyle: {
color: 'red'
}
}, {
name: 'C',
value: 3
}],
itemStyle: {
color: '#aaa'
},
levels: [{
// 留給數(shù)據(jù)下鉆的節(jié)點屬性
}, {
itemStyle: {
color: 'blue'
}
}]
}
};按層配置樣式是一個很常用的功能，能夠很大程度上提高配置的效率。
二、數(shù)據(jù)下鉆
旭日圖默認支持數(shù)據(jù)下鉆，也就是說，當點擊了扇形塊之后，將以該扇形塊的數(shù)據(jù)作為根節(jié)點，進一步顯示該數(shù)據(jù)的細節(jié)。
在數(shù)據(jù)下鉆后，圖形的中間會出現(xiàn)一個用于返回上一層的圖形，該圖形的樣式可以通過 levels[0] 配置。
var data = [{
name: 'Grandpa',
children: [{
name: 'Uncle Leo',
value: 15,
children: [{
name: 'Cousin Jack',
value: 2
}, {
name: 'Cousin Mary',
value: 5,
children: [{
name: 'Jackson',
value: 2
}]
}, {
name: 'Cousin Ben',
value: 4
}]
}, {
name: 'Father',
value: 10,
children: [{
name: 'Me',
value: 5
}, {
name: 'Brother Peter',
value: 1
}]
}]
}, {
name: 'Nancy',
children: [{
name: 'Uncle Nike',
children: [{
name: 'Cousin Betty',
value: 1
}, {
name: 'Cousin Jenny',
value: 2
}]
}]
}];
option = {
series: {
type: 'sunburst',
// highlightPolicy: 'ancestor',
data: data,
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
};如果不需要數(shù)據(jù)下鉆功能，可以通過將 nodeClick 設置為 false 來關閉，也可以設為 'link'，并將 data.link 設為點擊扇形塊對應打開的鏈接。
三、高亮相關扇形塊
旭日圖支持鼠標移動到某扇形塊時，高亮相關數(shù)據(jù)塊的操作，可以通過設置 highlightPolicy，包括以下幾種高亮方式：
- 'descendant'（默認值）：高亮鼠標移動所在扇形塊與其后代元素；
- 'ancestor'：高亮鼠標所在扇形塊與其祖先元素；
- 'self'：僅高亮鼠標所在扇形塊；
- 'none'：不會淡化（downplay）其他元素。
上面提到的"高亮"，對于鼠標所在的扇形塊，會使用 emphasis 樣式；對于其他相關扇形塊，則會使用 highlight 樣式。通過這種方式，可以很方便地實現(xiàn)突出顯示相關數(shù)據(jù)的需求。
具體來說，對于配置項：
itemStyle: {
color: 'yellow',
borderWidth: 2,
emphasis: {
color: 'red'
},
highlight: {
color: 'orange'
},
downplay: {
color: '#ccc'
}
}highlightPolicy 為 'descendant':
option = {
silent: true,
series: {
radius: ['15%', '95%'],
center: ['50%', '60%'],
type: 'sunburst',
sort: null,
highlightPolicy: 'descendant',
data: [{
value: 10,
children: [{
name: 'target',
value: 4,
children: [{
value: 2,
children: [{
value: 1
}]
}, {
value: 1
}, {
value: 0.5
}]
}, {
value: 2
}]
}, {
value: 4,
children: [{
children: [{
value: 2
}]
}]
}],
label: {
normal: {
rotate: 'none',
color: '#fff'
}
},
levels: [],
itemStyle: {
color: 'yellow',
borderWidth: 2
},
emphasis: {
itemStyle: {
color: 'red'
}
},
highlight: {
itemStyle: {
color: 'orange'
}
},
downplay: {
itemStyle: {
color: '#ccc'
}
}
}
};
setTimeout(function () {
myChart.dispatchAction({
type: 'sunburstHighlight',
targetNodeId: 'target'
});
});highlightPolicy 為 'ancestor' :
option = {
silent: true,
series: {
radius: ['15%', '95%'],
center: ['50%', '60%'],
type: 'sunburst',
sort: null,
highlightPolicy: 'ancestor',
data: [{
value: 10,
children: [{
value: 4,
children: [{
value: 2,
children: [{
name: 'target',
value: 1
}]
}, {
value: 1
}, {
value: 0.5
}]
}, {
value: 2
}]
}, {
value: 4,
children: [{
children: [{
value: 2
}]
}]
}],
label: {
normal: {
rotate: 'none',
color: '#fff'
}
},
levels: [],
itemStyle: {
color: 'yellow',
borderWidth: 2
},
emphasis: {
itemStyle: {
color: 'red'
}
},
highlight: {
itemStyle: {
color: 'orange'
}
},
downplay: {
itemStyle: {
color: '#ccc'
}
}
}
};
setTimeout(function () {
myChart.dispatchAction({
type: 'sunburstHighlight',
targetNodeId: 'target'
});
});到此這篇關于ECharts事件處理與實現(xiàn)旭日圖的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
微信小程序如何加載數(shù)據(jù)庫真實數(shù)據(jù)的實現(xiàn)
這篇文章主要介紹了微信小程序如何加載數(shù)據(jù)庫真實數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
分享別人寫的一個小型js框架...2007-08-08
BootstrapTable+KnockoutJS相結合實現(xiàn)增刪改查解決方案（三）兩個Viewmodel搞定增刪改查
這篇文章主要介紹了BootstrapTable+KnockoutJS相結合實現(xiàn)增刪改查解決方案（三）兩個Viewmodel搞定增刪改查 的相關資料,需要的朋友可以參考下2016-08-08
javascript中setAttribute兼容性用法分析
這篇文章主要介紹了javascript中setAttribute兼容性用法,結合實例形式分析了javascript使用setAttribute進行屬性設置操作的相關使用技巧,需要的朋友可以參考下2016-12-12
關于Error:Unknown?option?'--inline'報錯的解決辦法
這篇文章主要給大家介紹了關于Error:Unknown?option?'--inline'報錯的解決辦法,文中將解決的辦法介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關于JS中操作<select>標簽選值的相關資料, 在HTML中,<Select>標簽下的內(nèi)容,代表下來列表選項,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
微信小程序報錯: thirdScriptError的錯誤問題
這篇文章主要介紹了微信小程序報錯: thirdScriptError,本文給大家分享解決方法，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
基于dropdown.js實現(xiàn)的兩款美觀大氣的二級導航菜單
這篇文章主要介紹了基于dropdown.js實現(xiàn)的兩款美觀大氣的二級導航菜單,通過調(diào)用js插件實現(xiàn)導航效果,非常簡單實用,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了javascript高級定時器，針對javascript的代碼隊列進行詳細解析，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要為大家詳細介紹了微信小程序動態(tài)添加分享數(shù)據(jù)的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06