Echarts数据可视化
文章目录
- Echarts数据可视化
- 第3章 Echarts组件详解
- 3.6 数据区域缩放
- 3.6.1 滑动条型数据区域缩放组件
- 3.6.2 内置型数据区域缩放组件
- 3.6.3 框选型数据区域缩放组件
Echarts数据可视化：入门、实战与进阶
第3章 Echarts组件详解
3.6 数据区域缩放
dataZoom：数据缩放组件。作用是向用户提供区域缩放的功能，使用户可以通过区域缩放概览数据的整体情况，也能关注数据的细节。
几种分类：
- 滑动条型数据区域缩放组件【dataZoomSlider】
- 内置型数据区域缩放组件【dataZoomInside】
- 框选型数据区域缩放组件【dataZoomSelect】
3.6.1 滑动条型数据区域缩放组件
滑动条型数据区域缩放组件几个常用参数：
- xAxisIndex：指定控制的x轴。用于一个可视化中有多个图表。
- 取值是一个数字，则控制的是一个轴
- 取值是一个数组，则控制多个轴
举个栗子：
option: { xAxis: [ {...}, // 第一个xAxis {...}, // 第二个xAxis {...}, // 第三个xAxis {...}, // 第四个xAxis ], dataZoom: [ { // 第一个dataZoom组件 xAixsIndex: [0:3] // 表示这个dataZoom组件控制第一个和第四个xAxis }, { // 第二个dataZoom组件 xAxisIndex: 2 // 表示这个dataZoom组件控制第三个xAxis } ] }
当然yAxisIndex用法类似。
- filterMode：过滤模式，dataZoom数据窗口缩放的实质其实是数据过滤，即过滤掉窗口外的内容。
- filter：过滤窗口外的数据。当可视化有多个轴时，会影响其他轴的数据范围，对于数据，只要有一个维度在窗口外，就会被过滤掉
- weakFilter：过滤窗口外的数据。当可视化有多个轴时，会影响其他轴的数据范围，对于数据，只有当其所有维度都在窗口同侧外，才会被过滤掉。
- empty：不会影响其他轴的数据范围。
- none：不过滤数据，只会改变数轴范围
举个栗子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>滑动条型数据区域缩放组件</title> <!-- 引入 echarts.js --> <script src="../js/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { dataZoom: [ { id: 'dataZoomX', type: 'slider', xAxisIndex: [0], filterMode: 'filter' }, { id: 'dataZoomY', type: 'slider', yAxisIndex: [0], filterMode: 'empty' } ], xAxis: {type: 'value'}, yAxis: {type: 'value'}, series: { type: 'bar', data: [ // 第一列对应 X 轴，第二列对应 Y 轴。 [10, 30], [20, 50], [5, 20], [2, 10] ] } }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
浏览器渲染效果
代码中，控制x轴的缩放模式为filter，控制y轴的缩放模式为empty，则x轴作为主轴，x的缩放会影响y 轴数据
y轴作为辅助轴，y轴的缩放不会影响x 轴的数据。
3.6.2 内置型数据区域缩放组件
内置是指该区域缩放组件是内置在坐标系中的，其参数和滑动条型基本一致。
举个栗子：将filter 改为 inside
使用鼠标滚轮进行区域即可进行区域缩放
3.6.3 框选型数据区域缩放组件
框选型就是通过选框来进行数据区域缩放，该组件在toolbox 中。
举个栗子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>框选型数据区域缩放组件</title> <!-- 引入 echarts.js --> <script src="../js/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '这是主标题', subtext: '这是副标题', left: 'center'//居中显示 }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, toolbox: { show: true, left: 'left', feature: { mark: {show: true}, dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true}, dataZoom: {show: true} } }, legend: { data: ['各产品销量情况'] }, xAxis: { data: ["产品A", "产品B", "产品C", "产品D", "产品E"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [900, 700, 550, 1000, 200] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
浏览器渲染效果
可以看到toolbox 中多了两个按钮，分别是 区域缩放 和 区域缩放还原
区域缩放效果
