閱讀(8.5k) 書簽贊(0) 我要糾錯

ECharts數(shù)據(jù)區(qū)域縮放工具

2020-08-08 10:23 更新

toolbox.feature.dataZoom | Object

數(shù)據(jù)區(qū)域縮放。目前只支持直角坐標系的縮放。

toolbox.feature.dataZoom.show | boolean

[ default: true ]

是否顯示該工具。

toolbox.feature.dataZoom.title | Object

縮放和還原的標題文本。

toolbox.feature.dataZoom.title.zoom | string

[ default: '區(qū)域縮放' ]

toolbox.feature.dataZoom.title.back | string

[ default: '區(qū)域縮放還原' ]

toolbox.feature.dataZoom.icon | Object

縮放和還原的 icon path。

toolbox.feature.dataZoom.icon.zoom | string

Icon 的 path 字符串，ECharts 3 中支持使用自定義的 svg path 作為 icon，格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導出。

toolbox.feature.dataZoom.icon.back | string

Icon 的 path 字符串，ECharts 3 中支持使用自定義的 svg path 作為 icon，格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導出。

toolbox.feature.dataZoom.iconStyle | Object

數(shù)據(jù)區(qū)域縮放 icon 樣式設置。

toolbox.feature.dataZoom.xAxisIndex | number, Array, boolean

指定哪些 xAxis 被控制。如果缺省則控制所有的x軸。如果設置為 false 則不控制任何x軸。如果設置成 3 則控制 axisIndex 為 3 的x軸。如果設置為 [0, 3] 則控制 axisIndex 為 0 和 3 的 x 軸。

toolbox.feature.dataZoom.yAxisIndex | number, Array, boolean

指定哪些 yAxis 被控制。如果缺省則控制所有的y軸。如果設置為 false 則不控制任何y軸。如果設置成 3 則控制 axisIndex 為 3 的y軸。如果設置為 [0, 3] 則控制 axisIndex 為 0 和 3 的 y 軸。

下面是一個數(shù)據(jù)區(qū)域縮放的簡單實例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.min.js" rel="external nofollow" ></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'value'
      },
      dataZoom: [// 這個dataZoom組件，若未設置xAxisIndex或yAxisIndex，則默認控制x軸。
        {
          type: 'slider',//這個 dataZoom 組件是 slider 型 dataZoom 組件（只能拖動 dataZoom 組件導致窗口變化）
          xAxisIndex: 0, //控制x軸
          start: 10, 	// 左邊在 10% 的位置
          end: 60 	// 右邊在 60% 的位置
        },
        {
          type: 'inside',//這個 dataZoom 組件是 inside 型 dataZoom 組件（能在坐標系內進行拖動，以及用滾輪（或移動觸屏上的兩指滑動）進行縮放）
          xAxisIndex: 0,//控制x軸
          start: 10,
          end: 60
        },
        {
          type: 'slider',//slider 型 dataZoom 組件
          yAxisIndex: 0,//控制y軸
          start: 30,
          end: 80
        },
        {
          type: 'inside',// inside 型 dataZoom 組件
          yAxisIndex: 0,//控制y軸
          start: 30,
          end: 80
        }
      ],
      series: [
        {
          name: 'scatter',
          type: 'scatter',// 這是個『散點圖』
          itemStyle: {
            normal: {
              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"]]
        }
      ]
    });
  </script>
</body>
</html>

以上內容是否對您有幫助：

← ECharts數(shù)據(jù)視圖工具的icon樣式

ECharts數(shù)據(jù)區(qū)域縮放的icon樣式 →

寫筆記

我要補充