欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ECharts事件處理與旭日圖實(shí)現(xiàn)

 更新時間：2022年06月07日 09:57:00   作者：springsnow  
這篇文章介紹了ECharts事件處理與實(shí)現(xiàn)旭日圖的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

事件處理

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

ECharts 通過 on 方法來監(jiān)聽用戶的行為，例如監(jiān)控用戶的點(diǎn)擊行為。

ECharts 中事件分為兩種類型:

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

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

myChart.on('click', function (params) {
    // 在用戶點(diǎn)擊后控制臺打印數(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);
});

一、鼠標(biāo)事件

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

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

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

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

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

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

{
    // 當(dāng)前點(diǎn)擊的圖形元素所屬的組件名稱，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列類型。值可能為：'line'、'bar'、'pie' 等。當(dāng) componentType 為 'series' 時有意義。
    seriesType: string,
    // 系列在傳入的 option.series 中的 index。當(dāng) componentType 為 'series' 時有意義。
    seriesIndex: number,
    // 系列名稱。當(dāng) componentType 為 'series' 時有意義。
    seriesName: string,
    // 數(shù)據(jù)名，類目名
    name: string,
    // 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
    dataIndex: number,
    // 傳入的原始數(shù)據(jù)項(xiàng)
    data: Object,
    // sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
    // dataType 的值會是 'node' 或者 'edge'，表示當(dāng)前點(diǎn)擊在 node 還是 edge 上。
    // 其他大部分圖表中只有一種 data，dataType 無意義。
    dataType: string,
    // 傳入的數(shù)據(jù)值
    value: number|Array
    // 數(shù)據(jù)圖形的顏色。當(dāng) componentType 為 'series' 時有意義。
    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 只對指定的組件的圖形元素的觸發(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ù)項(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' 時，此方法被回調(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 () {
    // 關(guān)系圖的節(jié)點(diǎn)被點(diǎn)擊時此方法被回調(diào)。
});
chart.on('click', {dataType: 'edge'}, function () {
    // 關(guān)系圖的邊被點(diǎn)擊時此方法被回調(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ā)相應(yīng)的事件，常用的事件和事件對應(yīng)參數(shù)在 events 文檔中有列出。

下面是監(jiān)聽一個圖例開關(guān)的示例：

// 圖例開關(guān)的行為只會觸發(fā) legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 獲取點(diǎn)擊圖例的選中狀態(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ù)需要去記錄用戶的行為路徑。

以上實(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);

旭日圖

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

ECharts 創(chuàng)建旭日圖很簡單，只需要在 series 配置項(xiàng)中聲明類型為 sunburst 即可，data 數(shù)據(jù)結(jié)構(gòu)以樹形結(jié)構(gòu)聲明，看下一個簡單的實(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)情況下會使用全局調(diào)色盤 color 分配最內(nèi)層的顏色，其余層則與其父元素同色。

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

  • 在 series.data.itemStyle 中設(shè)置每個扇形塊的樣式。
  • 在 series.levels.itemStyle 中設(shè)置每一層的樣式。
  • 在 series.itemStyle 中設(shè)置整個旭日圖的樣式。

上述三者的優(yōu)先級是從高到低的，也就是說，配置了 series.data.itemStyle 的扇形塊將會覆蓋 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'
            }
        }]
    }
};

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

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

旭日圖默認(rèn)支持?jǐn)?shù)據(jù)下鉆，也就是說，當(dāng)點(diǎn)擊了扇形塊之后，將以該扇形塊的數(shù)據(jù)作為根節(jié)點(diǎn)，進(jìn)一步顯示該數(shù)據(jù)的細(xì)節(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 設(shè)置為 false 來關(guān)閉，也可以設(shè)為 'link'，并將 data.link 設(shè)為點(diǎn)擊扇形塊對應(yīng)打開的鏈接。

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

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

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

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

具體來說，對于配置項(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)旭日圖的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JS實(shí)現(xiàn)仿PS的調(diào)色板效果完整實(shí)例

    JS實(shí)現(xiàn)仿PS的調(diào)色板效果完整實(shí)例

    這篇文章主要介紹了JS實(shí)現(xiàn)仿PS的調(diào)色板效果,結(jié)合完整實(shí)例形式分析了javascript通過運(yùn)算與動態(tài)操作頁面元素實(shí)現(xiàn)調(diào)色板功能的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2016-12-12
  • javascript 循環(huán)調(diào)用示例介紹

    javascript 循環(huán)調(diào)用示例介紹

    循環(huán)調(diào)用,如果已經(jīng)獲取到了結(jié)果,則退出循環(huán)，下面有個不錯的示例，感興趣的朋友可以嘗試操作下
    2013-11-11
  • 理解JavaScript設(shè)計模式中的單例模式

    理解JavaScript設(shè)計模式中的單例模式

    這篇文章主要介紹了理解JavaScript設(shè)計模式中的單例模式，單例模式即Singleton?Pattern是最簡單的設(shè)計模式之一，下文更多相關(guān)介紹感興趣的小伙伴可以參考一下
    2022-04-04
  • JavaScript中undefined、null與NaN的區(qū)別

    JavaScript中undefined、null與NaN的區(qū)別

    undefined、null和NaN都屬于javascript中的數(shù)據(jù)類型,本文主要介紹了 JavaScript中undefined、null與NaN的區(qū)別,具有一定的參考價值,感興趣的可以了解一下
    2023-09-09
  • uni-app小程序?qū)崿F(xiàn)微信在線聊天功能(私聊/群聊)

    uni-app小程序?qū)崿F(xiàn)微信在線聊天功能(私聊/群聊)

    這篇文章主要介紹了uni-app小程序?qū)崿F(xiàn)微信在線聊天（私聊/群聊）,今天記錄一下項(xiàng)目核心功能的實(shí)現(xiàn)過程。頁面UI以及功能邏輯全部來源于微信，即時聊天業(yè)務(wù)的實(shí)現(xiàn)使用socket.io，前端使用uni-app開發(fā)，后端服務(wù)器基于node實(shí)現(xiàn)，數(shù)據(jù)庫選擇mongoDB，需要的朋友可以參考下
    2023-02-02
  • 使用JS模擬錨點(diǎn)跳轉(zhuǎn)的實(shí)例

    使用JS模擬錨點(diǎn)跳轉(zhuǎn)的實(shí)例

    下面小編就為大家分享一篇使用JS模擬錨點(diǎn)跳轉(zhuǎn)的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • JavaScript實(shí)現(xiàn)大圖輪播效果

    JavaScript實(shí)現(xiàn)大圖輪播效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)大圖輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-01-01
  • js窗口關(guān)閉提示信息（兼容IE和firefox）

    js窗口關(guān)閉提示信息（兼容IE和firefox）

    這篇文章主要介紹了當(dāng)關(guān)閉窗口的時候，顯示窗口提示信息，友好的進(jìn)行提示，防止丟失重要信息，需要的朋友可以參考一下
    2015-10-10
  • JavaScript實(shí)現(xiàn)級聯(lián)菜單的方法

    JavaScript實(shí)現(xiàn)級聯(lián)菜單的方法

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)級聯(lián)菜單的方法,涉及javascript頁面元素操作的相關(guān)技巧,需要的朋友可以參考下
    2015-06-06
  • javascript實(shí)現(xiàn)動態(tài)側(cè)邊欄代碼

    javascript實(shí)現(xiàn)動態(tài)側(cè)邊欄代碼

    這篇文章主要介紹了javascript實(shí)現(xiàn)動態(tài)側(cè)邊欄代碼,需要的朋友可以參考下
    2014-02-02

最新評論