本文以
当网络出问题时，在线的图表就无法显示，因此最好是将图表代码预先下载到本地，并在本地显示图表。
当图表引用了外部网络资源（脚本、数据等）的话，最好全部下载到本地，以防止链接失效。
- 普通图表的话可以直接复制粘贴代码。
- 如果图表中引用了外部数据的话，就需要使用前端框架（推荐使用flask）来完成。
本文以EChatrts官方示例为例，介绍下两种图表如何下载及本地显示。
1.普通图表：
以极坐标双数值轴图表为例，介绍下普通图表如下下载及本地显示。
此时直接在页面下方点击下载示例即可，得到名为line-polar.html的html文件，直接在浏览器中打开即可。
如果直接下载后无法打开，可能需要将<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/echarts.min.js"></script>中的{{version}}修改为5。
2.引用了外部网络资源的图表：
以悲惨世界人物关系图为例，介绍引用了外部网络资源的图表下载方法。
- 第一步：下载图表文件到本地：
点击下载示例直接下载，可以得到名为graph.html的html文件，将其在浏览器中打开，可以看到页面一直在loading，打开浏览器控制台console页面，可以看到显示Uncaught ReferenceError: $ is not defined，这是因为$为jQuery中的符号，因为我们没有引入jQuery脚本，因此会报错。
- 第二步：引入
jquery.min.js文件：
在EChatrts图表页面，打开浏览器控制台Network页面，然后点击刷新，可以看到页面加载了很多内容，其中jquery.min.js文件就是图表引用的jQuery文件。
点击右键将其保存在与graph.html文件同目录下的JS文件夹下。
然后在代码<script type="text/javascript" src="js/jquery.min.js"></script>中将其引入即可。
此时浏览器控制台console页面可以看到之前的报错已经没有了，取而代之的是graph.html:42 Uncaught ReferenceError: ROOT_PATH is not defined。这是因为在使用jQuery读取les-miserables.json文件时出了问题，这是因为在读取数据时为了安全，而不会显示文件的实际路径。
- 第三步：下载并导入json数据：
在EChatrts图表页面，打开浏览器控制台Network页面，然后点击刷新，可以看到页面加载了很多内容，其中les-miserables.json文件就是图表引用的json数据文件。
将其保存在与graph.html文件同目录下的data文件夹下。
然后在代码将json数据文件路径ROOT_PATH + '/data/asset/data/les-miserables.json'修改为'data/les-miserables.json'即可。
此时浏览器控制台console页面可以看到之前的报错已经没有了，取而代之的是Access to XMLHttpRequest......，这是因为浏览器安全限制原因，而无法读取本地文件。
- 第四步：使用前端框架flask创建模拟网页服务器环境：
为了解决Access to XMLHttpRequest......问题就需要使用前端框架，本文以flask框架（如未安装，需要使用pip install flask来安装）为例。
首先使用如下代码并将其保存为run.py文件。该代码的作用是使用flask框架创建一个模拟的网页服务器环境。
from flask import Flask,render_template
app = Flask(__name__,
static_folder = '',
template_folder = '')
@app.route('/')
def hello_world():
return render_template('graph.html')# graph.html为下载的EChatrts图表文件名称，可以根据需要修改
if __name__ == '__main__':
from werkzeug.serving import run_simple
run_simple('127.0.0.1', 8080, app)在cmd中切换到目录下，然后运行run.py文件，可以看到提示Running on http://127.0.0.1:8080/。
此时，在浏览器中输入http://127.0.0.1:8080/，可以看到图表已经能正常在本地显示。
