看了Echarts官网异步加载数据的Demo

  1. var myChart = echarts.init(document.getElementById('main'));
  2. // 显示标题，图例和空的坐标轴
  3. myChart.setOption({
  4.     title: {
  5.         text: '异步数据加载示例'
  6.     },
  7.     tooltip: {},
  8.     legend: {
  9.         data:['销量']
  10.     },
  11.     xAxis: {
  12.         data: []
  13.     },
  14.     yAxis: {},
  15.     series: [{
  16.         name: '销量',
  17.         type: 'bar',
  18.         data: []
  19.     }]
  20. });
  21.  
  22. // 异步加载数据
  23. $.get('data.json').done(function (data) {
  24.     // 填入数据
  25.     myChart.setOption({
  26.         xAxis: {
  27.             data: data.categories
  28.         },
  29.         series: [{
  30.             // 根据名字对应到相应的系列
  31.             name: '销量',
  32.             data: data.data
  33.         }]
  34.     });
  35. });

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

  1. function fetchData(cb) {
  2.     // 通过 setTimeout 模拟异步加载
  3.     setTimeout(function () {
  4.         cb({
  5.             categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
  6.             data: [5, 20, 36, 10, 10, 20]
  7.         });
  8.     }, 1000);
  9. }
  10.  
  11. // 初始 option
  12. option = {
  13.     title: {
  14.         text: '异步数据加载示例'
  15.     },
  16.     tooltip: {},
  17.     legend: {
  18.         data:['销量']
  19.     },
  20.     xAxis: {
  21.         data: []
  22.     },
  23.     yAxis: {},
  24.     series: [{
  25.         name: '销量',
  26.         type: 'bar',
  27.         data: []
  28.     }]
  29. };
  30.  
  31. fetchData(function (data) {
  32.     myChart.setOption({
  33.         xAxis: {
  34.             data: data.categories
  35.         },
  36.         series: [{
  37.             // 根据名字对应到相应的系列
  38.             name: '销量',
  39.             data: data.data
  40.         }]
  41.     });
  42. });

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

  1. {
  2.     categories: [
  3.         "衬衫",
  4.         "羊毛衫",
  5.         "雪纺衫",
  6.         "裤子",
  7.         "高跟鞋",
  8.         "袜子"
  9.     ],
  10.     data: [
  11.         5,
  12.         20,
  13.         36,
  14.         10,
  15.         10,
  16.         20
  17.     ]
  18. }

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo3_异步数据加载和更新.aspx.cs" Inherits="EchartsDemo.demo3_异步数据加载和更新" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <title></title>
  9.     <script src="jquery-1.7.1.min.js"></script>
  10.     <!-- 引入 ECharts 文件 -->
  11.     <script src="echarts.js"></script>
  12. </head>
  13. <body>
  14.     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  15.     <div id="main" style="width: 600px; height: 400px;"></div>
  16.     <script type="text/javascript">
  17.         var myChart = echarts.init(document.getElementById('main'));
  18.         // 显示标题，图例和空的坐标轴
  19.         myChart.setOption({
  20.             title: {
  21.                 text: '异步数据加载示例'
  22.             },
  23.             tooltip: {},
  24.             legend: {
  25.                 data: ['销量']
  26.             },
  27.             xAxis: {
  28.                 data: []
  29.             },
  30.             yAxis: {},
  31.             series: [{
  32.                 name: '销量',
  33.                 type: 'bar',
  34.                 data: []
  35.             }]
  36.         });
  37.  
  38.         //// 异步加载数据
  39.         //$.getJSON('data.json',function (data) {
  40.         //    console.log(data);
  41.         //    // 填入数据
  42.         //    myChart.setOption({
  43.         //        xAxis: {
  44.         //            data: data.categories
  45.         //        },
  46.         //        series: [{
  47.         //            // 根据名字对应到相应的系列
  48.         //            name: '销量',
  49.         //            data: data.data
  50.         //        }]
  51.         //    });
  52.         //});
  53.  
  54.         // 异步加载数据
  55.         $.get('data.json').done(function (data) {
  56.             // 填入数据
  57.             myChart.setOption({
  58.                 xAxis: {
  59.                     data: data.categories
  60.                 },
  61.                 series: [{
  62.                     // 根据名字对应到相应的系列
  63.                     name: '销量',
  64.                     data: data.data
  65.                 }]
  66.             });
  67.         });
  68.     </script>
  69. </body>
  70. </html>

在使用VS2012进行调试时，发现JSON文件加载不了，http状态提示：404

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

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

步骤一：

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

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

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

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

  1. <system.webServer>
  2.   <staticContent>
  3.     <mimeMap fileExtension=".json" mimeType="application/json"/>
  4.   </staticContent>
  5. </system.webServer>

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

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

