When generating charts with pyecharts, the rendered HTML files reference external JavaScript resources via CDN URLs. While this works seamlessly in online environments, offline scenarios result in blank charts due to failed resource loading.
The HTML output typically contains references like:
<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>
Before implementing offline solutions, download the required static assets from the official repository. The essential files reside in the assets/v5 directory. Place the assets folder in your project root.
Method 1: Local HTTP Server
Configure pyecharts to reference a locally hosted file server.
from pyecharts.globals import CurrentConfig
CurrentConfig.ONLINE_HOST = "http://localhost:8000/assets/v5/"
Start the HTTP server in your project directory:
# Terminal command
python -m http.server
Alternatively, integrate the server into your script:
import threading
import http.server
import socketserver
from pathlib import Path
def launch_server():
directory = Path.cwd()
handler = http.server.SimpleHTTPRequestHandler
handler.directory = str(directory)
with socketserver.TCPServer(("", 8000), handler) as httpd:
httpd.serve_forever()
server_thread = threading.Thread(target=launch_server, daemon=True)
server_thread.start()
Draw the chart:
import random
from pyecharts.charts import Line
from pyecharts import options as opts
chart = Line()
x_values = list(range(1, 11))
y_values = [random.uniform(0, val) for val in x_values]
chart.add_xaxis(x_values)
chart.add_yaxis("Data Series", y_values)
chart.render("chart_output.html")
Limitation: The generated HTML depends on the local server and cannot be shared independently.
Method 2: Direct File Path Reference
Point the host configuration directly to the local filesystem:
from pyecharts.globals import CurrentConfig
from pathlib import Path
CurrentConfig.ONLINE_HOST = str(Path.cwd()) + "/assets/v5/"
Limitation: Similar to Method 1, the HTML file remains dependent on local resources.
Method 3: Embedding JavaScript with Library Modification
Enable the is_embed_js option to inline JavaScript content:
from pyecharts.charts import Line
from pyecharts import options as opts
chart = Line(render_opts=opts.RenderOpts(is_embed_js=True))
This approach triggers an SSL error. Modify site-packages/pyecharts/render/display.py at line 77, replacing HTTPSConnection with HTTPConnection:
conn = http.client.HTTPConnection(host, port)
Advantage: Produces self-contained HTML files suitable for distribution.
Method 4: Monkey Patching for JavaScript Embedding
Avoid modifying library source code by applying monkey patching:
import os
import random
from pathlib import Path
from pyecharts import options as opts
from pyecharts.charts import Line
from pyecharts.render.display import Javascript
def patched_load_js(self):
assets_dir = Path.cwd() / "assets" / "v5"
for library_url in self.lib:
local_path = library_url.replace(
"https://assets.pyecharts.org/assets/v5/",
f"{assets_dir}/"
)
with open(local_path, "r", encoding="utf-8") as file:
self.javascript_contents[library_url] = file.read()
return self
Javascript.load_javascript_contents = patched_load_js
# Create chart
chart = Line(render_opts=opts.RenderOpts(is_embed_js=True))
x_data = list(range(1, 11))
y_data = [random.uniform(0, i * 10) for i in x_data]
chart.add_xaxis(x_data)
chart.add_yaxis("Sample Data", y_data)
chart.render("embedded_chart.html")
os.startfile("embedded_chart.html")
The resulting HTML contains the complete JavaScript source inline:
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script type="text/javascript">
/*
* Licensed to the Apache Software Foundation...
*/
This approach produces portable HTML files without requiring modifications to installed packages or maintaining external server dependencies.