设为首页 收藏本站

运维网

查看: 1764|回复: 0

[经验分享] Echarts 异步数据加载遇到的问题

[复制链接]

尚未签到

发表于 2017-12-28 23:17:49 | 显示全部楼层 |阅读模式
  看了Echarts官网异步加载数据的Demo
  

var myChart = echarts.init(document.getElementById('main'));  

// 显示标题,图例和空的坐标轴  
myChart.setOption({
  
title: {
  
text: '异步数据加载示例'
  
},
  
tooltip: {},
  
legend: {
  
data:['销量']
  
},
  
xAxis: {
  
data: []
  
},
  
yAxis: {},
  
series: [{
  
name: '销量',
  
type: 'bar',
  
data: []
  
}]
  
});
  

  
// 异步加载数据
  
$.get('data.json').done(function (data) {
  
// 填入数据
  
    myChart.setOption({
  
xAxis: {
  
data: data.categories
  
},
  
series: [{
  
// 根据名字对应到相应的系列
  
name: '销量',
  
data: data.data
  
}]
  
});
  
});
  

DSC0000.png

  编辑示例的代码跟上面的代码不太一样,通过setTimeout模拟异步加载
  

function fetchData(cb) {  

// 通过 setTimeout 模拟异步加载  
setTimeout(function () {
  
cb({
  
categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
  
data: [5, 20, 36, 10, 10, 20]
  
});
  
}, 1000);
  
}
  

  
// 初始 option
  
option = {
  
title: {
  
text: '异步数据加载示例'
  
},
  
tooltip: {},
  
legend: {
  
data:['销量']
  
},
  
xAxis: {
  
data: []
  
},
  
yAxis: {},
  
series: [{
  
name: '销量',
  
type: 'bar',
  
data: []
  
}]
  
};
  

  
fetchData(function (data) {
  
myChart.setOption({
  
xAxis: {
  
data: data.categories
  
},
  
series: [{
  
// 根据名字对应到相应的系列
  
name: '销量',
  
data: data.data
  
}]
  
});
  
});
  

  看完demo和编辑示例,自己必须亲手做一次,在本地data.json文本保存json数据,json数据我从编辑示例取
  

{  
categories: [
  

"衬衫",  

"羊毛衫",  

"雪纺衫",  

"裤子",  

"高跟鞋",  

"袜子"  
],
  
data: [
  

5,  

20,  

36,  

10,  

10,  

20  
]
  
}
  

  然后vs2012 创建aspx文件,原原本本把上面的代码拷贝过来
  

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo3_异步数据加载和更新.aspx.cs" Inherits="EchartsDemo.demo3_异步数据加载和更新" %>  

  
<!DOCTYPE html>
  

  
<html xmlns="http://www.w3.org/1999/xhtml">
  
<head runat="server">
  
<meta http-equiv="Content-Type" content="text/html; " />
  
<title></title>
  
<script src="jquery-1.7.1.min.js"></script>
  
<!-- 引入 ECharts 文件 -->
  
<script src="echarts.js"></script>
  
</head>
  
<body>
  
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
  
<div></div>
  
<script type="text/javascript">
  
var myChart = echarts.init(document.getElementById('main'));
  
// 显示标题,图例和空的坐标轴
  
        myChart.setOption({
  
title: {
  
text: '异步数据加载示例'
  
},
  
tooltip: {},
  
legend: {
  
data: ['销量']
  
},
  
xAxis: {
  
data: []
  
},
  
yAxis: {},
  
series: [{
  
name: '销量',
  
type: 'bar',
  
data: []
  
}]
  
});
  

  
//// 异步加载数据
  
//$.getJSON('data.json',function (data) {
  
//    console.log(data);
  
//    // 填入数据
  
//    myChart.setOption({
  
//        xAxis: {
  
//            data: data.categories
  
//        },
  
//        series: [{
  
//            // 根据名字对应到相应的系列
  
//            name: '销量',
  
//            data: data.data
  
//        }]
  
//    });
  
//});
  

  
// 异步加载数据
  
$.get('data.json').done(function (data) {
  
// 填入数据
  
            myChart.setOption({
  
xAxis: {
  
data: data.categories
  
},
  
series: [{
  
// 根据名字对应到相应的系列
  
name: '销量',
  
data: data.data
  
}]
  
});
  
});
  
</script>
  
</body>
  
</html>
  

  在使用VS2012进行调试时,发现JSON文件加载不了,http状态提示:404
