vue中echarts随窗体变化

朴灿烈づ我的快乐病毒、 2021-12-20 17:47 264阅读 0赞

![1117150-20190227143253933-1581119925.png][]

mounted(){
            this.drawLine();
        },
        methods: {
            drawLine(){
            var myChartContainer = document.getElementById('myChart');
               //用于使chart自适应宽度,通过窗体宽计算容器高宽
            var resizeMyChartContainer = function(){
              myChartContainer.style.width=(document.body.clientWidth-75)+'px'
            }
             //设置容器高宽
            resizeMyChartContainer()
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(myChartContainer)
             
            // 绘制图表
            myChart.setOption({
                title: { text: '启动次数' },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21']
                },
                yAxis: {
                     type:'value'
                },
                series: [{
                    type: 'line',
                    data: [0,0, 0, 7, 0, 0,12],
                    smooth:true,
                    symbol: 'circle', 
                    symbolSize: 6, 
                    itemStyle:{  
                        normal:{  
                             
                            color:'#fc8a0f',  
                            lineStyle:{  
                                color:'#ff9c35'  
                                   }  
                                }  
                           }
                }],
               
            });
            window.onresize=function(){
              resizeMyChartContainer();
                myChart.resize();
            }
          }
        }
    }
    </script>

转载于:https://www.cnblogs.com/colorful-paopao1/p/10443529.html

[1117150-20190227143253933-1581119925.png]: /images/20211220/bd29adea3943497a8ec25b799825a551.png