全棧工程師開發手冊 （作者：欒鵬）

Echarts資料視覺化action圖表行為觸發的相關操作：

圖表行為用於觸發能夠改變圖表顯示的相關動態功能，event事件用於接收action觸發的行為，所以action行為要配合event事件一塊學習

//觸發圖表行為（更改變圖表顯示的相關動態），例如圖例開關legendToggleSelect, 資料區域縮放dataZoom，顯示提示框showTip等等
//通過不同的type觸發不同的行為

myChart.dispatchAction({
    type: 'highlight',          //高亮指定的資料圖形。通過seriesName或者seriesIndex指定系列。如果要再指定某個資料可以再指定dataIndex或者name。
 

    type: 'downplay',           //取消高亮指定的資料圖形。通過seriesName或者seriesIndex指定系列。如果要指定某個資料可以再指定dataIndex或者name。
    seriesIndex: number|Array,  // 可選，系列 index，可以是一個數組指定多個系列
    seriesName: string|Array,   // 可選，系列名稱，可以是一個數組指定多個系列
    dataIndex: number,          // 可選，資料的 index
    name: string                // 可選，資料的 名稱
 

});



//=====================dataZoom的相關觸發=================
myChart.dispatchAction({
    type: 'dataZoom',
    dataZoomIndex: number,      // 可選，dataZoom 元件的 index，多個 dataZoom 元件時有用，預設為 0
    start: number,              // 開始位置的百分比，0 - 100
    end: number,                // 結束位置的百分比，0 - 100
    startValue: number,        // 開始位置的數值
 

    endValue: number           // 結束位置的數值
});

//一次觸發多個開關
myChart.dispatchAction({
    type: 'dataZoom',
    batch: [{                   // 第一個 dataZoom 元件
        start: 20,
        end: 30
    }, {
        dataZoomIndex: 1,       // 第二個 dataZoom 元件
        start: 10,
        end: 20
    }]
});


//=====================legend的相關觸發=================
myChart.dispatchAction({
    type: 'legendSelect',       //選中圖例。
    type: 'legendUnSelect',     //取消選中圖例。
    type: 'legendToggleSelect', //切換圖例的選中狀態。
    name: string  // 圖例名稱
});
myChart.dispatchAction({
    type: 'legendScroll',       //控制圖例的滾動。當 legend.type 為 'scroll' 時有效。
    scrollDataIndex: number,
    legendId: string
});

//=====================tooltip的相關觸發=================
myChart.dispatchAction({
    type: 'showTip',            //顯示提示框，指定在相對容器的位置處顯示提示框，如果指定的位置無法顯示則無效。
    x: number,                  // 螢幕上的 x 座標
    y: number,                  // 螢幕上的 y 座標
    // 本次顯示 tooltip 的位置。只在本次 action 中生效。
    // 預設則使用 option 中定義的 tooltip 位置。
    position: Array.<number>|string|Function
});
myChart.dispatchAction({
    type: 'showTip',            //顯示提示框，指定資料圖形，根據 tooltip 的配置項顯示提示框。
    seriesIndex: number,        // 系列的 index，在 tooltip 的 trigger 為 axis 的時候可選。
    dataIndex: number,          // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料
    name: string,               // 可選，資料名稱，在有 dataIndex 的時候忽略
    // 本次顯示 tooltip 的位置。只在本次 action 中生效。
    // 預設則使用 option 中定義的 tooltip 位置。
    position: Array.<number>|string|Function,
});
myChart.dispatchAction({
    type: 'hideTip'             //隱藏提示框。
});

//=====================visualMap的相關觸發=================
myChart.dispatchAction({
    type: 'selectDataRange',        //選取對映的數值範圍。
    visualMapIndex: number,         // 可選，visualMap 元件的 index，多個 visualMap 元件時有用，預設為 0
    // 連續型 visualMap 和 離散型 visualMap 不一樣
    // 連續型的是一個表示數值範圍的陣列。selected: [20, 40],
    // 離散型的是一個物件，鍵值是類目或者分段的索引。值是 `true`, `false`,例如：selected: { 1: false }// 取消選中第二段, selected: { '優': false }// 取消選中類目 `優`
    selected: Object|Array
});


//=====================timeline的相關觸發=================
//時間軸元件相關的行為，必須引入時間軸元件後才能使用
myChart.dispatchAction({
    type: 'timelineChange',     //設定當前的時間點。
    currentIndex: number        // 時間點的 index
});
myChart.dispatchAction({
    type: 'timelinePlayChange', //切換時間軸的播放狀態。
    playState: boolean            // 播放狀態，true 為自動播放
});

//=====================toolbox的相關觸發=================
myChart.dispatchAction({
    type: 'restore'             //重置 option。
});


//=====================pie的相關觸發=================
myChart.dispatchAction({
    type: 'pieUnSelect',        //取消選中指定的餅圖扇形。
    type: 'pieToggleSelect',    //切換指定的餅圖扇形選中狀態。
    type: 'pieSelect',          //選中指定的餅圖扇形。
    seriesIndex: number|Array,  // 可選，系列 index，可以是一個數組指定多個系列
    seriesName: string|Array,   // 可選，系列名稱，可以是一個數組指定多個系列
    dataIndex: number,          // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料
    name: string                // 可選，資料名稱，在有 dataIndex 的時候忽略
});

//=====================geo的相關觸發=================
myChart.dispatchAction({
    type: 'geoSelect',          //選中指定的地圖區域。
    type: 'geoUnSelect',        //取消選中指定的地圖區域。
    type: 'geoToggleSelect',    //切換指定的地圖區域選中狀態。
    seriesIndex: number|Array,  // 可選，系列 index，可以是一個數組指定多個系列
    seriesName: string|Array,   // 可選，系列名稱，可以是一個數組指定多個系列
    dataIndex: number,          // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料
    name: string                // 可選，資料名稱，在有 dataIndex 的時候忽略
});

//=====================map的相關觸發=================
myChart.dispatchAction({
    type: 'mapSelect',          //選中指定的地圖區域。
    type: 'mapUnSelect',        //取消選中指定的地圖區域。
    type: 'mapToggleSelect',    //切換指定的地圖區域選中狀態。
    seriesIndex: number|Array,  // 可選，系列 index，可以是一個數組指定多個系列
    seriesName: string|Array,   // 可選，系列名稱，可以是一個數組指定多個系列
    dataIndex: number,          // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料
    name: string                 // 可選，資料名稱，在有 dataIndex 的時候忽略
});

//=====================graph的相關觸發=================
myChart.dispatchAction({
    type: 'focusNodeAdjacency',   //將指定的節點以及其所有鄰接節點高亮。
    type: 'unfocusNodeAdjacency', //將指定的節點以及其所有鄰接節點高亮。
    // 使用 seriesId 或 seriesIndex 或 seriesName 來定位 series.
    seriesId: 'xxx',
    seriesIndex: 0,
    seriesName: 'nnn',

    dataIndex: 12                   // 使用 dataIndex 來定位節點。
});