1 说明：

=====

1.1 推荐指数：★★★★

1.2 网上这方面说明，大多模棱两可，坑很多，讲透彻的不多，故本人做一个小结。

1.3 我曾介绍echarts的简单基本用法：

《Echarts：是一个百度的开源的、强大的、傻瓜式数据可视化js库》

1.4 今日深入介绍如何加载本地json数据，因为可能如果数据较多或者较大时，比较适合json文件格式。

1.5 本文属于html和服务器的基本知识，暂时不属于python，部分条友暂时可以了解，只是回应一个条友的问题。

掉坑过么？看这篇你就透彻了。

2 模拟异步加载数据：

================

2.1 在线引用2个js文件，注意为了便于阅读，尤其是手机阅读，代码尽量向左对齐。

2.2 代码：ybecharts1.html

Echarts模拟异步3秒后加载

2.3 效果图：

3 本地json加载：

============

3.1 文件夹：ybecharts2

3.2 文件夹ybecharts2：下有三个文件：

3.3 ybecharts2.html代码：

    echarts异步加载本地json数据并显示图

3.4 ybecharts2.js代码：

jQuery(document).ready(function($) { var myChart = echarts.init(document.getElementById('main')); var  option = {    title : {//标题        text: 'Html学院男女数据统计',        subtext: '2020年'    },    tooltip : {        trigger: 'axis'    },    legend: {//图例：2组：男女        data:['男','女']    },    toolbox: {//工具框        show : true,        feature : {            mark : {show: true},            dataView : {show: true, readOnly: false},            magicType : {show: true, type: ['line', 'bar']},            restore : {show: true},            saveAsImage : {show: true}        }    },    calculable : true,    xAxis : [//x轴        {            type : 'category',            data : []//对应院系数据        }    ],    yAxis : [//y轴        {            type : 'value'        }    ],    series : [        {            name:'女',            type:'bar',            data:[],//对应下面数据中的女数据             itemStyle: {                normal: {                    label : {                        show: true, position: 'top'                    }                }            }         },        {            name:'男',            type:'bar',            data:[],//对应下面男数据             itemStyle: {                normal: {                    label : {                        show: true, position: 'top'                    }                }            }         }    ]}; //设置图表myChart.setOption(option);//获取和处理数据，加载本地json，异步和跨域$.getJSON("ybdata2.json",function(json){    var d=json.data;    var nanlist = [];//男    var nvlist = [];//女    var deplist=[];//院系名称// 循环获取男生数量，女生数量及院系名称for(var i=0;i

3.5 ybdata2.json代码：

{"data":    [    {"sex":"男","value":45,"depname":"Html学院"},    {"sex":"女","value":78,"depname":"Html学院"},    {"sex":"女","value":123,"depname":"JavaScript学院"},    {"sex":"男","value":13,"depname":"JavaScript学院"},    {"sex":"男","value":25,"depname":"Css语学院"},    {"sex":"女","value":65,"depname":"Css语学院"}    ]}

3.6 常规操作，不显示加载本地json数据的图表

出问题了，有坑！！

4 解决办法：

========

4.1 修改浏览器属性：

在网上输入：

浏览器加载本地json

就有window操作系统的方法，我不推荐。

可能会有泄露用户数据的危险。

4.2 用tomcat方法：推荐

在本地搭建一个web服务器，来解决跨域、异步、加载本地json数据问题。

5 Tomcat：

=======

5.1 官网：

http://tomcat.apache.org/

5.2 本机是linux操作系统，window操作系统大同小异。

5.3 下载：

https://tomcat.apache.org/download-90.cgi

apache-tomcat-9.0.37.tar.gz，放在根目录下

5.4 解压：

tar -zxf apache-tomcat-9.0.37.tar.gz  #解压

5.5 启动：

./apache-tomcat-9.0.37/bin/startup.sh # 启动 Tomcat

5.6 打开测试页：

启动后，访问 http://localhost:8080 ，可以看到 Tomcat 安装成功的测试页面。

6 用Tomcat解决加载本地json数据的方法：

===============================

6.1 将文件夹：ybecharts2(本文第3部分的文件夹和内容)复制到webapps下，本机如下

file:///home/xgj/apache-tomcat-9.0.37/webapps。

6.2 我新建一个selfexample文件夹，以免混淆。

6.3 启动方法：

6.3.1 第一步：

#打开终端，输入./apache-tomcat-9.0.37/bin/startup.sh # 启动 Tomcat

6.3.2 第二步：

因为：本机html文件在该目录下

/home/xgj/apache-tomcat-9.0.37/webapps/selfexample/ybecharts2/ybecharts2.html

所以：

#复制下面链接，在浏览器中打开，即可http://localhost:8080/selfexample/ybecharts2/ybecharts2.html

6.4 操作和效果：

===自己整理并分享出来===

喜欢的人，请点赞、关注、转发、评论和收藏。