pyecharts学习2--自适应屏幕居中显示_pyecharts 自适应窗口

pyecharts 自适应屏幕居中显示

pyecharts生成的html默认是靠左上显示的
需要生成的文件居中显示，且能根据浏览器窗口大小自动调整需要修改html
当然，如果你是熟悉html，且只是临时少量生成表格的话，每次生成完后手动修改html文件的几个数据即可
需要修改参数：

1.获取浏览器窗口长和宽
2.设置显示区域长宽百分比：width:95%; height:95%;
3.设置居中参数：margin:auto;
4.设置自适应（刷新页面）：location.reload();

如果你想 自动生成 的话，可以了解一下以下内容
修改pyecharts render配置文件
文件路径(python安装目录): xxx\Lib\site-packages\pyecharts\render\templates

1. 修改文件 macro文件

修改居中和百分比显示区域

<div id="{{ c.chart_id }}" class="chart-container" style="width:95%; height:95%; margin:auto; top:30px"></div>
添加自适应刷新函数 
<script>   
     //窗口大小变化时候，进行刷新页面操作，防止样式混乱
         var x=window.innerWidth;
     function resizeFresh(){
         if(x!=window.innerWidth)
             location.reload();
 </script>
修改后开始部分 
{%- 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 %}
    </script>
     <script>
         //窗口大小变化时候，进行刷新页面操作，防止样式混乱
             var x=window.innerWidth;
         function resizeFresh(){
             if(x!=window.innerWidth)
                 location.reload();
     </script>
{%- endmacro %}
2. 修改simple_chart.html
 获取宽度、高度 
<style type="text/css">
            html,body{
                height:100%;
                width:100%
        </style>
添加刷新函数调用 
<body onresize="resizeFresh()">
修改后文件如下 
{% import 'macro' as macro %}
<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>{{ chart.page_title }}</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=yes">
    {{ macro.render_chart_dependencies(chart) }}
    <style type="text/css">
            html,body{
                height:100%;
                width:100%
        </style>
</head>
<body onresize="resizeFresh()">
    {{ macro.render_chart_content(chart) }}
</body>
</html>
大概看下效果，缩小网页窗口显示区会随比例缩小
  
具体代码修改参考资源文件
 注： pyecharts版本1.7.1，后期版本可能会优化该问题
                                    pyecharts自适应屏幕居中显示pyecharts自适应屏幕居中显示解决方法参考
pyecharts自适应屏幕居中显示
pyecharts生成的html默认是靠左上显示的，使用的pyecharts版本是1.9.0。
期望图像是居中显示！
画图代码如下
c = (
    Graph()
    .add("Measure", nodes, links, categories, repulsion=4000, gravity=0.1)
    .set_global_opts(title_opts=opt
当pyecharts生成多图片在HTML中，希望其跟随屏幕大小显示，以适应不同尺寸屏幕。提高用户体验。
避免由于排版问题，造成视觉影响。
为此我们主要通过修改pyecharts render配置文件macro/simple_chart.html即可完成显示效果。
                                    以前没用过图表，现在正在做后台系统，全是图表，然而我一直以为Echarts图表是自带自适应的，但是今天才发现，自适应是在刷新以后才会更新。然后就开始各种改，改来改去，改了四个小时，啥也不是！原文链接：https://blog.csdn.net/weixin_43771172/article/details/84664532。注意：其它啥也不用改！就在显示图表的作用域内直接写以上代码就完全Ok!现在我来告诉以后可能会入坑的朋友！
                                    今天接触了python中的一个新的模块——pyechars，它的功能是制作html格式的图表文件，非常好用，但是在使用的过程中，我发现图表的默认位置是左上角，刚开始看还没什么，但是看久了后感觉很不符合我的阅读习惯，于是我就想着怎么调整它为默认居中，在网上找到的方法如下：
#<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
#做成BI大屏的时候，要把HTML文件改成自适应屏幕，需要添加上面这个meta,并且所有涉及px的，都需要改成百分.