设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 5639|回复: 1

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

[复制链接]
ts7758258

尚未签到
发表于 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、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-429161-1-1.html 上篇帖子： CitrixSmartAuditor安装报错解决方法 下篇帖子： 【工具】Windows7搭建FTP服务器
回复

使用道具 举报

stevenlaw125
累计签到：29 天
连续签到：3 天
发表于 2018-3-6 12:07:03 | 显示全部楼层
感谢！感谢！感谢！感谢！

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com
回复 支持 反对

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

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

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


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


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

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