echarts 图表大小随窗口变动而自适应变动

methods:{
        //画折线图
        drawCharts(id, data, color) {
            let option = {
                tooltip: {
                    textStyle: {
                        color: color
                    }
                },
                grid: {
                    x: 0,
                    y: 20,
                    x2: 0,
                    y2: 20
                },
                xAxis: {
                    type: "category",
                    show: false,
                    smooth: false,
                    splitLine: { show: false },
                    axisLine: {
                        lineStyle: {
                            type: "dashed"
                        }
                    }
                },
                yAxis: {
                    show: false,
                    splitLine: { show: false },
                    smooth: false
                },
                series: [
                    {
                        type: "line",
                        data: data,
                        lineStyle: {
                            color: color,
                            width: 1
                        },
                        itemStyle: {
                            normal: {
                                color: color
                            }
                        }
                    }
                ]
            };
            if(id=="#stock-charts1"){
                this.myChart1=this.$echarts.init(document.querySelector(id));
                this.myChart1.setOption(option);
            }
            if(id=="#stock-charts2"){
                this.myChart2=this.$echarts.init(document.querySelector(id));
                this.myChart2.setOption(option);
            }
            if(id=="#stock-charts3"){
                this.myChart3=this.$echarts.init(document.querySelector(id));
                this.myChart3.setOption(option);
            }
            if(id=="#stock-charts4"){
                this.myChart4=this.$echarts.init(document.querySelector(id));
                this.myChart4.setOption(option);
            }
            if(id=="#stock-charts5"){
                this.myChart5=this.$echarts.init(document.querySelector(id));
                this.myChart5.setOption(option);
            }
            if(id=="#stock-charts6"){
                this.myChart6=this.$echarts.init(document.querySelector(id));
                this.myChart6.setOption(option);
            }
            
      },
},
mounted(){
        var _this=this;
        window.onresize = function() {
            _this.$nextTick(
                _this.myChart1.resize(),
                _this.myChart2.resize(),
                _this.myChart3.resize(),
                _this.myChart4.resize(),
                _this.myChart5.resize(),
                _this.myChart6.resize()
            )
        };
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值