pyecharts指定从本地加载js路径修改默认远程优先拉取

因项目为纯flask开发,用flask-admin作后台管理,其中涉及到报表模块,故使用了百度echarts的python实现,即pyecharts模块

这个模块非常好用,感谢开发及维护人员!

根据网站资源引用说明:pyecharts 使用的所有静态资源文件存放于 pyecharts-assets 项目中,默认挂载在 https://assets.pyecharts.org/assets/

所以pyecharts图表默认会从该网站拉取js静态文件,我的项目为局域网内项目,当然不希望在远端拉取,而是放在本地。

于是我丢在项目的’static/js’文件夹下,并主动在模板页中加载
在这里插入图片描述

<script src="/static/echarts.min.js"></script>

然后我们在程序中加载图表:

from pyecharts.charts import Bar, Page, Tree, Grid

class DashboardView(AdminBaseView):
    """
    数据展示视图类
    """
	@expose('/', methods=['GET', 'POST'])
    def index(self):
        page = Page()
        ...
	
		return self.render('dashboard.html',chart=page.render_embed())

虽然最终是可以展示图表,但是他是在远程拉取无果之后从本地读取的js显示的,导致浏览器一直有报错,而且加载速度变慢(因为默认优先从远程引用资源),如下图所示,严重拉长了加载时间,远程拉取echarts.min.js失败最终返回403后到浏览器上才又重新加载了一次echarts.min.js:
在这里插入图片描述
OK,我们要着手解决
看网站的介绍,pyecharts 提供了更改全局 HOST 的快捷方式,大体如下:

# 只需要在顶部声明 CurrentConfig.ONLINE_HOST 即可
from pyecharts.globals import CurrentConfig
CurrentConfig.ONLINE_HOST = "http://127.0.0.1:8000/assets/"

# 接下来所有图形的静态资源文件都会来自刚启动的服务器
from pyecharts.charts import Bar
bar = Bar()

实际上我多次尝试,发现一直无效,无法加载到这个全局变量,每次都依然是从远程引用

所以我就查看了图表的源码,从Page组合图表着手,看到Page的初始化函数中:

class Page:
   """
   `Page` A container object to present multiple charts vertically in a single page
   """

   def __init__(
       self,
       page_title: str = "Awesome-pyecharts",
       js_host: str = CurrentConfig.ONLINE_HOST,
       interval: int = 1,
   ):
       self.page_title = page_title
       self.page_interval = interval
       self.js_dependencies = utils.OrderedSet()
       self.js_host = js_host
       self._charts = []

其中有一个self.js_host,这是js加载的地址,ok,我们继承这个类,重载这个值

from pyecharts.charts import Bar, Page, Tree, Grid

class PageBase(Page):
    """
    继承Page组合图表基类,以重新设置JS加载路径,前端模板可不用手动载入js文件
    """
    def __init__(self, **kwargs):
        super(PageBase, self).__init__(**kwargs)
        self.js_host = '/static/js/'

class DashboardView(AdminBaseView):
    """
    数据展示视图类
    """
    @expose('/', methods=['GET', 'POST'])
    def index(self):
        page = PageBase()
        ...
        
        return self.render('dashboard.html',chart=page.render_embed())

如此就解决啦,直接指定了js的地址,也不需要在前端模板中手动载入js

开源的东西还是要多翻翻源码哈,mark.

  • 8
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值