DSC0001.png

  其实原因是vs内置的IIS Express默认没有mime映射json扩展名文件,所以就不能直接访问。
DSC0002.png

  所以只需要IIS Express添加mime映射json扩展文件就可以。
  步骤一:
  打开cmd,切换到IIS Express文件夹目录下,路径C:\Program Files\IIS Express
  步骤二:执行以下命令就可以了
  

appcmd set config /section:staticContent /+[fileExtension='.json',mimeType='text/plain']  

DSC0003.png

  如果不想设置IIS Express,可以在项目中的web.config中进行配置,configuration节中添加以下就可以:
  

<system.webServer>  
<staticContent>
  
<mimeMap fileExtension=".json" mimeType="application/json"/>
  
</staticContent>
  
</system.webServer>
  

  data.json加载成功,但Echart没有效果
DSC0004.png

  在极速360浏览器查看请求回来的json数据,preview居然显示undefined,大概知道是json格式问题
DSC0005.png

DSC0006.png

  重新修改后的数据
  

{  

"categories": [  

"衬衫",  

"羊毛衫",  

"雪纺衫",  

"裤子",  

"高跟鞋",  

"袜子"  
],
  

"data": [  

5,  

20,  

36,  

10,  

10,  

20  
]
  
}
  

  好了,数据没有问题了吧,还是没有效果出来
DSC0007.png

  想了很久不知道啥原因问题
  只好尝试把vs服务换成Visual Studio 开发服务器
DSC0008.png

  然后调试,json数据是有了,但中文都乱码
DSC0009.png

  最后只能在IIS 环境部署,完美成功
DSC00010.png

  至于为什么在vs显示不了,我暂时找不到原因,找到原因在补充。
  2017-4-23晚上21:46
  睡了一觉醒来,突然想到,可能vs调试得到的是string类型,而iis得到的data数据不是string类型
  通过typeof 判断,验证我想的是对的。最后修改了下,在iis和vs都正常显示,奇怪奇怪,居然是这个原因。
  

<!DOCTYPE html>  

  
<html xmlns="http://www.w3.org/1999/xhtml">
  
<head runat="server">
  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
<title></title>
  
<script src="jquery-1.7.1.min.js"></script>
  
<!-- 引入 ECharts 文件 -->
  
<script src="echarts.js"></script>
  
</head>
  
<body>
  
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
  
<div></div>
  
<script type="text/javascript">
  
var myChart = echarts.init(document.getElementById('main'));
  
// 显示标题,图例和空的坐标轴
  
        myChart.setOption({
  
title: {
  
text: '异步数据加载示例'
  
},
  
tooltip: {},
  
legend: {
  
data: ['销量']
  
},
  
xAxis: {
  
data: []
  
},
  
yAxis: {},
  
series: [{
  
name: '销量',
  
type: 'bar',
  
data: []
  
}]
  
});
  

  
//// 异步加载数据
  
//$.getJSON('data.json',function (data) {
  
//    console.log(data);
  
//    // 填入数据
  
//    myChart.setOption({
  
//        xAxis: {
  
//            data: data.categories
  
//        },
  
//        series: [{
  
//            // 根据名字对应到相应的系列
  
//            name: '销量',
  
//            data: data.data
  
//        }]
  
//    });
  
//});
  

  
// 异步加载数据
  
$.get('data.json').done(function (data) {
  
if (typeof (data) == "string") {
  
data = JSON.parse(data);
  
}
  
// 填入数据
  
            myChart.setOption({
  
xAxis: {
  
data: data.categories
  
},
  
series: [{
  
// 根据名字对应到相应的系列
  
name: '销量',
  
data: data.data
  
}]
  
});
  
});
  
</script>
  
</body>
  
</html>
  

运维网声明 1、欢迎大家加入本站运维交流群:群①:263444886群②:197202523群③:485755530群④:201730672群⑤:202807635运维网交流群⑥:281548029
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须注明原文的出处
4、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
5、运维网 - 服务您的运维操作管理专家!
6、联系人Email:[email protected] 网址:www.iyunv.com

点击关注更多内容
您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则  允许回帖邮件提醒楼主

关注运维网官方微信X

关注运维网官方微信

扫描二维码关注运维网官方微信,最新一手资源尽在官方微信!快快关注我们吧...

扫描微信二维码查看详情

客服 E-mail:[email protected]

本站由安畅网络和青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

京ICP备14039699号-1 Copyright © 2012-2017

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

Good good study day day up !


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


合作伙伴: 青云cloud 安畅网络

快速回复 返回顶部 返回列表