當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ECharts.js学习（三）

發布時間：2025/7/14 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 ECharts.js学习（三）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

ECharts.js 交互組件

ECharts.js有很多的交互組件，一般經常用到的組件有這些：

? title：標題組件，包含主標題和副標題。

? legend：圖例組件,展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。

? xAxis：直角坐標系 grid 中的 x 軸，一般情況下單個 grid 組件最多只能放左右兩個 x 軸，多于兩個 x 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。

? yAxis：直角坐標系 grid 中的 y 軸，一般情況下單個 grid 組件最多只能放左右兩個 y 軸，多于兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。

? tooltip：提示框組件，就是當你的鼠標懸浮在圖表上的提示內容。

? toolbox：工具欄組件。內置有導出圖片、數據視圖、動態類型切換、數據區域縮放、重置五個工具。

? series：系列列表。我理解為數據列表。這里可以定義每組數據內容，以及數據的展現形式。

? timeline:提供了在多個ECharts option 之間進行切換、播放等操作的功能。

? dataZoom:用于區域縮放，從而能自由關注細節的數據信息，或者概覽數據整體，或者去除離群點的影響。

....

官方給出的案例是dataZoom組件。它是用于區域縮放，從而能自由關注細節的數據信息，或者概覽數據整體，或者去除離群點的影響。主要是對數軸（axis）進行操作。

toolbox組件

其中很多組件其實我們都會用到，不過使用的都是一些基本配置。比如title組件，往往只寫一個text 值。legend，會一些每個系列數據的name等等。

因為后面項目需要將圖表保存為圖片，以及一種數據多種展現形勢，所以就研究一下toolbox組件的使用。
toolbox參數：

? show:工具欄默認是隱藏的。所以一定要設置show為true顯示出來。

? orient:工具欄的的布局方向，可選值有horizontal(橫向)和vertical（豎向）。默認值是horizontal

? itemSize:工具欄的大小。默認值是15。

? itemGap:工具欄每個工具之間的距離，默認值是10。

? showTitle:鼠標懸浮的是否顯示每個工具的說明，默認是true。

? feature:這個是設置工具欄里要顯示哪些工具，以及這些工具的樣式等。

默認的插件工具：

? savaAsImage:保存圖片

? restore:還原配置

? dataView:數據視圖工具，可以展現圖表所用的數據，并且可以編輯數據，再將編輯后的數據展示出來。同時也可以設置為數據為只讀。

? optionToContent:并且可以通過對顯示出來的數據進行排版編輯，以HTML展現。

? optionToOption:在使用 optionToContent 的情況下，如果支持數據編輯后的刷新，需要自行通過該函數實現組裝 option 的邏輯。

? dataZoom:數據區域縮放。目前只支持直角坐標系的縮放。

? xAxisIndex、yAxisIndex：分別控制xAxis和yAxis軸的縮放。

除了使用默認的工具意外，我們還可以根據需求自定義工具。需要注意的是，每個自定義的工具，名稱必須以“my”打頭。在onclick函數中編寫需要進行的操作。

toolbox:{show:true,orient:'vertical', feature:{magicType:{type:['line','bar']},restore:{},saveAsImage:{},dataZoom:{show:true,xAxisIndex:[0,3]},myTool1:{show:true,title:'自定義工具一',icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',onclick:function(){alert("this is myTool1");}},myTool2:{show:true,title:'自定義工具二',icon: 'image://http://echarts.baidu.com/images/favicon.png', onclick:function(){alert("this is myTool2");}}} }

magicType:設置可切換的圖表類型。目前支持的只有4種，line折線圖、bar柱狀圖、stack堆疊模式、tiled平鋪模式。

brush:選框組件的控制按鈕。

iconStyle:公用的icon樣式設置

zlevel:所有圖形的zlevel值。zlevel用于Canvas分層。

z:所有圖形的z值。z不會創建Canvas層。比zlevel等級低。

left、top、right、bottom、width、height:工具欄的樣式，邊距設置。

轉載于:https://my.oschina.net/u/3687565/blog/1556864