echarts的高度如何动态设置？

最新推荐文章于 2024-11-04 11:59:55 发布

走到天涯海角

最新推荐文章于 2024-11-04 11:59:55 发布

阅读量1w

点赞数 1

分类专栏： JS Echarts 文章标签： js

@曾超缘的博客

本文链接：https://blog.csdn.net/weixin_42995083/article/details/107940556

版权

JS 同时被 2 个专栏收录

59 篇文章

订阅专栏

Echarts

25 篇文章

订阅专栏

 <div id="main" style="width: 100%;height:65vh;margin-top:5vh;position:absolute;"></div>

/*
图表
*/  
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '数量top5',
                left:'center',
                top:'10px',
                textStyle: {  //文本样式
                    fontSize: 24,
                    color: '#7f7f7f'
                }

            },
            xAxis: {
                data: ["线路板","电容","电阻","电感","电解"],
                axisTick: {
                  show: false,
                },
                axisLine: { 
                    show: false
                }

            },
            yAxis: [
                {
                type: 'value',
                min: 0, //最小值
                max: 35, //最大值
                interval: 5, //间隔
                axisTick: {
                  show: false,
                },
                axisLine: { 
                    show: false
                }
               }
            ],
            series: [{
                name: '销量',
                type: 'bar',
                data: [32, 19, 18, 15, 12],
                itemStyle: {
                    normal: {
                        color: '#4f81bd',
                        label: {
                                show: true, //显示
                                position: 'top', //在上方
                                textStyle: { //文字样式
                                    color: 'black',
                                    fontSize: 12
                                }
                            }
                    }
                }
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
          
      
        window.onresize = function() { 
            var h1=document.documentElement.clientHeight;//获取屏幕的高度 
            if(h1>700){
              myChart.getDom().style.height = 65 + "vh";
            }else{
              myChart.getDom().style.height = 60 + "vh";
            }
            myChart.resize();        
        }
 
     util.call(function(h){
         //h为点击的那个高度
        var h2=document.documentElement.clientHeight;//获取屏幕的高度 
        console.log(h2);
       if(h2<600){
        //这里重新设置echarts的高度
        myChart.getDom().style.height = ((h2-h)/2)+70 + "px";
        myChart.resize();
       }
      
})