ECharts 入门教程 ECharts数据区域缩放工具

2024-02-25 开发教程 ECharts 入门教程匿名 5℃

toolbox.feature.dataZoom | Object

数据区域缩放。目前只支持直角坐标系的缩放。

toolbox.feature.dataZoom.show | boolean

[ default: true ]

是否显示该工具。

toolbox.feature.dataZoom.title | Object

缩放和还原的标题文本。

toolbox.feature.dataZoom.title.zoom | string

[ default: '区域缩放' ]

toolbox.feature.dataZoom.title.back | string

[ default: '区域缩放还原' ]

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

数据区域缩放 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 轴。

下面是一个数据区域缩放的简单实例：

<!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数据视图工具的icon样式

下一节： ECharts数据区域缩放的icon样式

"ECharts 入门教程"的目录