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. android cannot generate view binders android.databinding.tool.util.LoggedErrorException

    错误: Cannot resolve type 'viewModel'错误: cannot generate view binders android.databinding.tool.util.Lo ...

  2. 摹客RP，编辑界面缩放比例支持手动输入！

    Hello,小伙伴们,又到了摹客的新功能播报时间. 本月更新,摹客RP编辑界面缩放比例支持手动输入,并对部分组件的默认样式及属性进行了优化:摹客DT率先上线了3款黄金比例图层,辅助设计师更高效绘图:针 ...

  3. linux 删除暂时无用内容

    查看磁盘使用情况[root@localhost games]# df -hFilesystem Size Used Avail Use% Mounted on/dev/mapper/VolGroup- ...

  4. 命令行编译、运行带包（package）的java源码

    首先安装好JDK,过程略. 准备一个源码Main.java,如下 1 package com.compiltetest; 2 3 public class Main { 4 5 public stat ...

  5. 【C++复习】第七章 类的继承（基类、派生类、虚基类）

    1.基类与派生类 类的继承:面向对象的程序设计中提供了类的继承机制,允许程序员在保持原有类特性的基础上,进行更具体.更详细的定义 用途:代码的重用性(继承)和可扩充性(派生) 例:植物大战僵尸游戏中, ...

  6. Mogdb / opengauss 用户密码错误，用户被锁

    # 问题概述xxx客户新上一套opengauss数据库,在测试中程序里用户的密码配置错误,导致用户被锁# 解决方案1.跟oracle 语法一样alter user xxx account unlock ...

  7. Android Studio打开现有的项目，Android自带的类、函数（方法）属性等爆红，含解决方式

    如上图,Android 自带的 setContentView 爆红,XML文件内 android:相关的属性(如android:layout_width) 爆红 原因: 使用Android Studi ...

  8. hutools密码算法库

    hutool密码算法库 一.开发背景 Hutool针对Bouncy Castle做了简化包装,用于实现国密算法中的SM2.SM3.SM4. 国密算法工具封装包括: 非对称加密和签名:SM2 摘要签名算 ...

  9. KVM虚拟机迁移至VMWare ESXi

    需求 由于服务器迁移,为维护方便,将统一使用vmware 平台管理虚拟机,因此需将kvm 虚拟机统一迁至vmware kvm 磁盘镜像转换 查看虚拟机 # virsh list --all Id Na ...

  10. ADOConnection调用连接窗口

    uses   AdoConEd; 使用函数 1.EditConnectionString(ADOConnection); 2.PromptDataSource