Echarts 异步数据加载遇到的问题

最新推荐文章于 2023-05-11 19:08:54 发布
最新推荐文章于 2023-05-11 19:08:54 发布
阅读量287 收藏 2
点赞数
文章标签： json xhtml c#
原文链接：http://www.cnblogs.com/Zev_Fung/p/6752992.html
版权

看了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>

 

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

weixin_30846599
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中使用ECharts 异步加载数据的方法
08-27
主要介绍了微信小程序中使用ECharts 异步加载数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Echarts异步获取数据不显示问题
qq_48959845的博客
11-30 6274
问题描述： 做Echarts可视化图表，前后端分离项目，前端异步获取后端接口数据时 echarts图表不显示问题 left_center_char() { var datesli = []; var confirmedsli = []; var confirmedli = []; this.$axios.get("/hive2/getPre").then((res) => { // var datesli=[] // var
用异步执行解决echarts不显示数据
Madman528的博客
06-14 1291
代码如下 echarts画图，DOM渲染的时候，echarts实现先从后端获取数据再渲染 ,但是执行顺序是先执行 再执行 也就是数据都没而渲染需要的事数据先有再执行,所以得用同步的方法执行,用async await...
Echarts使用本地JSON文件加载不出图表的解决方法以及Jquery访问本地JSON文件跨域的解决方法
爱吃雪糕的小布丁的博客
05-11 3618
最近需要做一个大屏展示，需要用原生html5+css+js来写，所以去学了一下echarts的使用。在使用的过程中难免碰到许多BUG，百度那是必不可少的，可是这些人写的牛头不对马嘴，简直是标题党一大堆，令我作呕，现将我认为比较重要的两个问题记录如下。
Echarts异步加载url无法访问至后台，异步加载跨域问题。
在路上的小马达
01-06 2813
单纯的我 镇!    问题来源于Echarts开发时，本地测试已成功在与接口对接时出现异步加载时加载不成功，当时我就懵逼了...  这代码一样，我改了个ip就不行了？？  莫非Echarts不支持url使用 ip地址？   然后宝宝就方了。。。 问题描述 $.get('http://localhost:8080/Echarts/echarts').done(function (da
ECharts 异步加载数据
01-19
ECharts 异步加载数据 ECharts 通常数据设置在 setOption 中，如果我们需要异步加载数据，可以配合 jQuery等工具，在异步获取数据后通过 setOption 填入数据和配置项就行。 ECharts 通常数据设置在 setOption 中，...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
vue在使用ECharts时的异步更新和数据加载详解
08-28
主要给大家介绍了关于vue在使用ECharts时的异步更新和数据加载的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用
Nick.Peng's Blogs
02-25 3576
文章目录一、前言二、分析&解决方案三、Http-Server简介&安装方法四、启动http本地服务方法五、附：Http-Server可选配置 一、前言 最近学习eharts制作图表，异步请求获取本地*.json数据，html文件都写好了，右击文件用浏览器直接打开时， 制作的图表并没有渲染出来，这是因为使用异步请求加载数据时，由于cors跨域资源共享问题导致的不能读取json数据；...
Echarts图表使用后台数据不显示问题解决
yrrjiayou的博客
05-13 8626
Echarts图表使用后台数据不显示问题解决
echart异步加载数据（加载本地文件）
qq_51434774的博客
08-21 974
echarts异步加载官网案例
vue使用echarts时，初始化数据到eacharts时，数据显示不出来，将异步请求改成同步，获取promise中数据
weixin_46371752的博客
03-07 2554
应用背景 mounted(){ get_data(){}， set_echarts(){ //在这里面需要用到get_data()中获取的后端数据 }, } 问题是axios请求时异步请求，在请求响应回来前，echarts就已经完成了创建了。此时请求还没有回来，所以图表就没有数据了。解决的方法就是让获取数据请求变成同步的，拿到数据后在创建echarts图表对象。 例子 1、图表指定标签 <div id="first-lin
echats异步数据加载失败
qq_41820986的博客
03-15 262
echats异步数据加载 在做echats异步数据的时候遇到一个坑，特此记录。echats加载数据默认是静态的，这个老年人的数据怎么可能满足我们呢？此处采用ajax数据，（遇坑）。 网页初始加载的时候js默认全部加载，但是，ajax并没有把数据加载进去，ajax加载慢着一点。所以解决的问题办法就是在ajax成功的时候再进行对echats数据进行绑定。 //封装函数 function zxt(name,da){ var myChart = echarts.init(docume
Vue中echarts加载不出问题
热门推荐
weixin_44080648的博客
10-10 1万+
Vue中echarts加载不出问题 最近刚接触echarts，做了些基础的图表，也踩了好几个坑。总结一下echarts图加载出不来可能有以下两方面的问题（目前遇到的）： 1.没有给charts图设置宽高！ 2.项目中echarts的id重复 如果init图表时，使用document.getElementById的方式获取元素的id，此时charts图的id一定不能重复！跨页面不重复！否则可能会出现charts图不显示的问题！！ 较好的init方法是，采用ref的方式，而不要用原生的document.getE
echarts切换页面后加载不出来的问题
qq_42727641的博客
02-28 2604
项目上线后切换页面时发现echarts图表加载不出来了 查阅之后发现在setOption之前加一句 document.getElementById('容器id名称').setAttribute('_echarts_instance_', ''); 或者 document.getElementById('trend-chart').removeAttribute('_echarts_instance_'); 在重新创建之前，移除之前创建的实例或者清空。setOption的时候就会重新加载。
echarts封装组件-解决界面不显示数据问题
BUG小太阳
06-20 1195
需求：首页显示多种类型的统计图（封装多个组件方便后续使用） 问题：数据获取后无法渲染到界面（ vue axios属于异步加载数据） 解决：利用watch，监控数据变化，根据变化调用渲染echarts的方法 参考： 按需引入： 一、创建组件(components/charts/lineArea.vue) // echarts按需引入 <template> <div ref="dom"></div> </template> <script&g.
Echarts 多条折线图X轴数据不同数据错乱
qq_37301074的博客
09-24 4299
Echarts 多条折线图，X轴数据不同导致数据错乱的解决方法
echarts异步加载数据
最新发布
11-11
ECharts 异步加载数据通常需要配合其他工具，比如 jQuery。以下是一个简单的例子： ```javascript // 初始化图表 var myChart = echarts.init(document.getElementById('main')); // 异步加载数据 $.get('data....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值