Echarts 异步数据加载遇到的问题
发布日期:2021-08-17 10:07:58 浏览次数:52 分类:技术文章

本文共 2834 字,大约阅读时间需要 9 分钟。

看了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);}// 初始 optionoption = {    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_异步数据加载和更新" %>    

 

在使用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节中添加以下就可以:

 

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都正常显示,奇怪奇怪,居然是这个原因。

    

 

转载于:https://www.cnblogs.com/Zev_Fung/p/6752992.html

转载地址:https://blog.csdn.net/weixin_30846599/article/details/99223523 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:MySQL(一) 数据库的基本操作
下一篇:边工作边刷题:70天一遍leetcode: day 58-2

发表评论

最新留言

初次前来,多多关照!
[***.217.46.12]2024年04月05日 16时18分05秒