一. HTML代码如下：
参考网站（echarts-JSON请求数据）：https://blog.csdn.net/you23hai45/article/details/51585506
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts-JSON请求数据</title>
<script type="text/javascript" src="./jquery.min.js" ></script> //js文件和data.json都在同一文件夹
<script type="text/javascript" src="./echarts.min.js"></script>
<script>
$(document).ready(function(){
var chart = document.getElementById('chart');
var chartData = echarts.init(chart); chartData.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
}); $.get('./data.json').done(function (data) { console.dir("data:"+data); //看看json的数据
console.dir("data.name:"+data.name); // object
console.dir("data.data:"+data.data); // object
console.dir(typeof(data)); //控制台输出的格式 // 填入数据
// var data = JSON.parse(data);//加上这行，将Sring类型的data转换为JSON形式
chartData.setOption({
xAxis: {
data: data.categories
},
series: [{
name: '销量',
data: data.data
}]
}); }); function eConsole(param)
{
console.dir(param);
} chartData.on("click",eConsole);
}); </script>
</head>
<body>
<div id="chart" style="width: 900px; height: 600px;"></div>
</body>
</html>
二. data.json文件如下：
{
"name": [
"苹果",
"橘子",
"荔枝",
"桃子",
"栗子",
"梨子",
"柿子"
],
"data": [
500,
280,
386,
190,
107,
207,
452
]
}
三. 以上面的方式访问会报错。如下：
报错内容：jquery.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/14620/Desktop/Echarts/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
四. 解决方法：
参考网站（【调试错误】Access to XMLHttpRequest at file:E590/ceshi.json from origin null）：https://blog.csdn.net/OrangeChenZ/article/details/84986648
谷歌不允许这样访问。
本地部署网站web。
解决方式一：将html页面部署到服务器再访问。
如何部署？
第一步：控制面板->程序与功能->启用或关闭windows功能
Internet Information Services 前面的复选框勾上。
第二步：我的电脑右键->管理->添加网站
注：主机名不填，用localhost:1213访问本地服务器。
报错1：
HTTP 错误 403.14 - Forbidden
Web 服务器被配置为不列出此目录的内容。
解决1：
启用目录浏览。
报错2：
HTTP 错误 401.3 - Unauthorized 由于Web服务器上此资源的访问控制列表(ACL)配置或加密设置。
解决2：
网站1213右键->编辑权限->安全->添加Everyone权限
报错3：
HTTP 错误 401.2 - Unauthorized 由于身份验证头无效，您无权查看此页
解决3：
打开IIS管理器，操作如下：
1.功能视图--身份验证--匿名身份验证--编辑--选择应用程序池标识，启用匿名身份验证；
2.功能视图--授权规则--右键添加允许规则--选择所有匿名用户；
3.保证虚拟目录访问权限，可以添加everyone用户授予所有权限！
至此：localhost:1213成功访问。
打开HTML文件：
（over）