首页 > 其他分享 >离线使用Pyecharts制作可视化图表——方法1:启动本地 js 服务

离线使用Pyecharts制作可视化图表——方法1:启动本地 js 服务

时间:2024-04-17 16:59:02浏览次数:30  
标签:文件 Pyecharts assets 离线 http js 本地 pyecharts

在离线使用 Pyechart 进行可视化数据绘图的时候,会有生成的 html 网页打不开,或者是网页不出图像,是一个空白页面的问题出现,搜索发现其主要原因是:由于PyEcharts在升级到1.x版本后,将原来HTML网页中使用到的很多js文件换为了在线获取的方式,例如打开我本地生成的bar.html 示例文件,就会发现利用了 https://assets.pyecharts.org/assets/v5/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/v5/echarts.min.js"></script>

</head>

需要解决这个问题,在pyecharts-gallery-master官网上面已经给出了解决的方案:
一 是下载离线的js文件,也就是pyecharts-assets-master.zip文件,然后将其放到本地的某个文件夹里面;
二 是启动本地服务端,将解压后的pyecharts-assets-maste文件夹设为服务地址;
三 是修改绘图的py源文件,添加使用本地js地址的语句


一、下载离线的 js 文件
GitHub 下载地址:https://github.com/pyecharts/pyecharts-assets
将这个地方的文件下载成为一个 zip 文件,保存至本地的一个指定路径。这个里面包含了大多数示例中所用到的 js 文件。
image

二、启动本地服务端
其实在github官网上也已经讲述了这些内容:https://github.com/pyecharts/pyecharts-assets
Linux 环境命令:

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

windows 环境:
实际上在window环境下就是进入到pyecharts-assets文件夹里面后,按住shift键点击鼠标右键,打开控制台,运行 python -m http.server 一句话即可,该命令将会在本地启动一个默认网址为0.0.0.0,默认端口为8000的广播服务器,从而可以开启js文件的服务;其实,也不一定每次都非要进入到pyecharts-assets文件夹里面启动控制台然后运行启动服务器的命令,还可以利用-d选项设置目录:

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

实际上也不一定非要0.0.0.0的网址,也可以选择127.0.0.1的本地回路地址,还有就是局域网里面的话,可以指定为局域网服务器的网址。个人的话,是使用了第三个方法,指定了源文件地址和IP地址去启动本地服务。
*Tips:在启动 http.server 的服务之后,不要 ctrl+c 取消,就让这个服务一直挂在这个窗口就行,如果 ctrl+C 取消了服务挂载,在打开 html 文件的时候,还是会显示为空白的 *
image

三、补充代码
在 Python 的代码源文件中添加如下代码,将 html 文件所需要的 js 文件指向本机的 js 文件地址:

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

在生成的 html 文件中所调用的 js 文件地址就是本地的 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/v5/echarts.min.js"></script>

</head>

这样之后,在确认本地的 http.server 服务是正常启动中的情况下,生成的可视化图表是可以正常显示的。

仅做个人学习记录。

原文链接:https://blog.csdn.net/u013600870/article/details/112056745

标签:文件,Pyecharts,assets,离线,http,js,本地,pyecharts
From: https://www.cnblogs.com/JiurenShang/p/18140890

相关文章

  • autojs 坚果云上传文件跟下载
    例子:点击查看代码/**坚果云*/letJgy=JianGuoYunHelper();//初始化Jgy.init("username","password","坚果云测试_数据备份");//文件名Jgy.setThisFileName("测试文件");//上传数据(覆盖)letputRes=Jgy.put("测试数据测试数据测试数据");//获取数......
  • HarmonyOS 项目 module.json5默认配置属性及描述
    module.json5entry>src>main>module.json5是模块的配置文件,包含当前模块的配置信息。 其中module对应的是模块的配置信息,一个模块对应一个打包后的hap包,hap包全称是HarmonyOSAbilityPackage,其中包含了ability、第三方库、资源和配置文件。其具体属性及其描述可以参照下表1。......
  • js 搜索查找算法
    线性查找线性查找是最简单的一种查找算法,它的基本思想是从头到尾遍历待查找的数据集,找到对应的元素,时间复杂度为O(n)。代码实现:functionlinearSearch(arr,target){for(leti=0;i<arr.length;i++){if(arr[i]===target){returni;......
  • js带注释的冒泡排序算法
    一、简述冒泡排序(BubbleSort)是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果二者的顺序(如从大到小、首字母从A到Z)错误就交换。走访元素的工作是重复地进行直到没有相邻元素需要交换,也就是说该元素列已经排序完成。这个算法......
  • JS 移除对象数组中,属性值全为空的项
    constarray=[{id:1,name:'John',age:25},{id:2,name:'Alice',age:null},{id:3,name:'Bob',age:undefined},{id:4,name:'Eve',age:''},{id:5,name:'',age:......
  • vue dayjs 安装指定版本
    在Vue项目中安装指定版本的Day.js库,你可以使用npm或者yarn。以下是安装指定版本Day.js的步骤:打开终端(命令行)。转到你的Vue项目目录。执行以下命令,其中x.x.x替换为你想要安装的Day.js版本号。使用npm安装指定版本的Day.js:[email protected] 或者使用......
  • mybatilsplus属性为json类型的坑
    最近做的一个项目由于需要把json类型字段在springboot+mybatisplus的框架中。实体类上的jsonobject死活存不进数据库,总结出一下经验1.实体类上:@TableName(value="mix_target",autoResultMap=true)2.自定义Hander:自定义实现AbstractJsonTypeHandler(mybatilsplus里面带了......
  • 30 天精通 RxJS (22):Subject 基本观念
    终于进到了RxJS的第二个重点Subject,不知道读者们有没有发现?我们在这篇文章之前的范例,每个observable都只订阅了一次,而实际上observable是可以多次订阅的Multiplesubscriptionsvarsource=Rx.Observable.interval(1000).take(3)varobserverA={ next:(value......
  • 30 天精通 RxJS (21):深入 Observable
    我们已经把绝大部分的operators都介绍完了,但一直没有机会好好的解释Observable的operators运行方式。在系列文章的一开头是以数组(Array)的operators(map,filter,concatAll)作为切入点,让读者们在学习observable时会更容易接受跟理解,但实际上observable的oper......
  • package.json
     Node项目在项目根目录中名为 package.json 的文件中跟踪依赖关系和元数据。这是你项目的核心。它包含名称、描述和版本之类的信息,以及运行、开发以及有选择地将项目发布到 npm 所需的信息。在本教程中,我们将:了解 package.json 与项目之间的关系确定重要字段和......