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()
            )
        };
}

 


版权声明:本文为weixin_43837268原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。