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. FB50 过帐码 没有定义

    FB50 提示"过帐码  没有定义" --ECC6.0&Logon730 转至事务码:OBX1 或找到->定义总账科目过账的过账吗 定义借记 40 贷方 50,保存即 ...

  2. 让你深夜emo的“网抑云”，是如何做产品设计的？

    网易云音乐作为国内首个以"歌单"为核心架构的音乐APP,有的人喜欢它的热评,有的人却觉得它的版权太少,虽然网易云音乐不是曲库最丰富的听歌软件,但绝对是听歌软件里情感体验最好的. 我 ...

  3. darkriscv笔记

    1 按照默认设置,前4K空间为ROM,后4K空间是RAM.为什么RAM需要初值,初值从哪儿来? 2 指令分类 LUI: AUTPC: JAL: JALR: BCC : BEQ/BGE /BGEU/BL ...

  4. fiddler抓包返回304

    为了验证部分场景需要对接口返回数据进行修改后验证前端代码逻辑处理,发现同一域名下其他接口都正常返回,但是某个端口返回304. 操作步骤是页面打开后接口已经请求了,这时候才打开fiddler抓取请求拦截 ...

  5. 记录aop失效问题

    例子:转账demo 使用技术:基于注解的方式实现,aop也是通过注解实现(Spring) 出现问题:aop已经写好,但是没有生效 原因:1.切入点是否正确(不是本问题) 2.基于注解方式实现,没有配置 ...

  6. monogo-shell

    创建集合 use person //创建数据库或进入数据库 db.createCollection(table_name) 主键 插入数据时会自动生成主键,保证每条数据唯一性 生成对象主键 > ...

  7. python菜鸟学习： 9. 文件操作

    # -*- coding: utf-8 -*-import sys, time# 读文件:一次性读取所有内容#r=readf = open("singe.txt", 'r', en ...

  8. 使用Wireshark完成实验1

    用来观察协议执行实体之间交换的报文的基本工具被称为分组嗅探器(packet sniffer),一个分组嗅探器被动地拷贝(嗅探)计算机发送和接受的报文,也能显示出这些被捕获报文的各个协议字段的内容.Wi ...

  9. C#访问MySQL（一）：连接查询删除（查删）

    前言: 通过C#连接访问MySQL:连接查询. 1.项目添加MySQL引用: 2.获取数据库一个满足条件的值: public static object GetSingle2(string SQLSt ...

  10. UGUI让自动布局下的子物体不接受布局（LayoutGroup）影响

    在子物体上添加Layout Element组件 看到这个组件上有个Ignore Layout,这个就是忽视布局,把它勾上就可以忽视父级对它的布局了. 转自:https://zhuanlan.zhihu ...