pyecharts自适应居中，修改macro后竖向拉动不会自适应

小诸葛屁啦

于 2024-02-28 15:02:23 发布

阅读量198

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_53367203/article/details/136346607

版权

	<script>
         //窗口大小变化时候，进行刷新页面操作，防止样式混乱
             var x=window.innerWidth;
			 var y=window.innerHeight;
         function resizeFresh(){
             if(x!=window.innerWidth)
                 location.reload();
			 if(y!=window.innerHeight)
                 location.reload();
         }
     </script>

其它博主给的一般是横向拉动才会变化，竖向拉动没反应，原因是修改 macro文件没有设定网页高度变化，在reload时加入innerHeight的判断即可

完整开头如下

{%- macro render_chart_content(c) -%}
	<div id="{{ c.chart_id }}" class="chart-container" style="width:95%; height:95%; margin:auto; top:30px"></div>
    <script>
        var chart_{{ c.chart_id }} = echarts.init(
            document.getElementById('{{ c.chart_id }}'), '{{ c.theme }}', {renderer: '{{ c.renderer }}'});
        {% for js in c.js_functions.items %}
            {{ js }}
        {% endfor %}
        var option_{{ c.chart_id }} = {{ c.json_contents }};
        chart_{{ c.chart_id }}.setOption(option_{{ c.chart_id }});
        {% if c._is_geo_chart %}
            var bmap = chart_{{ c.chart_id }}.getModel().getComponent('bmap').getBMap();
            {% if c.bmap_js_functions %}
                {% for fn in c.bmap_js_functions.items %}
                    {{ fn }}
                {% endfor %}
            {% endif %}
        {% endif %}
        {% if c.width.endswith('%') %}
            window.addEventListener('resize', function(){
                chart_{{ c.chart_id }}.resize();
            })
        {% endif %}
    </script>
	<script>
         //窗口大小变化时候，进行刷新页面操作，防止样式混乱
             var x=window.innerWidth;
			 var y=window.innerHeight;
         function resizeFresh(){
             if(x!=window.innerWidth)
                 location.reload();
			 if(y!=window.innerHeight)
                 location.reload();
         }
     </script>

{%- endmacro %}