cesium3dtiles加载本地数据_深入echarts学习：加载跨域、异步、本地json数据的防坑录

1 说明&＃xff1a;

&＃61;&＃61;&＃61;&＃61;&＃61;

1.1 推荐指数&＃xff1a;★★★★

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

1.3 我曾介绍echarts的简单基本用法&＃xff1a;

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

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

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

掉坑过么&＃xff1f;看这篇你就透彻了。

2 模拟异步加载数据&＃xff1a;

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

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

2.2 代码&＃xff1a;ybecharts1.html

Echarts模拟异步3秒后加载

2.3 效果图&＃xff1a;

3 本地json加载&＃xff1a;

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

3.1 文件夹&＃xff1a;ybecharts2

3.2 文件夹ybecharts2&＃xff1a;下有三个文件&＃xff1a;

3.3 ybecharts2.html代码&＃xff1a;

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

3.4 ybecharts2.js代码&＃xff1a;

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

3.5 ybdata2.json代码&＃xff1a;

{"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 常规操作&＃xff0c;不显示加载本地json数据的图表

出问题了&＃xff0c;有坑&＃xff01;&＃xff01;

4 解决办法&＃xff1a;

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

4.1 修改浏览器属性&＃xff1a;

在网上输入&＃xff1a;

浏览器加载本地json

就有window操作系统的方法&＃xff0c;我不推荐。

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

4.2 用tomcat方法&＃xff1a;推荐

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

5 Tomcat&＃xff1a;

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

5.1 官网&＃xff1a;

http://tomcat.apache.org/

5.2 本机是linux操作系统&＃xff0c;window操作系统大同小异。

5.3 下载&＃xff1a;

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

apache-tomcat-9.0.37.tar.gz&＃xff0c;放在根目录下

5.4 解压&＃xff1a;

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

5.5 启动&＃xff1a;

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

5.6 打开测试页&＃xff1a;

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

6 用Tomcat解决加载本地json数据的方法&＃xff1a;

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

6.1 将文件夹&＃xff1a;ybecharts2(本文第3部分的文件夹和内容)复制到webapps下&＃xff0c;本机如下

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

6.2 我新建一个selfexample文件夹&＃xff0c;以免混淆。

6.3 启动方法&＃xff1a;

6.3.1 第一步&＃xff1a;

#打开终端&＃xff0c;输入./apache-tomcat-9.0.37/bin/startup.sh # 启动 Tomcat

6.3.2 第二步&＃xff1a;

因为&＃xff1a;本机html文件在该目录下

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

所以&＃xff1a;

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

6.4 操作和效果&＃xff1a;

&＃61;&＃61;&＃61;自己整理并分享出来&＃61;&＃61;&＃61;

喜欢的人&＃xff0c;请点赞、关注、转发、评论和收藏。