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. base64 转图片

    data:image+jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcg% ...

  2. HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET

    https://www.runoob.com/tags/html-reference.html 在线版,从基础的 HTML 到 CSS,乃至进阶的 XML.SQL.JS.PHP 和 ASP.NET. ...

  3. git 初始化新的文件夹

    1.  tar xvf new_project.tar.gz 2. cd  new_project 3. git config --global user.email "user.name@ ...

  4. vector 搜罗最强版

    vector 常见用法(以int类型为例) https://www.cnblogs.com/YJthua-china/p/6550960.html 概括描述总体vector,包括内存的探讨 https ...

  5. Asp.Net Core中使用日志组件log4net

    我们在开发任何项目过程中,记录各种日志是太正常不过的事情.没有日志记录的项目,也不可能放心进入生产环境运行.因此日志的记录,是必须要做的. 在.NET开发中,log4net是个常用的日志组件.本文简单 ...

  6. ESP-Example ble-ancs解析

    苹果通知中心服务(ANCS)的目的是让蓝牙配件(通过蓝牙低能耗链接连接到iOS设备)以简单方便的方式访问iOS设备上产生的各种通知. Apple通知中心服务是主服务,其UUID为7905F431-B5 ...

  7. 2.TS 的数据类型

    一.定义变量 TS 中创建变量有四个要素: 定义变量的关键字:var.let.const 变量名 变量的数据类型 变量的初始值 语法结构如下: let 变量名: 数据类型 = 初始值 注意,变量的初始 ...

  8. vagrant用密码连接ssh

    1通过 ssh address连接 1:进去linux 2:修改配置文件信息 vi /etc/ssh/sshd_config 修改 passwordAuthentication no 改为 passw ...

  9. python爬虫代码中_获取状态码

    '两种方式' import urllib status=urllib.urlopen("//www.jb51.net").code print status import requ ...

  10. 转载--文章（感谢陈晨博主分享） 关于 Json.net

    本文出自地址: http://www.cnblogs.com/freshman0216/p/4161800.html#undefined Newtonsoft.Json,一款.NET中开源的Json序 ...