看了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
}]
});
});

编辑示例的代码跟上面的代码不太一样,通过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; 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 id="main" style="width: 600px; height: 400px;"></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

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

所以只需要IIS Express添加mime映射json扩展文件就可以。

步骤一:

打开cmd,切换到IIS Express文件夹目录下,路径C:\Program Files\IIS Express

步骤二:执行以下命令就可以了

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

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

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

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

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

重新修改后的数据

{
"categories": [
"衬衫",
"羊毛衫",
"雪纺衫",
"裤子",
"高跟鞋",
"袜子"
],
"data": [
5,
20,
36,
10,
10,
20
]
}

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

想了很久不知道啥原因问题

只好尝试把vs服务换成Visual Studio 开发服务器

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

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

至于为什么在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 id="main" style="width: 600px; height: 400px;"></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>

Echarts 异步数据加载遇到的问题的更多相关文章

  1. echarts异步数据加载(在下拉框选择事件中异步更新数据)

    接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...

  2. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  3. echarts ajax数据加载方法

    一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...

  4. ECharts动态数据加载

    最近有用到ECharts做可视化报表,小结一下 一.准备数据 1.官网下载echarts.min.js 2.引入jquery.js 3.请求用的json数据 { "list":[ ...

  5. C#使用Jquery zTree实现树状结构显示_异步数据加载

    JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/dem ...

  6. echarts 设置数据加载遮罩层

    //显示加载数据的loading        chart.showLoading({            text: "图表数据正在努力加载...",            x ...

  7. jgrid异步数据加载

    参考:https://blog.csdn.net/hurryjiang/article/details/7077725

  8. Echarts通过Ajax实现动态数据加载

    Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...

  9. 爱上MVC3~MVC+ZTree大数据异步树加载

    回到目录 理论部分: MVC+ZTree:指在.net MVC环境下进行开发,ZTree是一个jquery的树插件 大数据:一般我们系统中,有一些表结构属于树型的,如分类,地域,菜单,网站导航等等,而 ...

随机推荐

  1. poj1312dfs基础

    就是很简单的DFS-因为数据偏小,上去就是干了 #include <stdio.h> #include <string.h> #include <math.h> # ...

  2. AT2534 港湾設備 (Port Facility)

    洛谷 先膜一下Iscream巨巨 首先我们可以把题目转化为线段覆盖,如果两条线段相交(不算某一条完全在另一条里面的情况),那么这两条线段代表的集装箱就不能放到同一个栈里,我们在它们之间连一条边.如果图 ...

  3. [MySQL] LIMIT 分页优化

    背景:LIMIT 0,20 这种分页方式,随着 offset 值的不断增大,当达到百万级时,一条查询就需要1秒以上,这时可以借助索引条件的查询来优化. SQL:select * from member ...

  4. FlashFXP Registration

    -------- FlashFXP Registration Data START --------FLASHFXPuQBW1wi5uQAAAACvW7cJKQXzmx8Eu6ikXL4LbrYQHZ ...

  5. UWP 页面跳转传值

    如果涉及到页面跳转,一般用Frame这个控件来管理不同的页面. <Grid Name="RootGrid"> <Frame Name="RootFram ...

  6. ImageView加载长图(适用不需要缩放的情况)

    此案例适用于加载网络长图且图片的宽和高已知的情况.由于ImageView加载图片有一个4096*4096的限制,所以对于巨长图的加载比较麻烦,需要我们自己去手动处理. 有两种解决方案:第一种就是比较l ...

  7. AJPFX总结多线程编程的注意事项

    多线程编程的注意事项          1.明确目的,为什么要使用多线程?如果是由于单线程读写或者网络访问(例如HTTP访问互联网)的瓶颈,可以考虑使用线程池.如果是对不同的资源(例如SOCKET连接 ...

  8. markdown快捷键(转)

    markdown快捷键 GLYPH NAME COMMAND Command, Cmd, Clover, (formerly) Apple ALT Option, Opt, (Windows) Alt ...

  9. jsapi4加载的首个图层的范围被默认作为地图范围,且不能修改的解决

    在map加载的第一个图层的图层范围(fullExtent),会被默认设置为map的全图范围,且不能更改,从一般地图控件角度来说,应该有fullExtent属性,作为地图的全图范围,但很遗憾jsapi4 ...

  10. 图解GitHub

    转自:http://marklodato.github.io/visual-git-guide/index-zh-cn.html 个人觉得这一篇比一些入门教程更值得看,图解很详细到位,很容易理解其工作 ...