zoukankan      html  css  js  c++  java
  • 给echarts加个“全屏展示”

    echarts的工具箱并没有提供放大/全屏的功能,

    查找文档发现可自定义工具https://www.echartsjs.com/option.html#toolbox.feature

    show代码

    toolbox: {
            feature: {
                myFull: {
                    show: true,
                    title: '全屏查看',
                    icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                    onclick: function (e){
                        var opts = e.getOption()
                        opts.toolbox[0].feature.myFull.show=false
                        //window.top表示最顶层iframe  如果在当页面全屏打开 删去window.top即可
                        window.top.layer.open({
                            title:false,
                            type:1,
                            content:'<div class="fullChart" style="height:100%;100%;padding:30px 0px"></div>",
                            success:function(){
                                var fullchart = echarts.init(window.top.document.getElementById('fullChart'))
                                fullchart.setOption(opts)
                            }
                        })
                    }
                }
            }
        }

    思路:

      1、在点击自定义全屏后,插入一个dom外框,将已存在的echarts图表dom复制并插入到外框,发现复制dom可能无法获取echart实例对象,需要放大resize()无法进行,便放弃

      2、插入一个dom全屏外框,获取当前echart图的option,在全屏内用option重新生成echart图表,关闭时删除dom结构即可

      3、发现项目中有layer,于是获取echart的option后,用layer打开一个弹窗,重新生成echart,由于iframe嵌套,所以将弹窗在最外层打开。

      

  • 相关阅读:
    Python之语句与函数
    python语言的特别之处
    kafka消费者客户端
    kafka生产者客户端
    kafka技术分享02--------kafka入门
    kafka技术分享01--------why we study kafka?
    hadoop之hdfs及其工作原理
    hadoop之hdfs------------------FileSystem及其源码分析
    数据结构之红黑树(一)
    mysql中,唯一索引和普通索引应如何选择
  • 原文地址:https://www.cnblogs.com/lggggg/p/10690034.html
Copyright © 2011-2022 走看看