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;

             var y=window.innerHeight;

         function resizeFresh(){

             if(x!=window.innerWidth||y!=window.innerHeight)

                 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;

             var y=window.innerHeight;

         function resizeFresh(){

             if(x!=window.innerWidth||y!=window.innerHeight)

                 location.reload();

         }

     </script>
 {%- endmacro %}

2. 修改simple_chart.html
获取宽度、高度

height:100%;

width:100%
此两项为100%时会出现滚动条，小于100%滚动条消失
<style type="text/css">

            html,body{

                height:100%;

                width:100%

            }

        </style>

添加刷新函数调用

<body onresize="resizeFresh()">

修改后文件如下

{% import 'macro' as macro %}

<!DOCTYPE html>

<html>

<head>

    <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%；
　　　　　　　　　　overflow:hidden;
　　　　　　　　　　margin:auto
}

        </style>

</head>

<body onresize="resizeFresh()">

    {{ macro.render_chart_content(chart) }}

</body>

</html>

Python数据可视化，自适应浏览器的更多相关文章

  1. python --数据可视化（一）

    python --数据可视化 一.python -- pyecharts库的使用 pyecharts--> 生成Echarts图标的类库 1.安装: pip install pyecharts ...

  2. 【python可视化系列】python数据可视化利器--pyecharts

    学可视化就跟学弹吉他一样,刚开始你会觉得自己弹出来的是噪音,也就有了在使用python可视化的时候,总说,我擦,为啥别人画的图那么溜: [python可视化系列]python数据可视化利器--pyec ...

  3. Python数据可视化基础讲解

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:爱数据学习社 首先,要知道我们用哪些库来画图? matplotlib ...

  4. python数据可视化-matplotlib入门(7)-从网络加载数据及数据可视化的小总结

    除了从文件加载数据,另一个数据源是互联网,互联网每天产生各种不同的数据,可以用各种各样的方式从互联网加载数据. 一.了解 Web API Web 应用编程接口(API)自动请求网站的特定信息,再对这些 ...

  5. Python数据可视化编程实战——导入数据

    1.从csv文件导入数据 原理:with语句打开文件并绑定到对象f.不必担心在操作完资源后去关闭数据文件,with的上下文管理器会帮助处理.然后,csv.reader()方法返回reader对象,通过 ...

  6. Python数据可视化——使用Matplotlib创建散点图

    Python数据可视化——使用Matplotlib创建散点图 2017-12-27 作者:淡水化合物 Matplotlib简述: Matplotlib是一个用于创建出高质量图表的桌面绘图包(主要是2D ...

  7. Python数据可视化-seaborn库之countplot

    在Python数据可视化中,seaborn较好的提供了图形的一些可视化功效. seaborn官方文档见链接:http://seaborn.pydata.org/api.html countplot是s ...

  8. Python数据可视化编程实战pdf

    Python数据可视化编程实战(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1vAvKwCry4P4QeofW-RqZ_A 提取码:9pcd 复制这段内容后打开百度 ...

  9. 【数据科学】Python数据可视化概述

    注:很早之前就打算专门写一篇与Python数据可视化相关的博客,对一些基本概念和常用技巧做一个小结.今天终于有时间来完成这个计划了! 0. Python中常用的可视化工具 Python在数据科学中的地 ...

  10. Python数据可视化的四种简易方法

    摘要: 本文讲述了热图.二维密度图.蜘蛛图.树形图这四种Python数据可视化方法. 数据可视化是任何数据科学或机器学习项目的一个重要组成部分.人们常常会从探索数据分析(EDA)开始,来深入了解数据, ...

随机推荐

  1. C# snaps

    C# 启用 禁用 本地连接 1 static void Enable(string interfaceName) 2 { 3 System.Diagnostics.ProcessStartInfo p ...

  2. JAI 多图片合成TIF格式

    因为项目需要,所以要做这么个工具类,发现了一些问题,接下来一一说明. 需要引入jai-codec-1.1.3.jar跟jai_code-1.1.3.jar. 1.判断图片格式: JPEG (jpg), ...

  3. 【C++复习】第九章 模板与群体数据（2）

    学习重点:容器类型内部的实现机制,顺便复习前面各章内容.容器类型的具体实现不需要特别关注(目前不需要会裸手写这么一个容器类型) 1.群体/线性群体 群体的概念 群体是指由多个数据元素组成的集合体.群体 ...

  4. python实现自动打卡

    自己也百度了一下,然后写的,分为了三个部分,见三段代码 代码:主程序代码 import timefrom selenium import webdriverfrom private_info impo ...

  5. 全网echarts案例资源大总结和echarts的高效使用技巧（细节版）

    全网echarts案例资源大总结和echarts的高效使用技巧(细节版) 众所周知,在现今的开发大环境下,数据可视化(大屏化)项目在前端开发中的比重越来越大.而其中使用率最高的插件无疑就是 Apach ...

  6. Docker-Compose实战<上篇>

    1 什么是 docker-compose? Compose 是用于定义和运行多容器 Docker 应用程序的工具.通过 Compose,您可以使用 YML 文件来配置应用程序需要的所有服务.然后,使用 ...

  7. 小米手机MIUI12获取hci.log的方法记录

    按照之前的方式,开发者选项打开获取蓝牙HCI的log开关,但是在本地一直找不到log. 在网上查了很久资料,终于找到有用的方法了.记录一下. 感谢大佬 https://www.jianshu.com/ ...

  8. 苹果Macbook快捷键使用大全

    苹果电脑Macbook快捷键如何使用?很多小伙伴经常询问小编有关于苹果电脑的相关问题,其实很多快捷键都可以提高生产力,那么接下来一起看看苹果Macbook快捷键使用大全! 苹果电脑Macbook快捷键 ...

  9. MySQL 【CAST】函数，类型转换使用

    Cast(字段名 as 转换的类型 ),其中类型可以为: 1.CHAR[(N)] 字符型 2.DATE 日期型3.DATETIME 日期和时间型4.DECIMAL float型5.SIGNED int ...

  10. mysql的日期输出格式列出来

    mysql的日期输出格式列出来: %a 缩写星期名 %b 缩写月名 %c 月,数值 %D 带有英文前缀的月中的天 %d 月的天,数值(00-31) %e 月的天,数值(0-31) %f 微秒 %H 小 ...