阅读(1870)
赞(0)
ECharts数据区域缩放工具
2017-09-22 15:37:47 更新
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>