关于echarts:人人都能看懂的ECharts-数据缩放组件

2次阅读

共计 6659 个字符，预计需要花费 17 分钟才能阅读完成。

本文首发自「慕课网」，想理解更多 IT 干货内容，程序员圈内热闻，欢送关注 ” 慕课网 ”！
作者：范文杰_fe| 慕课网讲师

在一个数据图表中，可能因为数据所示意的工夫范畴较大，从而导致整个图表相当的长，当这些数据都不得不展现的时候，对咱们剖析某一段时间内数据的变动造成的极大的影响，所以当咱们遇到这种状况的时候就须要用到 ECharts 的数据缩放组件了。

官网解释：

dataZoom 组件用于区域缩放，从而能自在关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

慕课解释

dataZoom 组件提供了一套在图表运行状态下，终端用户能够通过鼠标、手指（触屏下）的动作触发图表视图窗口变动，使图表聚焦在某个部分区域的交互性能。dataZoom 有 3 个变种：

inside：内置于图表的缩放组件，用户能够在图表上间接操作缩放动作；
slider：独立与图表外的缩放组件，是三个变种中惟一具备视觉组件的类型，用户次要在滑块上实现交互；
select：框选模式，须要在 toolbox 中配置应用。

原理上，dataZoom 通过管制坐标轴的数值范畴实现图表视图窗口的变动，所以对于开发者来说，无论应用变种，最根本的须要确定 dataZoom 管制的是那个（或那些）数轴，以及对其余数轴的影响。

Tips：
dataZoom 只实用于直角坐标系、极坐标系，对于地图、日历坐标系等可思考应用 visualmap 组件。

应用 dataZoom 的第一步是确定缩放组件要管制那一条坐标轴，办法很简略，在直角坐标系下通过设定 xAxisIndex 或 yAxisIndex 为对应坐标轴下标；极坐标系下通过设定 radiusAxisIndex 或 angleAxisIndex 为对应坐标轴下标即可。例如下例设定两个 dataZoom 实例并别离指向两个不同类型的坐标轴：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Echarts Example</title>
    </head>
    <body>
        <div id="main" style="width: 1020px; height: 400px;"></div>

        <script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
        <script type="text/javascript">
            const random = (min, max) => Math.round(Math.random() * (max - min) + min);
            const myChart = echarts.init(document.getElementById('main'));

            const option = {
                toolbox: {
                    feature: {saveAsImage: {},
                    },
                },
                dataZoom: [
                    // 作用在直角坐标系上
                    {type: 'slider', xAxisIndex: 0, right: '55%', left: 0},
                    // 作用在极坐标系上
                    {type: 'slider', angleAxisIndex: 0, left: '55%', right: '5%'},
                ],
                grid: {left: 0, containLabel: true, width: '45%'},
                xAxis: {type: 'value'},
                yAxis: {type: 'category'},
                polar: {left: '50%', containLabel: true, radius: '55%', center: ['77%', '50%'] },
                angleAxis: {type: 'category'},
                radiusAxis: {type: 'value'},
                series: [
                    {data: genSeriesData(7),
                        type: 'bar',
                    },
                    {data: genSeriesData(7),
                        type: 'bar',
                        coordinateSystem: 'polar',
                    },
                ],
            };
            myChart.setOption(option);

            function genSeriesData(len) {const result = [];
                for (let i = 0; i < len; i += 1) {const node = [random(10, 100), `S${i + 1}`];
                    result.push(node);
                }
                return result;
            }
        </script>
    </body>
</html>

示例成果：

Tips：

dataZoom 三个变种性能类似，其中只有 slider 类型提供了视觉组件，为演示的便当，本文中的示例默认应用 slider 类型，inside、select 性能相似，以此类推即可。

dataZoom 也反对同时管制两条轴的数据窗口，只需同时指定 xAxisIndex 和 yAxisIndex（极坐标下则同时指定 angleAxisIndex、radiusAxisIndex），不过须要两个轴有雷同的类型和数值范畴，例如下例：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Echarts Example</title>
    </head>
    <body>
        <div id="main" style="width: 1020px; height: 400px;"></div>

        <script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
        <script type="text/javascript">
            const random = (min, max) => Math.round(Math.random() * (max - min) + min);
            const myChart = echarts.init(document.getElementById('main'));

            const option = {
                toolbox: {
                    feature: {saveAsImage: {},
                    },
                },
                dataZoom: [
                    // 作用在直角坐标系上
                    {type: 'slider', xAxisIndex: 0, right: '55%', left: 0},
                    // 作用在极坐标系上
                    {type: 'slider', angleAxisIndex: 0, left: '55%', right: '5%'},
                ],
                grid: {left: 0, containLabel: true, width: '45%'},
                xAxis: {type: 'value'},
                yAxis: {type: 'category'},
                polar: {left: '50%', containLabel: true, radius: '55%', center: ['77%', '50%'] },
                angleAxis: {type: 'category'},
                radiusAxis: {type: 'value'},
                series: [
                    {data: genSeriesData(7),
                        type: 'bar',
                    },
                    {data: genSeriesData(7),
                        type: 'bar',
                        coordinateSystem: 'polar',
                    },
                ],
            };
            myChart.setOption(option);

            function genSeriesData(len) {const result = [];
                for (let i = 0; i < len; i += 1) {const node = [random(10, 100), `S${i + 1}`];
                    result.push(node);
                }
                return result;
            }
        </script>
    </body>
