觀看ECharts 官網的筆記

事件處理

在Android和Web 中，都有按鈕點擊事件，點擊按鈕，就會進行相應的操作
在ECharts 中，我們可以通過 on 方法監聽用戶的操作行爲來回調對應的函數。比如跳轉到一個地址，或者彈出對話框，或者做數據下鑽等等。

ECharts 中事件分爲兩種類型:

用戶鼠標操作點擊，如 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。
還有一種是用戶在使用可以交互的組件後觸發的行爲事件，例如在切換圖例開關時觸發的 ‘legendselectchanged’ 事件），數據區域縮放時觸發的 ‘datazoom’ 事件等等。

如：

myChart.on('click', function (params) {
    // 在用戶點擊後控制檯打印數據的名稱
    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’ 事件。

以下實例在點擊柱形圖時會彈出對話框：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 實例</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);

        // 處理點擊事件並且彈出數據名稱
        myChart.on('click', function (params) {
            alert(params.name);
        });
    </script>
</body>
</html>

所有的鼠標事件包含參數 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
}

如何區分鼠標點擊到了哪裏：

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（節點）上。
            }
        }
    }
});

使用 query 只對指定的組件的圖形元素的觸發回調：

chart.on(eventName, query, handler);

query 可爲 string 或者 Object。
如果爲 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 () {...});

如果爲 Object，可以包含以下一個或多個屬性，每個屬性都是可選的：

{
    <mainType>Index: number // 組件 index
    <mainType>Name: string // 組件 name
    <mainType>Id: string // 組件 id
    dataIndex: number // 數據項 index
    name: string // 數據項 name
    dataType: string // 數據項 type，如關係圖中的 'node', 'edge'
    element: string // 自定義系列中的 el 的 name
}

例如：

chart.setOption({
    // ...
    series: [{
        name: 'uuu'
        // ...
    }]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
    // series name 爲 'uuu' 的系列中的圖形元素被 'mouseover' 時，此方法被回調。
});

例如：

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' 時，此方法被回調。
});

例如：

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 () {
    // 關係圖的節點被點擊時此方法被回調。
});
chart.on('click', {dataType: 'edge'}, function () {
    // 關係圖的邊被點擊時此方法被回調。
});

例如：

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' 時，此方法被回調。
});

你可以在回調函數中獲得這個對象中的數據名、系列名稱後在自己的數據倉庫中索引得到其它的信息候更新圖表，顯示浮層等等，如下示例代碼：

實例

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通過餅圖表現單個柱子中的數據分佈
                data: [detail.data]
            }]
        });
    });
});

組件交互的行爲事件

在 ECharts 中基本上所有的組件交互行爲都會觸發相應的事件，常用的事件和事件對應參數在 events 文檔中有列出。

// 圖例開關的行爲只會觸發 legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 獲取點擊圖例的選中狀態
    var isSelected = params.selected[params.name];
    // 在控制檯中打印
    console.log((isSelected ? '選中了' : '取消選中了') + '圖例' + params.name);
    // 打印所有圖例的狀態
    console.log(params.selected);
});

代碼觸發 ECharts 中組件的行爲

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 實例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
    <div id="main"  style="height: 100%;min-height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化ECharts實例
        var myChart = echarts.init(document.getElementById('main'));
        var app = {};
        option = null;
        // 指定圖表的配置項和數據
        var option = {
            title : {
                text: '餅圖程序調用高亮示例',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
            },
            series : [
                {
                    name: '訪問來源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接訪問'},
                        {value:310, name:'郵件營銷'},
                        {value:234, name:'聯盟廣告'},
                        {value:135, name:'視頻廣告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        app.currentIndex = -1;

        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);
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>
</html>

ECharts 事件處理

事件處理

鼠標事件

組件交互的行爲事件

代碼觸發 ECharts 中組件的行爲

ziw2pdf

apisix~helm方式的部署到k8s

firmeye - IoT固件漏洞挖掘工具

AJAX入門詳解

jQuery 初入門

ECharts -Media Query

ECharts 事件處理

操作系統 --進程詳解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結