想写一个eharts,动态读取本地.json文件中的数据,没有报错,但是一直显示暂无数据+动态气泡。也不知道问题出在哪里。有没有大牛指点一下~谢谢~
1、google浏览器已经设置了 属性--allow-file-access-from-files,可以读取本地json文件。
2、google浏览器调试没有报错,只显示Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.HTML如下:<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<!--script src="http://echarts.baidu.com/build/dist/echarts.js"></script-->
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/esl.js" type="text/javascript"></script>
<script src="js/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
'echarts': 'http://echarts.baidu.com/build/dist',
}
}); require(
[
'echarts',
'echarts/chart/line' //按需加载图表关于线性图、折线图的部分
],
DrawEChart //异步加载的回调函数绘制图表
);
var myChart;//全局变量
function DrawEChart(ec) {
//--- 折柱 ---
myChart = ec.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
});
//定义图表options
var options = {
title: {
text: "通过Ajax获取数据呈现图标示例",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ["销量"]
},
toolbox: {
show: true,
feature: {
: false
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ["苹果","梨","栗子"]
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [{
//name: '销量',
//type: 'line',
data:[]
}]
}; //通过Ajax获取数据
$.ajax({
type: "GET",
async: false, //同步执行
url: "data.json",
dataType: "json", //返回数据形式为json
success: function (result) {
if (result) { options.series.data = result.consume;
alert(options.series.data);
myChart.hideLoading();
myChart.setOption(options);
}
},
error: function (errorMsg) {
alert("图表请求数据失败啦!");
}
});
} </script>
</body>
</html>data.json文件如下
{
"consume":
[ 100,
101,
108
]
}
1、google浏览器已经设置了 属性--allow-file-access-from-files,可以读取本地json文件。
2、google浏览器调试没有报错,只显示Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.HTML如下:<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<!--script src="http://echarts.baidu.com/build/dist/echarts.js"></script-->
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/esl.js" type="text/javascript"></script>
<script src="js/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
'echarts': 'http://echarts.baidu.com/build/dist',
}
}); require(
[
'echarts',
'echarts/chart/line' //按需加载图表关于线性图、折线图的部分
],
DrawEChart //异步加载的回调函数绘制图表
);
var myChart;//全局变量
function DrawEChart(ec) {
//--- 折柱 ---
myChart = ec.init(document.getElementById('main'));
//图表显示提示信息
myChart.showLoading({
text: "图表数据正在努力加载..."
});
//定义图表options
var options = {
title: {
text: "通过Ajax获取数据呈现图标示例",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ["销量"]
},
toolbox: {
show: true,
feature: {
: false
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: ["苹果","梨","栗子"]
}
],
yAxis: [
{
type: 'value',
splitArea: { show: true }
}
],
series: [{
//name: '销量',
//type: 'line',
data:[]
}]
}; //通过Ajax获取数据
$.ajax({
type: "GET",
async: false, //同步执行
url: "data.json",
dataType: "json", //返回数据形式为json
success: function (result) {
if (result) { options.series.data = result.consume;
alert(options.series.data);
myChart.hideLoading();
myChart.setOption(options);
}
},
error: function (errorMsg) {
alert("图表请求数据失败啦!");
}
});
} </script>
</body>
</html>data.json文件如下
{
"consume":
[ 100,
101,
108
]
}
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货