</html>

缩放后，要求数值项的 x、y 值同时在窗口内才会显示，能够仔细观察下图，随着 dataZoom 滑块的变动，图表 x、y 轴的数值范畴同时发生变化：

选定主轴后，能够通过 filterMode 属性设定 dataZoom 对其它轴及图表数值点的副作用。filterMode 属性反对如下值：

filter：对于序列中的数据项，只有有一个维度在数据窗口外，整个数据项就会被过滤掉；
weakFilter：对于序列中的数据项，当所有维度都在数据窗口外时，才会被过滤掉；
empty：数据窗口之外的数据会被设置为空；
none：不过滤数据。

在应用 dataZoom 的场景中，导出图片时会放弃通过 dataZoom 调整过的视图窗口，导致图片无奈残缺地展现整个图表的内容，例如：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Echarts Example</title>
    </head>
    <body>
        <div id="main" style="width: 1020px; height: 400px;"></div>
        <button id="export">export png</button>

        <script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
        <script type="text/javascript">
            const random = (min, max) => Math.round(Math.random() * (max - min) + min);
            const myChart = echarts.init(document.getElementById('main'));

            const option = {toolbox: { feature: { saveAsImage: {} } },
                dataZoom: [{type: 'slider', xAxisIndex: 0, start: 14, end: 50}],
                grid: {},
                xAxis: {type: 'category'},
                yAxis: {type: 'value'},
                series: [
                    {data: genSeriesData(20),
                        type: 'bar',
                    },
                ],
            };
            myChart.setOption(option);

            function genSeriesData(len) {const result = [];
                for (let i = 0; i < len; i += 1) {const node = [`S${i + 1}`, random(10, 100)];
                    result.push(node);
                }
                return result;
            }
        </script>
    </body>
</html>

点击右上角工具栏的 saveAsImage 按钮后，导出的后果：

此时，能够综合应用 ECharts 提供的各类接口，自行实现导出过程。根本流程是：

通过 dataZoom 行为将数值范畴设置为 0% ~ 100%，以展现残缺的视图；
监听 finished 事件，在图表从新渲染实现后，执行导出函数 getDataUrl；
通过 document.createElement('a') 并设置 src 属性为上一步失去图片 base64 值，模仿点击下载行为，失去残缺图片；
移除 finished 事件监听，防止反复导出；
重置 dataZoom，复原操作前的值。

残缺示例：

 <!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Echarts Example</title>
    </head>
    <body>
        <div id="main" style="width: 1020px; height: 400px;"></div>
        <button id="export">export png</button>

        <script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script>
        <script type="text/javascript">
            const random = (min, max) => Math.round(Math.random() * (max - min) + min);
            const myChart = echarts.init(document.getElementById('main'));

            const option = {toolbox: { feature: { saveAsImage: {} } },
                dataZoom: [{type: 'slider', xAxisIndex: 0, start: 14, end: 50}],
                grid: {},
                xAxis: {type: 'category'},
                yAxis: {type: 'value'},
                series: [
                    {data: genSeriesData(20),
                        type: 'bar',
                    },
                ],
            };
            myChart.setOption(option);

            // 此处实现自定义的图片导出过程
            document.getElementById('export').addEventListener('click', () => {const dz = myChart.getModel().option.dataZoom[0];
                // 记录以后时刻的偏移值
                const oldStart = dz.start;
                const oldEnd = dz.end;

                // 通过 action 将 dataZoom 组件数值范畴设置为 0%-100%
                myChart.dispatchAction({type: 'dataZoom', start: 0, end: 100});
                // 监听渲染实现事件
                myChart.on('finished', download);

                function download() {
                    const img = myChart.getDataURL({
                        backgroundColor: '#fff',
                        // 导出时排除 dataZoom 组件
                        excludeComponents: ['toolbox', 'dataZoom'],
                        pixelRatio: 1,
                    });
                    const anchor = document.createElement('a');
                    anchor.href = img;
                    anchor.setAttribute('download', 'test.jpeg');
                    anchor.click();
                    // 移除事件监听，防止屡次导出
                    myChart.off('finished', download);

                    myChart.dispatchAction({type: 'dataZoom', start: oldStart, end: oldEnd});
                }
            });

            function genSeriesData(len) {const result = [];
                for (let i = 0; i < len; i += 1) {const node = [`S${i + 1}`, random(10, 100)];
                    result.push(node);
                }
                return result;
            }
        </script>
    </body>
</html>

通过该示例可能正确导出残缺图表，后果如：

本文联合多个实例，讲述 Echarts 数据缩放组件（dataZoom）的应用办法，包含选定缩放主轴的策略；各类过滤模式的体现；以及在缩放组件染指的场景下，如何残缺导出图表。

欢送关注「慕课网」官网帐号，咱们会始终保持提供 IT 圈优质内容，分享干货常识，大家一起独特成长吧！

本文原创公布于慕课网，转载请注明出处，谢谢合作

正文完