1. 程式人生 > >Echarts學習之二十三:action圖表行為的相關操作

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 來定位節點。 });

相關推薦

Echarts學習十三action圖表行為相關操作

圖表行為用於觸發能夠改變圖表顯示的相關動態功能,event事件用於接收action觸發的行為,所以action行為要配合event事件一塊學習//觸發圖表行為(更改變圖表顯示的相關動態),例如圖例開關legendToggleSelect, 資料區域縮放dataZoom,顯示提

Tensorflow深度學習十三tf.scatter_update

一、tf.scatter_update tf.scatter_update( ref, indices, updates, use_locking=True, name=None )    Applies sparse

Netty框架學習(Netty元件簡介

1. 概覽 從高層次的角度來看Netty, 它主要為需要開發高效能應用的開發者解決了“技術”的和“體系結構”的問題。首先,它的基於 Java NIO 的非同步的和事件驅動的實現,保證了高負載下應用程式 效能的最大化和可伸縮性。其次, Netty 也包含了一組設計模式,將應用程式邏輯從網

IT職場人生系列十三知識體系(專家與雜家)

這是IT職場人生系列的第二十三篇。(序言,專欄目錄)專家與雜家專家與雜家之爭由來已久。挺專家者說:只有專一,才能學透學精;那些泛泛之輩,只能學到些皮毛,終究不能有所成就。挺雜家者說:只有廣泛,才能目光開闊;某些人天天鑽牛角尖,最後學成榆木疙瘩。招聘的時候也是。有人號稱精通七八

算法系列十三離散傅立葉變換音訊播放與頻譜顯示

        頻譜和均衡器,幾乎是媒體播放程式的必備物件,沒有這兩個功能的媒體播放程式會被認為不夠專業,現在主流的播放器都具備這兩個功能,foobar 2000的十八段均衡器就曾經讓很多人著迷。我用Winamp播放音樂(AOL已經在2013年12月20日停止了Winamp的

【Java併發程式設計】十三併發新特性—訊號量Semaphore(含程式碼)

    在作業系統中,訊號量是個很重要的概念,它在控制程序間的協作方面有著非常重要的作用,通過對訊號量的不同操作,可以分別實現程序間的互斥與同步。當然它也可以用於多執行緒的控制,我們完全可以通過

Echarts學習十六dataZoom

dataZoom=[                                      //區域縮放    {        id: 'dataZoomX',        show:true,                              //是否顯示 元件。如果設定為 false,不會

Echarts學習十八tooltip提示框

tooltip ={ //提示框元件 trigger: 'item',

【Java併發程式設計】十三併發新特性—訊號量Semaphore(含程式碼)(r)

執行緒pool-1-thread-1獲得許可:0 執行緒pool-1-thread-1釋放許可:0 當前允許進入的任務個數:5 執行緒pool-1-thread-2獲得許可:1 執行緒pool-1-thread-6獲得許可:5 執行緒pool-1-thread-4獲得許可:3 執行緒pool-1-thread

設計模式系列十三模板模式

1.定義 定義一個操作中的演算法的框架,而將一些步驟延遲到子類中。使得子類可以不改變一個演算法的結構即可重定義該演算法的某些特定步驟。 2.通用類圖 AbstractClass 抽象模板

linux學習日常的基礎命令收集

幫助文檔 gedit 查看 日期 取整 style 位置 某月 linux 1、 ls 2、pwd  顯示當前目錄所在位置 3、date  日期時間 4、cal  日歷   默認顯示當前該月   cal 2012 :查看2012年的日歷   cal 月 年 : 查看某年某月

Java基礎學習筆記十三 Java核心語法反射

負責 目錄 boolean tostring 筆記 str 編譯 三種 進制 類加載器 類的加載 當程序要使用某個類時,如果該類還未被加載到內存中,則系統會通過加載,鏈接,初始化三步來實現對這個類進行初始化。 加載就是指將class文件讀入內存,並為之創建一個Clas

Halcon學習攝像頭獲取圖像和相關參數

digg tail tours mage eight sta vision name pict 1、close_all_framegrabbers ( : : : ) 關閉所有圖像采集設備。 2、close_framegrabber ( : : AcqHand

linux學習Linux磁盤與文件管理系統

roo 針對 mkf 維護 def 都是 linu mke2fs remount 上次寫了Linux檔案與操作,這次繼續寫Linux磁盤與文件管理系統。 首先,我們要先來認識一下EXT2文件系統,這是Linux最傳統的磁盤系統。 1.EXT2文件系統 在說文件系統以前還是要

Python學習十三)—— 前端基礎jQuery

官方 現在 展開 可能 獲取 不能 col js文件 層級 轉載自https://q1mi.github.io/Blog/2017/07/10/about_jQuery/ 一、jQuery入門 jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。 jQuer

Hulu機器學習問題與解答系列 | 十三神經網絡訓練中的批量歸一化

導致 xsl 泛化能力 恢復 不同 詳細 過程 ice ini 來看看批量歸一化的有關問題吧!記得進入公號菜單“機器學習”,復習之前的系列文章噢。 今天的內容是 【神經網絡訓練中的批量歸一化】 場景描述 深度神經網絡的訓練中涉及諸多手調參數,如學習率,權重衰減系數,

ElasticSearch學習筆記十三 桶聚合

ElasticSearch學習筆記之二十三 桶聚合 桶聚合 Children Aggregation(子聚合) Range Aggregation(範圍聚合) Keyed Response

Docker學習Docker基本簡單操作命令

查詢tomcat映象; docker search tomcat 進入容器 docker exec -it 458(容器ID) /bin/bash 檢視容器完整id docker inspect 14b7 | grep Id 上傳war包到docker docker te

USB開裝置開發學習 USB具體通訊過程(含列舉過程)

原文:https://blog.csdn.net/go_str/article/details/80802452  前言     現在剛開始接觸USB的開發,零零散散學習了一些USB基礎知識,但是卻得不到連貫。在這個學習過程中首先困惑的就是USB

rabbitmq學習rabbitmq(消息隊列)的作用以及rabbitmq直連交換機

tde pub 假設 代碼 持久化 tor 安裝 live 服務 前言   上篇介紹了AMQP的基本概念,組成及其與rabbitmq的關系。了解了這些東西後,下面我們開始學習rabbitmq(消息隊列)的作用以及用java代碼和rabbitmq通訊進行消息發布和接收。因為消