解决离线状态下使用PyEcharts进行数据可视化绘图时，pyecharts-gallery示例库中的所有html网页打不开、不出图的问题

46 阅读 0 评论 31 点赞

我是靠谱客的博主贪玩小刺猬，最近开发中收集的这篇文章主要介绍解决离线状态下使用PyEcharts进行数据可视化绘图时，pyecharts-gallery示例库中的所有html网页打不开、不出图的问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前面在讲述我配置离线的Python数据分析和数据可视化环境虚拟机的时候，遇到了离线状态下使用PyEcharts进行数据可视化绘图时，html网页打不开、不出图的问题，经过两天的查找，发现主要原因（对，还有次要原因哈）是由于PyEcharts在升级到1.x版本后，将原来HTML网页中使用到的很多js文件换为了在线获取的方式，例如打开pyecharts-gallery-masterBar文件夹里面的bar_base.html，就会发现利用了https://assets.pyecharts.org/assets/echarts.min.js文件，所以才会出现离线环境下打不开网页不出图的情况：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="bfb8150f841b4ea486de8e3047d62ffc" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_bfb8150f841b4ea486de8e3047d62ffc = echarts.init(
            document.getElementById('bfb8150f841b4ea486de8e3047d62ffc'), 'white', {renderer: 'canvas'});
        var option_bfb8150f841b4ea486de8e3047d62ffc = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",

知道了原因以后，下面就来看一下如何解决！其实在pyecharts-gallery-master官网上面已经给出了解决的方案：主要是2步：一是下载离线的js文件，也就是pyecharts-assets-master.zip文件，然后将其放到本地的某个文件夹里面；二是启动本地服务端，将解压后的pyecharts-assets-maste文件夹设为服务地址；三是修改绘图的py源文件，添加使用本地js地址的语句，具体操作如下：

一、下载pyecharts-assets-master.zip文件：https://github.com/pyecharts，这里面包含了大多数示例中所用到的js文件：

二、启动本地服务端，具体的方法官网里面也都讲了：https://github.com/pyecharts/pyecharts-assets

$ cd pyecharts-assets
$ python -m http.server

上面是Linux中的写法，实际上在window环境下就是进入到pyecharts-assets文件夹里面后，按住shift键点击鼠标右键，打开控制台，运行

python -m http.server一句话即可，该命令将会在本地启动一个默认网址为0.0.0.0，默认端口为8000的广播服务器，从而可以开启js文件的服务；

其实，也不一定每次都非要进入到pyecharts-assets文件夹里面启动控制台然后运行启动服务器的命令，还可以利用-d选项设置目录，如下所示：

python -m http.server #在当前文件夹目录下默认启动地址为0.0.0.0，端口为8000的服务器
python -m http.server -d C:Userssuperpyecharts-assets-master #指定一个自定义的本地目录
python -m http.server -d C:Userssuperpyecharts-assets-master -b 127.0.0.1 8000 #指定自定义的本地目录，指定自定义的网址和端口

我就是利用第二句即可，这样不用每次都费力的进入到本地的pyecharts-assets文件夹里面了！

实际上也不一定非要0.0.0.0的网址，也可以选择127.0.0.1的本地回路地址，还有就是局域网里面的话，可以指定为局域网服务器的网址；

最后就是在python源文件中添加下面的两句，例如对于pyecharts-gallery-masterBar中的bar_base.py文件，就是在最前面添加：

#LocalhostConfig
# 配置CurrentConfig.ONLINE_HOST为本机地址资源
from pyecharts.globals import CurrentConfig
CurrentConfig.ONLINE_HOST = "http://127.0.0.1:8000/assets/"

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.faker import Faker


c = (
    Bar()
    .add_xaxis(Faker.choose())
    .add_yaxis("商家A", Faker.values())
    .add_yaxis("商家B", Faker.values())
    .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
    .render("bar_base.html")
)

这样在编译后，生成的HTML文件就会使用本机的js文件网址了：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="http://127.0.0.1:8000/assets/echarts.min.js"></script>

</head>
<body>
    <div id="9732f9fa310740bbb5c7dafaeba7ee90" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_9732f9fa310740bbb5c7dafaeba7ee90 = echarts.init(
            document.getElementById('9732f9fa310740bbb5c7dafaeba7ee90'), 'white', {renderer: 'canvas'});
        var option_9732f9fa310740bbb5c7dafaeba7ee90 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",

这样就可以在离线环境下显示出图像了！

最后需要说明的是，如果不是想生成HTML网页，而是想在Jupyter Notebook中直接显示Echarts图像，就需要把上面的py源程序改为：

#LocalhostConfig
# 配置CurrentConfig.ONLINE_HOST为本机地址资源
from pyecharts.globals import CurrentConfig
CurrentConfig.ONLINE_HOST = "http://127.0.0.1:8000/assets/"

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.faker import Faker


c = (
    Bar()
    .add_xaxis(Faker.choose())
    .add_yaxis("商家A", Faker.values())
    .add_yaxis("商家B", Faker.values())
    .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
)
c.render_notebook()
#c.render("bar_base.html")

也就是需要在最后显示的调用一句：c.render_notebook()，不然，如果还是放在链式那个括号里面，例如下面的样子，有的时候还是不会出图的。。。

#LocalhostConfig
# 配置CurrentConfig.ONLINE_HOST为本机地址资源
from pyecharts.globals import CurrentConfig
CurrentConfig.ONLINE_HOST = "http://127.0.0.1:8000/assets/"

from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.faker import Faker


c = (
    Bar()
    .add_xaxis(Faker.choose())
    .add_yaxis("商家A", Faker.values())
    .add_yaxis("商家B", Faker.values())
    .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
    .render_notebook()
)

最后再预告一下下一篇：https://github.com/pyecharts/pyecharts-gallery中给出的可视化绘图的例子那么多——

显然依次去为每个*.py源程序都添加from pyecharts.globals import CurrentConfig
CurrentConfig.ONLINE_HOST = "http://127.0.0.1:8000/assets/"命令从而再生成利用本地js资源的HTML网页无疑太过繁琐，如何一键就生成全部的本地HTML网页呢？请见下回分解！