ECharts 互動元件概述
ECharts 提供了很多互動元件:例元件 legend、標題元件 title、視覺對映元件 visualMap、資料區域縮放元件 dataZoom、時間線元件 timeline。 |
接下來的內容我們將介紹如何使用資料區域縮放元件 dataZoom。
dataZoom
dataZoom 元件可以實現通過滑鼠滾輪滾動,放大縮小圖表的功能。
預設情況下 dataZoom 控制 x 軸,即對 x 軸進行資料視窗縮放和資料視窗平移操作。
例項
option = { xAxis: { type: 'value' }, yAxis: { type: 'value' }, dataZoom: [ { // 這個dataZoom元件,預設控制x軸。 type: 'slider', // 這個 dataZoom 元件是 slider 型 dataZoom 元件 start: 10, // 左邊在 10% 的位置。 end: 60 // 右邊在 60% 的位置。 } ], series: [ { type: 'scatter', // 這是個『散點圖』 itemStyle: { opacity: 0.8 }, symbolSize: function (val) { return val[2] * 40; }, data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]] } ] }
嘗試一下 »
上面的例項只能拖動 dataZoom 元件來縮小或放大圖表。如果想在座標系內進行拖動,以及用滑鼠滾輪(或移動觸屏上的兩指滑動)進行縮放,那麼需要 再再加上一個 inside 型的 dataZoom 元件。
在以上例項基礎上我們再增加 type: 'inside' 的配置資訊:
例項
option = { ..., dataZoom: [ { // 這個dataZoom元件,預設控制x軸。 type: 'slider', // 這個 dataZoom 元件是 slider 型 dataZoom 元件 start: 10, // 左邊在 10% 的位置。 end: 60 // 右邊在 60% 的位置。 }, { // 這個dataZoom元件,也控制x軸。 type: 'inside', // 這個 dataZoom 元件是 inside 型 dataZoom 元件 start: 10, // 左邊在 10% 的位置。 end: 60 // 右邊在 60% 的位置。 } ], ... }
嘗試一下 »
當然我們可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個或哪些數軸。
例項
var data1 = []; var data2 = []; var data3 = []; var random = function (max) { return (Math.random() * max).toFixed(3); }; for (var i = 0; i < 500; i++) { data1.push([random(15), random(10), random(1)]); data2.push([random(10), random(10), random(1)]); data3.push([random(15), random(10), random(1)]); } option = { animation: false, legend: { data: ['scatter', 'scatter2', 'scatter3'] }, tooltip: { }, xAxis: { type: 'value', min: 'dataMin', max: 'dataMax', splitLine: { show: true } }, yAxis: { type: 'value', min: 'dataMin', max: 'dataMax', splitLine: { show: true } }, dataZoom: [ { type: 'slider', show: true, xAxisIndex: [0], start: 1, end: 35 }, { type: 'slider', show: true, yAxisIndex: [0], left: '93%', start: 29, end: 36 }, { type: 'inside', xAxisIndex: [0], start: 1, end: 35 }, { type: 'inside', yAxisIndex: [0], start: 29, end: 36 } ], series: [ { name: 'scatter', type: 'scatter', itemStyle: { normal: { opacity: 0.8 } }, symbolSize: function (val) { return val[2] * 40; }, data: data1 }, { name: 'scatter2', type: 'scatter', itemStyle: { normal: { opacity: 0.8 } }, symbolSize: function (val) { return val[2] * 40; }, data: data2 }, { name: 'scatter3', type: 'scatter', itemStyle: { normal: { opacity: 0.8, } }, symbolSize: function (val) { return val[2] * 40; }, data: data3 } ] }
「其他文章」
- sql server如何刪除前1000行資料
- spring boot 不連線資料庫啟動
- 刪除字串中的所有相鄰重複項
- 超全面的Linux基礎知識的梳理
- 手把手教你 Socket 通訊(TCP/IP)
- Vue Openlayer中使用select選擇要素
- 對order by的理解
- 在docker中haproxy的安裝以及mysql的負載均衡配置
- JavaScript字串中URL的檢測並轉換為連結
- 只要有熱情和方法就能學好Linux
- Highcharts 環境配置介紹
- Centos7安裝與配置OpenVPN伺服器
- ECharts 互動元件概述
- docker初體驗:docker部署wordpress部落格系統
- 如何使用evilscan 掃描網路
- docker初體驗:docker 自己定製映象
- ECharts 樣式設定介紹
- 一名合格的運維工程師的歷練之路
- Python中非常有用的三個資料科學庫
- ssl證書是由什麼組成?ssl證書是什麼?