『Echarts』工具箱组件

原创

BNTang

修改于 2024-03-05 07:45:00

5932

修改于 2024-03-05 07:45:00

文章被收录于专栏：『学习与分享之旅』『学习与分享之旅』

一、前言

本篇文章是『Echarts』文章的第 4 篇，主要介绍『Echarts』工具箱组件

回顾我们之前关于「ECharts」标题组件的学习，相信大家已经对它有了初步的认识。现在，我们已经掌握了 ECharts 标题组件的知识，接下来让我们继续深入探究 ECharts 的工具箱组件吧。

二、工具箱组件

要使用工具箱组件非常简单，你只需在代码中的 options 对象添加一个名为 toolbox 的配置项。该配置项是一个包含具体配置的对象，它主要包含两个属性：feature 和 show。

2.1.saveAsImage

feature 这一项是工具箱的一个配置选项，它具备哪些具体的功能和特性呢？首先第一个就是 saveAsImage，也就是说，允许我们将图表保存为一张图片。这个功能也是工具箱中最常用的功能之一。话不多说，直接上代码。

let option = {
+    toolbox: {
+        show: true,
+        feature: {
+            // 开启保存为图片
+            saveAsImage: {
+                show: true
+            }
+        }
+    },
    title: {
        subtext: '副标题',
        text: 'ECharts 入门示例',
        left: '70',
        top: 'top',
        borderWidth: 2,
        borderColor: 'red'
    },
    legend: {
        data: ['销量', '产量']
    },
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },
        {
            name: '产量',
            type: 'bar',
            data: [50, 120, 130, 60, 40, 80]
        }
    ]
}

在代码中，我们在 toolbox 配置中增加了 feature 项，进而在 feature 中设置了 saveAsImage。saveAsImage 拥有一个 show 属性，赋值为 true 来激活保存为图片功能。如此一来，在图表上就会显示出一个用于保存图表为图片的按钮。

激活该功能后，将代码运行在谷歌浏览器中以查看效果，您会在图表的右上角发现一个用于保存图片的按钮。点击这个按钮即可将图表保存为图片文件。

这是工具箱的保存图片功能。接下来，请看下面的内容。

2.2.dataView

除了保存图片的功能之外，工具箱还提供了 “数据视图” 功能。数据视图是什么呢？其实非常简单，它能够将图表的数据以表格形式显示。接下来，让我们看一下如何实现数据视图功能的代码。

let option = {
    toolbox: {
        show: true,
        feature: {
            // 开启保存为图片
            saveAsImage: {
                show: true
            },
+            // 开启数据视图
+            dataView: {
+                show: true
+            }
        }
    },
    
    ...
}

在代码配置中，我们在 toolbox 项里添加了 feature 属性。在 feature 内部，我们接着定义了 dataView 选项。给 dataView 设置了 show 属性，并将其值设定为 true，以此开启数据视图功能。由此，图表界面上便会出现一个按钮，用户点击后可以查看数据视图。

激活数据视图功能后，在谷歌浏览器中运行代码来审视效果。您将在图表右上角看到一个用来查看数据视图的按钮。点击它，图表数据就会以表格的方式呈现出来。

请注意，切换到数据视图界面后，我们可以直接编辑数据。在浏览器的右下角，您会看到 close 和 refresh 两个按钮。点击 close 按钮可以退出数据视图界面，而点击 refresh 按钮则能刷新数据，使编辑后的内容生效。

如果您需要撤销所做的改动，有一个简单的办法。您可以回到数据视图，找到您之前修改的数据，将其改回原来的状态，然后点击 refresh 按钮，之前的更改就会被还原。

其实，无需采取前述方法，因为在工具箱组件里，我们已经集成了还原功能。这种方式更直接高效。

2.3.restore

还原 是工具箱组件中的一项关键功能，允许我们在对图表数据进行编辑之后，轻松地将图表恢复至最初始的状态。现在，让我们来看看实现这一还原功能的具体代码是怎样的。

let option = {
    toolbox: {
        show: true,
        feature: {
            // 开启保存为图片
            saveAsImage: {
                show: true
            },
            // 开启数据视图
            dataView: {
                show: true
            },
+            // 开启还原功能
+            restore: {
+                show: true
+            }
        }
    },
    
    ...
}

在代码中，我们在 feature 项中添加了 restore 选项。给 restore 设置了 show 属性，并将其值设定为 true，以此开启还原功能。这样一来，图表界面上就会出现一个按钮，用户点击后可以将图表恢复至最初始的状态。

激活还原功能后，在谷歌浏览器中运行代码来审视效果。您将在图表右上角看到一个用来还原图表的按钮。点击它，图表就会恢复至最初始的状态。

首先，进入数据视图界面，并对数据进行修改。完成后点击 refresh 按钮更新数据。如需恢复至最初的数据，只需点击 restore 按钮即可。关于动态的演示效果，这里就不提供 gif 图了，您可以自行在浏览器中运行代码进行查看体验。

2.4.dataZoom

dataZoom 是工具箱组件中的一项强大功能，它允许我们对图表的特定区域进行放大或缩小，以便更细致地查看数据。现在，让我们来看看如何实现 dataZoom 功能的具体代码。

let option = {
    toolbox: {
        show: true,
        feature: {
            // 开启保存为图片
            saveAsImage: {
                show: true
            },
            // 开启数据视图
            dataView: {
                show: true
            },
            // 开启还原功能
            restore: {
                show: true
            },
+            // 开启数据区域缩放
+            dataZoom: {
+                show: true
+            }
        }
    },
    
    ...
}

在代码的 feature 项中，我们新增了 dataZoom 选项，并为其配置了 show 属性，值设置为 true 来启用数据区域缩放功能。这样，图表界面会出现专门的缩放按钮，用户点击这个按钮后便可对图表数据进行缩放操作。

启用数据区域缩放功能之后，在谷歌浏览器中运行代码以预览效果。在图表的右上角，您会发现一个用于缩放数据的按钮。点击此按钮，图表将根据您的需求进行相应的缩放（一张 gif 演示）。

2.5.magicType

magicType 是工具箱组件中的一项非常实用的功能，它允许我们轻松地在不同的图表类型间进行切换。比如你可以从柱状图切换到折线图，或是其他支持的图表类型。现在，让我们来看看如何实现 magicType 功能的具体代码是怎样的。

let option = {
    toolbox: {
        show: true,
        feature: {
            // 开启保存为图片
            saveAsImage: {
                show: true
            },
            // 开启数据视图
            dataView: {
                show: true
            },
            // 开启还原功能
            restore: {
                show: true
            },
            // 开启数据区域缩放
            dataZoom: {
                show: true
            },
+            // 开启切换图表类型
+            magicType: {
+                show: true,
+                type: ['line', 'bar']
+            }
        }
    },
    
    ...
}

在代码的 feature 项中，我们添加了 magicType 选项，并为其配置了 show 属性，设定值为 true，以开启图表类型切换功能。于是，在图表界面上便会显示一个按钮，用户点击该按钮后可以在不同的图表类型之间切换。

启用图表类型切换功能之后，在谷歌浏览器中运行代码以预览效果。在图表的右上角，您将看到一个用于切换图表类型的按钮。点击此按钮，就可以在不同的图表样式之间进行切换。