重新修改后的数据

  1. {
  2.     "categories": [
  3.         "衬衫",
  4.         "羊毛衫",
  5.         "雪纺衫",
  6.         "裤子",
  7.         "高跟鞋",
  8.         "袜子"
  9.     ],
  10.     "data": [
  11.         5,
  12.         20,
  13.         36,
  14.         10,
  15.         10,
  16.         20
  17.    ]
  18. }

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

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

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

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

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

至于为什么在vs显示不了，我暂时找不到原因，找到原因在补充。

2017-4-23晚上21:46

睡了一觉醒来，突然想到，可能vs调试得到的是string类型，而iis得到的data数据不是string类型

通过typeof 判断，验证我想的是对的。最后修改了下，在iis和vs都正常显示，奇怪奇怪，居然是这个原因。

  1. <!DOCTYPE html>
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <script src="jquery-1.7.1.min.js"></script>
  8.     <!-- 引入 ECharts 文件 -->
  9.     <script src="echarts.js"></script>
  10. </head>
  11. <body>
  12.     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  13.     <div id="main" style="width: 600px; height: 400px;"></div>
  14.     <script type="text/javascript">
  15.         var myChart = echarts.init(document.getElementById('main'));
  16.         // 显示标题，图例和空的坐标轴
  17.         myChart.setOption({
  18.             title: {
  19.                 text: '异步数据加载示例'
  20.             },
  21.             tooltip: {},
  22.             legend: {
  23.                 data: ['销量']
  24.             },
  25.             xAxis: {
  26.                 data: []
  27.             },
  28.             yAxis: {},
  29.             series: [{
  30.                 name: '销量',
  31.                 type: 'bar',
  32.                 data: []
  33.             }]
  34.         });
  35.  
  36.         //// 异步加载数据
  37.         //$.getJSON('data.json',function (data) {
  38.         //    console.log(data);
  39.         //    // 填入数据
  40.         //    myChart.setOption({
  41.         //        xAxis: {
  42.         //            data: data.categories
  43.         //        },
  44.         //        series: [{
  45.         //            // 根据名字对应到相应的系列
  46.         //            name: '销量',
  47.         //            data: data.data
  48.         //        }]
  49.         //    });
  50.         //});
  51.  
  52.         // 异步加载数据
  53.         $.get('data.json').done(function (data) {
  54.             if (typeof (data) == "string") {
  55.                 data = JSON.parse(data);
  56.             }
  57.             // 填入数据
  58.             myChart.setOption({
  59.                 xAxis: {
  60.                     data: data.categories
  61.                 },
  62.                 series: [{
  63.                     // 根据名字对应到相应的系列
  64.                     name: '销量',
  65.                     data: data.data
  66.                 }]
  67.             });
  68.         });
  69.     </script>
  70. </body>
  71. </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. html中target的用法

  2. 图像分类与KNN

    1 图像分类问题 1.1 什么是图像分类 所谓图像分类问题,就是已有固定的分类标签集合,然后对于输入的图像,从分类标签集合中找出一个分类标签,最后把分类标签分配给该输入图像.虽然看起来挺简单的,但这可 ...

  3. AndroidStudio中添加依赖的三种方式以及如何引入so文件和arr文件

    AndroidStudio中添加依赖的三个选项,如图:    分别为:库依赖(Library dependency).文件依赖(File dependency)和module依赖(Module dep ...

  4. Educational Codeforces Round 20 E - Roma and Poker（dp）

    传送门 题意 Roma在玩一个游戏,一共玩了n局,赢则bourle+1,输则bourle-1,Roma将会在以下情况中退出 1.他赢了k个bourle 2.他输了k个bourle 现在给出一个字符串 ...

  5. keepalived 原理、安装与使用

    1. keepalived工作原理 keepalived是集群管理中保证集群高可用的一个服务软件,其功能类似于heartbeat,用来防止单点故障. keepalived是以VRRP协议为实现基础的, ...

  6. Selenium | 简单使用

    需求分析: 登录百度首页,对百度首页进行截屏操作,保存文件 核心代码如下: //配置浏览器 System.setProperty("webdriver.chrome.driver" ...

  7. 福建工程学院第七届ACM程序设计新生赛 （同步赛）

    A.关电脑 #include<bits/stdc++.h> using namespace std; typedef long long LL; int T,h1,m1,s1,h2,m2, ...

  8. RHEL6.5---LVS（IP-TUN）

    实验环境: 主机名 IP  所需软件 master eth0==>192.168.30.160(RIP) eth0:1==>192.168.30.130(VIP) ipvsadm node ...

  9. Apache Kylin的核心概念

    不多说,直接上干货! 1.表(table):This is definition of hive tables as source of cubes,在build cube 之前,必须同步在 kyli ...

  10. 微信小程序九宫格布局

    先上效果图 使用注意事项 1:注意在app.json中注册页面路径 2:如果要增加新的Item,可到js中对listService数组进行增加 3:listService参数[ title:分类标题 ...