JSRUN 用代码说话

数据区域缩放工具

编辑教程
上一节 ： 数据视图工具的icon样式 下一节 ： 数据区域缩放的icon样式

数据区域缩放工具

toolbox.feature.dataZoom

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

toolbox.feature.dataZoom.show

boolean [ 默认值: true ]

是否显示该工具。

toolbox.feature.dataZoom.title

Object 缩放和还原的标题文本。

toolbox.feature.dataZoom.title.zoom

string [ 默认值: '区域缩放' ]

toolbox.feature.dataZoom.title.back

string [ 默认值: '区域缩放还原' ]

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"></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>
上一节 ： 数据视图工具的icon样式 下一节 ： 数据区域缩放的icon样式
Mos固件，小电视必刷固件 ES6 教程 Vue.js 教程 JSON 教程 jQuery 教程 HTML 教程 HTML 5 教程 CSS 教程 CSS3 教程 JavaScript 教程 DHTML 教程 JSON在线格式化工具 JS在线运行 JSON解析格式化 jsfiddle中国国内版本 JS代码在线运行 PHP代码在线运行 Java代码在线运行 C语言代码在线运行 C++代码在线运行 Python代码在线运行 Go语言代码在线运行 C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统， 所有工程师都可以参与共同维护的闪电教程，让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编，让零散的知识点帮助更多的人。
X
支付宝
￥ 9.99
无法付款，请点击这里
金额： 0 元
备注：
转账时请填写正确的金额和备注信息，到账由人工处理，可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码， 此过程可能需要15秒钟