ECharts事件處理與旭日?qǐng)D實(shí)現(xiàn)

更新時(shí)間：2022年06月07日 09:57:00 作者：springsnow

這篇文章介紹了ECharts事件處理與實(shí)現(xiàn)旭日?qǐng)D的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

事件處理

ECharts 中我們可以通過(guò)監(jiān)聽(tīng)用戶的操作行為來(lái)回調(diào)對(duì)應(yīng)的函數(shù)。

ECharts 通過(guò) on 方法來(lái)監(jiān)聽(tīng)用戶的行為，例如監(jiān)控用戶的點(diǎn)擊行為。

ECharts 中事件分為兩種類(lèi)型:

用戶鼠標(biāo)操作點(diǎn)擊，如 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。

還有一種是用戶在使用可以交互的組件后觸發(fā)的行為事件，例如在切換圖例開(kāi)關(guān)時(shí)觸發(fā)的 'legendselectchanged' 事件），數(shù)據(jù)區(qū)域縮放時(shí)觸發(fā)的 'datazoom' 事件等等。

myChart.on('click', function (params) {
    // 在用戶點(diǎn)擊后控制臺(tái)打印數(shù)據(jù)的名稱(chēng)
    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);
});

一、鼠標(biāo)事件

ECharts 支持的鼠標(biāo)事件類(lèi)型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。

以下實(shí)例在點(diǎn)擊柱形圖時(shí)會(huì)彈出對(duì)話框：

// 基于準(zhǔn)備好的dom，初始化ECharts實(shí)例
var myChart = echarts.init(document.getElementById('main'));

// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷(xiāo)量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
// 處理點(diǎn)擊事件并且彈出數(shù)據(jù)名稱(chēng)
myChart.on('click', function (params) {
    alert(params.name);
});

1、所有的鼠標(biāo)事件包含參數(shù) params，這是一個(gè)包含點(diǎn)擊圖形的數(shù)據(jù)信息的對(duì)象，格式如下：

{
    // 當(dāng)前點(diǎn)擊的圖形元素所屬的組件名稱(chēng)，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列類(lèi)型。值可能為：'line'、'bar'、'pie' 等。當(dāng) componentType 為 'series' 時(shí)有意義。
    seriesType: string,
    // 系列在傳入的 option.series 中的 index。當(dāng) componentType 為 'series' 時(shí)有意義。
    seriesIndex: number,
    // 系列名稱(chēng)。當(dāng) componentType 為 'series' 時(shí)有意義。
    seriesName: string,
    // 數(shù)據(jù)名，類(lèi)目名
    name: string,
    // 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
    dataIndex: number,
    // 傳入的原始數(shù)據(jù)項(xiàng)
    data: Object,
    // sankey、graph 等圖表同時(shí)含有 nodeData 和 edgeData 兩種 data，
    // dataType 的值會(huì)是 'node' 或者 'edge'，表示當(dāng)前點(diǎn)擊在 node 還是 edge 上。
    // 其他大部分圖表中只有一種 data，dataType 無(wú)意義。
    dataType: string,
    // 傳入的數(shù)據(jù)值
    value: number|Array
    // 數(shù)據(jù)圖形的顏色。當(dāng) componentType 為 'series' 時(shí)有意義。
    color: string
}

2、如何區(qū)分鼠標(biāo)點(diǎn)擊到了哪里：

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 點(diǎn)擊到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 點(diǎn)擊到了 index 為 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 點(diǎn)擊到了 graph 的 edge（邊）上。
            }
            else {
                // 點(diǎn)擊到了 graph 的 node（節(jié)點(diǎn)）上。
            }
        }
    }
});

3、使用 query 只對(duì)指定的組件的圖形元素的觸發(fā)回調(diào)：

chart.on(eventName, query, handler);

query 可為 string 或者 Object。

（1）如果為 string 表示組件類(lèi)型。格式可以是 '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，可以包含以下一個(gè)或多個(gè)屬性，每個(gè)屬性都是可選的：

{
    <mainType>Index: number // 組件 index
    <mainType>Name: string // 組件 name
    <mainType>Id: string // 組件 id
    dataIndex: number // 數(shù)據(jù)項(xiàng) index
    name: string // 數(shù)據(jù)項(xiàng) name
    dataType: string // 數(shù)據(jù)項(xiàng) type，如關(guān)系圖中的 'node', 'edge'
    element: string // 自定義系列中的 el 的 name
}

例如：

chart.setOption({
    // ...
    series: [{
        name: 'uuu'
        // ...
    }]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
    // series name 為 'uuu' 的系列中的圖形元素被 'mouseover' 時(shí)，此方法被回調(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' 時(shí)，此方法被回調(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 () {
    // 關(guān)系圖的節(jié)點(diǎn)被點(diǎn)擊時(shí)此方法被回調(diào)。
});
chart.on('click', {dataType: 'edge'}, function () {
    // 關(guān)系圖的邊被點(diǎn)擊時(shí)此方法被回調(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' 時(shí)，此方法被回調(diào)。
});

4、你可以在回調(diào)函數(shù)中獲得這個(gè)對(duì)象中的數(shù)據(jù)名、系列名稱(chēng)后在自己的數(shù)據(jù)倉(cāng)庫(kù)中索引得到其它的信息候更新圖表，顯示浮層等等，如下示例代碼：

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通過(guò)餅圖表現(xiàn)單個(gè)柱子中的數(shù)據(jù)分布
                data: [detail.data]
            }]
        });
    });
});

