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. 动态修改网页的 icon 和 title

    在public的index.html中使用 link 和 title 占位(内容随意,获取到数据之后此处的内容会被覆盖) 在App.vue中调用接口获取数据,找到 link 和 title 元素,将获 ...

  2. PHP统计在线用户数量

    一段经典的php统计在线用户数量的代码,一起学习分享. <?php /**  * Created by PhpStorm.  * User: jifei  * Date: 15/11/24  * ...

  3. linux查看指定时间段日志

    1.查看时间段日志:sed -n '/起始时间/,/结束时间/p' 日志文件 sed -n '/2021-05-21 10:08/,/2021-05-21 10:09/p' nohup.out2.指定 ...

  4. std::string实现split和trim方法

    void split(const std::string& str, const std::string& strDelimiter, std::vector<std::stri ...

  5. java中的批量导入，批量更新数据

    批量插入 数据,提高效率 Dao层 int insertBatch(List<HealthImport> list); xml文件 <insert id="insertBa ...

  6. iOS 扩展与分类的区别

    1.分类 category 分类的作用就是在不修改原有类的基础上,为一个类扩展方法,最主要的是可以给系统类扩展我们自己定义的方法 分类也能使用@property 添加属性 [通过runtime 关联对 ...

  7. Python打包时包含静态文件处理方法

    Python打包时包含静态文件处理方法 使用场景 已搭建了PyPI私有库,上传公共库包含静态文件,如需要使用sql静态文件初始化数据库. 打包python包,给其他人使用,但项目中包含静态文件,如ht ...

  8. vue.js----之框架搭建（一）

    首先你要有node,没有的去官网安装一下就好了 好了开始搭建骨架 第一步安装vue-cli npm install -g vue-cli 创建vue项目 语法:这里我选择使用webpack来创建 vu ...

  9. Kubernetes--案例：使用Ingress发布tomcat

    假设有这样一套环境: Kubernetes集群上的tomcat-deploy控制器生成了两个运行于Pod资源中的tomcat实例,tomcat-svc是将它们统一暴露于集群中的访问入口.现在需要通过I ...

  10. grpc start with python

    pip install grpcio grpcio-tools syntax = "proto3"; service FutureData { rpc GetTick(ReqTic ...