zoukankan      html  css  js  c++  java
  • echarts的图表根据父容器大小的改变而改变(弹窗easy-ui的window窗口)

    1.echarts的图表只绘制一次,所以要想大小随着父容器变化就得调方法重新绘制。所以把绘制图表的方法提出来。

    <div class="echart">
    <div :id="id" style="height: 100%; 100%;"></div>
    </div>
    data(){
    return{
    chart:""
    }
    },
    methods:{
    init(){
    let _width=$("#"+this.id).width();
    let _height=$("#"+this.id).height();
    this.chart=this.$echarts.init(document.getElementById(this.id));
    console.log(this.option);
    this.chart.resize({ //根据父容器的大小设置大小
    _width,
    height:_height
    });
    this.chart.setOption(this.option,true);
    }
    }
    2.用window窗口改变大小是调用的方法来调用echarts中的init方法(win和echarts组件是非父子组件)
    win组件中:
    $("#" + _this.id).window({
    title: _this.data.title,
    _this.data.width,
    height:_this.data.height,
    top:_this.data.top,
    left:_this.data.left,
    cls:_this.class,
    collapsible:false,
    minimizable:false,
    maximizable:_this.data.maximizable,
    closable:true,
    modal: false,
    shadow: false,
    draggable: true,
    resizable:_this.data.resizable,
    onBeforeClose: function () { //点击窗口关闭按钮的时候触发
    if (this) {
    $(this).window('destroy');
    }
    _this.$store.commit("win/win_close", {win_id: _this.id});
    },
    onResize:function (){ //窗口大小改变时触发
    _this.bus.$emit("echart") //通过echarts调用echarts里的方法
    }
    });
    echarts组件中:
    mounted() {
    setTimeout(()=>{ //做异步是为了先获取到父容器的宽高之后再进行绘制canvas,设置时长为2000ms是为了保留动画效果
    this.init();
    },2000);
    this.bus.$on("echart",()=>{
    this.init();
    })
    },
  • 相关阅读:
    stm32学习(一)
    linux驱动之ioctl
    request_threaded_irq()参数
    驱动初步学习
    linux命令操作
    Shell
    进程模块管理
    bash及正规表示法
    python脚本
    Python系统模块os
  • 原文地址:https://www.cnblogs.com/xiaoleilei123/p/10836751.html
Copyright © 2011-2022 走看看