二、組件交互的行為事件

在 ECharts 中基本上所有的組件交互行為都會(huì)觸發(fā)相應(yīng)的事件，常用的事件和事件對(duì)應(yīng)參數(shù)在 events 文檔中有列出。

下面是監(jiān)聽(tīng)一個(gè)圖例開(kāi)關(guān)的示例：

// 圖例開(kāi)關(guān)的行為只會(huì)觸發(fā) legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 獲取點(diǎn)擊圖例的選中狀態(tài)
    var isSelected = params.selected[params.name];
    // 在控制臺(tái)中打印
    console.log((isSelected ? '選中了' : '取消選中了') + '圖例' + params.name);
    // 打印所有圖例的狀態(tài)
    console.log(params.selected);
});

三、代碼觸發(fā) ECharts 中組件的行為

上面我們只說(shuō)明了用戶的交互操作，但有時(shí)候我們也會(huì)需要在程序里調(diào)用方法并觸發(fā)圖表的行為，比如顯示 tooltip。

ECharts 通過(guò) dispatchAction({ type: '' }) 來(lái)觸發(fā)圖表行為，統(tǒng)一管理了所有動(dòng)作，也可以根據(jù)需要去記錄用戶的行為路徑。

以上實(shí)例用于輪播餅圖中的 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;
    // 高亮當(dāng)前圖形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    // 顯示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
}, 1000);

旭日?qǐng)D

旭日?qǐng)D（Sunburst）由多層的環(huán)形圖組成，在數(shù)據(jù)結(jié)構(gòu)上，內(nèi)圈是外圈的父節(jié)點(diǎn)。因此，它既能像餅圖一樣表現(xiàn)局部和整體的占比，又能像矩形樹(shù)圖一樣表現(xiàn)層級(jí)關(guān)系。

ECharts 創(chuàng)建旭日?qǐng)D很簡(jiǎn)單，只需要在 series 配置項(xiàng)中聲明類(lèi)型為 sunburst 即可，data 數(shù)據(jù)結(jié)構(gòu)以樹(shù)形結(jié)構(gòu)聲明，看下一個(gè)簡(jiǎn)單的實(shí)例：

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)整

默認(rèn)情況下會(huì)使用全局調(diào)色盤(pán) color 分配最內(nèi)層的顏色，其余層則與其父元素同色。

在旭日?qǐng)D中，扇形塊的顏色有以下三種設(shè)置方式：

在 series.data.itemStyle 中設(shè)置每個(gè)扇形塊的樣式。
在 series.levels.itemStyle 中設(shè)置每一層的樣式。
在 series.itemStyle 中設(shè)置整個(gè)旭日?qǐng)D的樣式。

上述三者的優(yōu)先級(jí)是從高到低的，也就是說(shuō)，配置了 series.data.itemStyle 的扇形塊將會(huì)覆蓋 series.levels.itemStyle 和 series.itemStyle 的設(shè)置。

下面，我們將整體的顏色設(shè)為灰色 #aaa，將最內(nèi)層的顏色設(shè)為藍(lán)色 blue，將 Aa、B 這兩塊設(shè)為紅色 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é)點(diǎn)屬性
        }, {
            itemStyle: {
                color: 'blue'
            }
        }]
    }
};

按層配置樣式是一個(gè)很常用的功能，能夠很大程度上提高配置的效率。

二、數(shù)據(jù)下鉆

旭日?qǐng)D默認(rèn)支持?jǐn)?shù)據(jù)下鉆，也就是說(shuō)，當(dāng)點(diǎn)擊了扇形塊之后，將以該扇形塊的數(shù)據(jù)作為根節(jié)點(diǎn)，進(jìn)一步顯示該數(shù)據(jù)的細(xì)節(jié)。

在數(shù)據(jù)下鉆后，圖形的中間會(huì)出現(xiàn)一個(gè)用于返回上一層的圖形，該圖形的樣式可以通過(guò) 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ù)下鉆功能，可以通過(guò)將 nodeClick 設(shè)置為 false 來(lái)關(guān)閉，也可以設(shè)為 'link'，并將 data.link 設(shè)為點(diǎn)擊扇形塊對(duì)應(yīng)打開(kāi)的鏈接。

三、高亮相關(guān)扇形塊

旭日?qǐng)D支持鼠標(biāo)移動(dòng)到某扇形塊時(shí)，高亮相關(guān)數(shù)據(jù)塊的操作，可以通過(guò)設(shè)置 highlightPolicy，包括以下幾種高亮方式：

'descendant'（默認(rèn)值）：高亮鼠標(biāo)移動(dòng)所在扇形塊與其后代元素；
'ancestor'：高亮鼠標(biāo)所在扇形塊與其祖先元素；
'self'：僅高亮鼠標(biāo)所在扇形塊；
'none'：不會(huì)淡化（downplay）其他元素。

上面提到的"高亮"，對(duì)于鼠標(biāo)所在的扇形塊，會(huì)使用 emphasis 樣式；對(duì)于其他相關(guān)扇形塊，則會(huì)使用 highlight 樣式。通過(guò)這種方式，可以很方便地實(shí)現(xiàn)突出顯示相關(guān)數(shù)據(jù)的需求。

具體來(lái)說(shuō)，對(duì)于配置項(xiàng)：

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'
    });
});

到此這篇關(guān)于ECharts事件處理與實(shí)現(xiàn)旭日?qǐng)D的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: