vue自定义echart 全屏工具

最新推荐文章于 2024-02-07 09:13:59 发布
最新推荐文章于 2024-02-07 09:13:59 发布
阅读量1.4k 收藏 4
点赞数
分类专栏： 前端 # vue 文章标签： vue echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31970227/article/details/110298530
版权
前端 同时被 2 个专栏收录
13 篇文章 1 订阅
订阅专栏
vue
8 篇文章 1 订阅
订阅专栏

需求描述

如图：在动态加载图表的情况下，自定义一个全屏按钮，点击按钮全屏显示图表。
在这里插入图片描述
实现效果
在这里插入图片描述

实现思路：

遮罩：定义两个div：a和A，a为当前图表，A为全屏后的图表，全屏后A在a的上层显示，退出全屏后A隐藏

实现过程

  • 原始div
 <div style="height: 360px" id="test1"></div>
  • 定义一个变量，判断当前是否为全屏
isFull: false, //false为非全屏，true为全屏
  • 新创建一个div，加载全屏后的图表，v-bind:class 用来动态加载css样式，isFull为true时，show为true，即 div class=“show”，div显示；isFull为false时，hide为true，即 div class=“hide”，div隐藏
<div id="fullScreen" v-bind:class="{ show: isFull, hide: !isFull }"></div>

<style>
.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #ffffff;
}

.hide {
    display: none;
}
</style>
  • 使用echart自定义toolbox方法，自定义toolbox，其中，icon建议使用矢量路径，图标可以自适应，具体使用方法见文章末尾，定义按钮的onclick方法
myTool1: {
    show: true,
    title: self.isFull == true ? '取消全屏' : '全屏',
    icon:
        'path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748',
    onclick: function(){}
}
  • onclick方法详细说明
  1. 全屏或者非全屏，两者除了渲染的div和按钮提示不同之外，两者完全相同，所以只需要在点击按钮的时候循环调用动态渲染图表的方法即可。
  2. 循环调用动态方法时需要传参，即渲染的div元素。
  3. onclick方法是一个函数，函数内部有自己的this，和vue的this冲突，需要给vue的this重新赋值，才能在函数内部使用vue的this。
  4. this.$nextTick(()=>{})这个的意思就是说在dom状态更新之后立即执行回调函数，这就是说获取新的dom。

动态加载图表完整代码

drawChart(elementId) {
    var self = this;
    self.elementId = elementId;
    let element = document.getElementById(elementId);
    self.charts = echarts.init(element);
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show: true
                },
                myTool1: {
                    show: true,
                    title: self.isFull == true ? '取消全屏' : '全屏',
                    icon:
                        'path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748',
                    onclick: function () {
                        let elementId = self.elementId;
                        if (!self.isFull) {
                            elementId = 'fullScreen';
                        }
                        setTimeout(() => {
                            self.$nextTick(() => {
                                self.drawChart(elementId);
                            });
                        }, 10);

                        self.isFull = !self.isFull;
                    }
                }
            }
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }
        ]
    };

    self.charts.setOption(option);
}

完整代码

<template>
    <div>
        <div class="app-container">
            <el-row :gutter="10">
                <el-card :style="contentHeight(120)" class="cardHeader">
                    <div>
                        <h3 class="list-title">全屏测试</h3>

                        <el-col :span="12" :gutter="10">
                            <el-card style="height: 400px; margin-top: 10px; margin-left: 10px">
                                <div style="height: 360px" id="test1"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12" :gutter="10">
                            <el-card style="height: 400px; margin-top: 10px; margin-left: 10px">
                                <div style="height: 360px" id="test2"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12" :gutter="10">
                            <el-card style="height: 400px; margin-top: 10px; margin-left: 10px">
                                <div style="height: 360px" id="test3"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12" :gutter="10">
                            <el-card style="height: 400px; margin-top: 10px; margin-left: 10px">
                                <div style="height: 360px" id="test4"></div>
                            </el-card>
                        </el-col>
                    </div>
                    <div id="fullScreen" v-bind:class="{ show: isFull, hide: !isFull }"></div>
                </el-card>
            </el-row>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
export default {
    data() {
        return {
            sourceList: [
                {
                    name: '交易量top',
                    aggtype: 'bucket',
                    lineType: 'chart',
                    xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                    yData: [5, 20, 36, 10, 10, 20]
                },
                {
                    name: '原交易',
                    aggtype: 'bucket',
                    lineType: 'chart',
                    xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                    yData: [5, 20, 36, 10, 10, 20]
                },
                {
                    name: '子交易',
                    aggtype: 'bucket',
                    lineType: 'chart',
                    xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                    yData: [5, 20, 36, 10, 10, 20]
                }
            ],
            isFull: false, //false为放大，true为缩小
            targetList: []
        };
    },
    methods: {
        drawChart(elementId) {
            var self = this;
            self.elementId = elementId;
            let element = document.getElementById(elementId);
            self.charts = echarts.init(element);
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true
                        },
                        myTool1: {
                            show: true,
                            title: self.isFull == true ? '取消全屏' : '全屏',
                            icon:
                                'path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748',
                            onclick: function () {
                                let elementId = self.elementId;
                                if (!self.isFull) {
                                    elementId = 'fullScreen';
                                }
                                setTimeout(() => {
                                    self.$nextTick(() => {
                                        self.drawChart(elementId);
                                    });
                                }, 10);

                                self.isFull = !self.isFull;
                            }
                        }
                    }
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }
                ]
            };

            self.charts.setOption(option);
        }
    },
    mounted() {
        this.drawChart('test1');
        this.drawChart('test2');
        this.drawChart('test3');
        this.drawChart('test4');

        // this.drawChart('fullScreen');
    }
};
</script>
<style>
.cardHeader {
    padding-bottom: 0px;
}

.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #ffffff;
}

.hide {
    display: none;
}
</style>

矢量路径

  1. 在https://www.iconfont.cn/上查找想要使用的图标
  2. 选择复制SVG

    复制结果如下：
    <svg t="1606583985776" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1144" width="200" height="200"><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="#444444" p-id="1145"></path></svg>
  3. 取SVG的path d部分，拼接在**path://**即可
时遇倾城色
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue自定义指令实现方法详解
10-17
主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下
vue自定义模板vue自定义模板
03-18
自定义导航模板
echarts5图表全屏功能
最新发布
lfYexun的博客
02-07 190
【代码】echarts5图表全屏功能。
Vue自定义弹窗指令的实现代码
10-18
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
echart 点击全屏显示
weixin_45335168的博客
07-02 2551
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>饼图</title> <script src="js/jquery.js"></script> <script src="js/echarts.js"></script> <style>
echarts的全屏切换
m0_46495397的博客
07-15 701
echart全屏切换
echarts 自定义按钮实现全屏
11-05
自定义echarts全屏功能，并退出（可以从GitHub上下载源码） 地址（https://blog.csdn.net/qq453627768/article/details/73550200） https://github.com/453627768/453627768echart.github.io
echart实现全屏显示功能
YU_1123_ting的博客
07-04 2710
echart实现全屏显示功能
12-Echarts 配置系列之：图表工具栏 Toolbox
youyudehan的博客
11-28 3297
快速了解Echarts 中的 toolbox 工具栏，并在工具栏中自定义点击方法，文章中提供截图中的 option 配置代码。
七、Echart图表 之 toolbox工具栏组件配置项大全
weixin_55181759的博客
05-26 9655
🍓 作者主页：💖仙女不下凡💖 🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！ 🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！ 👉推荐相关文章：Echart图表 之 基本使用及配置项 👉推荐相关文章：Echart图表 之 title配置项大全 👉推荐相关文章：Echart图表 之 颜色color配置项大全 👉推荐相关文章：Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全 👉推荐相关文章：Echart图表 之
【vue】 vue中echarts渐变被覆盖、失效，echarts.graphic.LinearGradient，不能正常显示的解决方法。
amoureux555的博客
03-01 1163
vue中echarts渐变被覆盖、失效，echarts.graphic.LinearGradient，不能正常显示的解决方法。
echarts+vue 实现大数据可视化全屏展示
10-07
echartapp.zip
vue自定义全局共用函数详解
10-18
今天小编就为大家分享一篇vue自定义全局共用函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Echarts使用心得(增加全屏按钮，点击一个图另外一个图变化，双环内外环关联，全屏左右切换)
qq453627768的博客
06-21 1万+
echarts使用心得和增加全屏自定义按钮 echats使用（我这里使用的单文件引入的方式） 1.首先导入echart和jq 2.先准备好一个全屏的div块，平时隐藏当点击全屏显示按钮之后出现 div id="box"> div id="studyEff">div> div id="act">div> div>
关于echarts图表全屏与缩放按钮 功能的实现
三包酸奶！的博客
09-28 1578
echarts全屏与缩放按钮实现
Echarts 图表全屏显示
EsquireY的博客
10-09 8073
技术栈版本 “vue”: “^2.6.11”, “echarts”: “^5.2.1”, 第一种方案 实现思路 1，在echart的工具栏 ，toolbox添加自定义图标全屏按钮事件。 实现步骤 toolbox: { // show: false, feature: { myFull: { show: true, .
vue项目中底部导航盖住页面内容解决思路
Miss M
03-11 8972
在内容页面写一个方法（A） 传入一个页面中的参数（用来判断页面中是否有数据） 有数据的话在混入中的mounted方法中执行内容页面的方法(A) A方法 定义一个常量（底部导航的高度） this.$refs.recommend.style.bottom = bottom recommend为内容页面的DOM 加过bottom后刷新页面 this.$refs.scroll.refresh(...
echarts图表全屏显示设置
热门推荐
qq_38519358的博客
07-16 1万+
react项目中会遇到点击echarts工具栏中的全屏按钮，让图表全屏显示的问题，这里涉及到自定义工具栏按钮问题。 话不多说，直接上代码：在echart的工具栏中添加全屏按钮并设置点击事件。即toolbox添加自定义图标全屏按钮事件。 示例图： // html中存放图表id <div class="container"> <div id="userTi...
Vue+Echarts完成数据大屏-新手入门篇
Itmei的博客
04-23 8519
📣文章目录1.安装echarts.js2.新建vue界面3.引入 ECharts4.创建Vue方法和图表信息5.效果样式6.通过官网查找自己喜欢的样式 1.安装echarts.js npm install echarts --save 2.新建vue界面 <template> <!-- 定义echarts需要控制的dom元素 --> <div :style="{height:height,width:width}" /> </template> 3
vue echart 全屏展示
07-27
要在Vue中实现ECharts的全屏展示，你可以按照以下步骤进行操作： 1. 首先，你需要在Vue项目中安装ECharts库。可以使用npm或yarn运行以下命令来安装ECharts： ```bash npm install echarts --save ``` 2. 在需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值