想写一个eharts,动态读取本地.json文件中的数据,没有报错,但是一直显示暂无数据+动态气泡。也不知道问题出在哪里。有没有大牛指点一下~谢谢~
1、google浏览器已经设置了 属性--allow-file-access-from-files,可以读取本地json文件。
2、google浏览器调试没有报错,只显示Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.HTML如下:<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
 
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <!--script src="http://echarts.baidu.com/build/dist/echarts.js"></script-->
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/esl.js" type="text/javascript"></script>
    <script src="js/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
    // 路径配置
   require.config({
       paths: {
           'echarts': 'http://echarts.baidu.com/build/dist',
                 
            }
        });        require(
        [
            'echarts',
            'echarts/chart/line' //按需加载图表关于线性图、折线图的部分
        ],
        DrawEChart //异步加载的回调函数绘制图表
        );
var myChart;//全局变量
        function DrawEChart(ec) {
            //--- 折柱 ---
            myChart = ec.init(document.getElementById('main'));
            //图表显示提示信息
            myChart.showLoading({
                text: "图表数据正在努力加载..."
            });
            //定义图表options
            var options = {
                title: {
                    text: "通过Ajax获取数据呈现图标示例",
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ["销量"]
                },
                toolbox: {
                    show: true,
                    feature: {
                        : false
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ["苹果","梨","栗子"]
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitArea: { show: true }
                    }
                ],
                series: [{
//name: '销量',
//type: 'line',
data:[]
}]
            };            //通过Ajax获取数据
            $.ajax({
                type: "GET",
                async: false, //同步执行
                url: "data.json",
                dataType: "json", //返回数据形式为json
                success: function (result) {
                    if (result) {                                                options.series.data = result.consume;
                          alert(options.series.data);
myChart.hideLoading();
myChart.setOption(options);
                    }
                },
                error: function (errorMsg) {
                    alert("图表请求数据失败啦!");
                }
            });
        }    </script>
</body>
</html>data.json文件如下
{
"consume":
[ 100,
101,
108
]
}

解决方案 »

  1.   

    有进入到success吗?
      

  2.   

    用Firefox来测试,谷歌设置启动参数测试有些时候不一定有效用chrome最好发布网站后通过http协议来测试
      

  3.   

    注意你的这个json文件放的位置,要在你的页面文件同级还是下一级或者上一级....我也出现过这个问题,后来发现是路径的问题
      

  4.   

    开起一个本地的服务器 以http开头访问就行啦