Echarts自定义工具栏组件

最新推荐文章于 2024-07-09 13:56:40 发布

氵易风灬

最新推荐文章于 2024-07-09 13:56:40 发布

阅读量6.7k

点赞数 3

分类专栏：数据可视化Echarts

本文链接：https://blog.csdn.net/qq_21963133/article/details/79280513

版权

本文探讨如何在Echarts中自定义工具栏组件以满足特定需求，例如为图表添加放大功能。介绍了两种实现方式：一是通过获取图表图片并放入新div，但可能影响清晰度和事件处理；二是直接获取图表option并在新图表中应用，保留原有交互性。

摘要由CSDN通过智能技术生成

Echarts默认自带了几个工具栏组件，如柱状图和折线图的切换，图片的下载等，有时这些组件并不能完全满足我们的需求，这时需要我们自定义自己的组件。

应用场景一：在一个页面中需要展示多个图形（图形相对来说较小），对每个图形增加一个放大的按钮，可以将图形进行放大。

实现思路一：获取echarts生成的图片，然后将图片放到另一个div里面。缺点：放大后可能不是很清晰，图标上的事件也不能起作用。

实现思路二：获取当前图形的option配置项，在另外一个图形里面装载它。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
    <style>
        #mask{
            display:none;
            background:rgba(0,0,0,0.3);
            z-index:999999999;
            width:100%;
            height:300%;
            position:fixed;//利用固定定位的好处：页面还可以上下翻动，但是始终处于灰色背景下
        }
        #show{
            display:none;
            background:white;

最低0.47元/天解锁文章

氵易风灬

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Echarts自定义工具栏组件

Echarts默认自带了几个工具栏组件，如柱状图和折线图的切换，图片的下载等，有时这些组件并不能完全满足我们的需求，这时需要我们自定义自己的组件。应用场景一：在一个页面中需要展示多个图形（图形相对来说较小），对每个图形增加一个放大的按钮，可以将图形进行放大。实现思路一：获取echarts生成的图片，然后将图片放到另一个div里面。缺点：放大后可能不是很清晰，图标上的事件也不能起作用。实
复制链接

扫一扫

专栏目录