关于”echarts-JSON请求数据”一文读者反映chart无法显示数据的分析

问题原文地址：http://blog.csdn.net/you23hai45/article/details/51585506#reply

1.大家反馈的问题：

页面框架和图表框架都有，控制台也可以看到json文件的内容，但是就是不显示数据

2.先说自己的解决方法吧：

2.1解决办法：

2.2 浏览器端截图：

3.代码

3.1链接源代码：原文地址：http://blog.csdn.net/you23hai45/article/details/51585506#reply

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>echarts-JSON请求数据</title><link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"><script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script><script type="text/javascript" src="../js/echarts.js" ></script><script>$(document).ready(function(){var chart = document.getElementById('chart');var chartData = echarts.init(chart);chartData.setOption({title: {text: '异步数据加载示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: []},yAxis: {},series: [{name: '销量',type: 'bar',data: []}]});$.get('../js/data.json').done(function (data) {console.dir(data);// 填入数据chartData.setOption({xAxis: {data: data.categories},series: [{name: '销量',data: data.data}]});});function eConsole(param) {console.dir(param);}chartData.on("click",eConsole);});</script></head><body><div id="chart" style="width: 1900px; height: 900px;"></div></body>
</html>

{"categories": ["苹果","橘子","荔枝","桃子","栗子","梨子","柿子"],"data": [500,280,386,190,107,207,452]
}

3.2 我的代码

主要是引入echarts、jQuery路径不同

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>echarts-JSON请求数据</title><script src="echarts.min.js"></script><script src="jquery-1.8.3.min.js"></script><script>$(document).ready(function(){var chart = document.getElementById('chart');var chartData = echarts.init(chart);chartData.setOption({title: {text: '异步数据加载示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: []},yAxis: {},series: [{name: '销量',type: 'bar',data: []}]});$.get('data.json').done(function (data) {console.dir("data:"+data);//看着像Jsonconsole.dir("data.categories:"+data.categories);//居然是Undefindconsole.dir("data.data:"+data.dat);//居然是Undefindconsole.dir(typeof(data))//你会发现控制台输出的是String// 填入数据var data = JSON.parse(data);//加上这行，将Sring类型的data转换为JSON形式chartData.setOption({xAxis: {data: data.categories},series: [{name: '销量',data: data.data}]});});function eConsole(param) {console.dir(param);}chartData.on("click",eConsole);});</script></head><body><div id="chart" style="width: 1900px; height: 900px;"></div></body>
</html>

data.json

{"categories": ["apple","orange","litchi","peach","Chestnuts","Pears","Persimmon"],"data": [500,280,386,190,107,207,452]
}

4.延伸讨论：

jQuery $.get().done()的用法

5.一起学习共同进步

关于”echarts-JSON请求数据”一文读者反映chart无法显示数据的分析相关推荐

layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
datagrid数据表格当数据为0的时候页面不显示数据
如下图: datagrid数据表格当数据为0的时候页面不显示数据,为空的表格数据全是0,但是页面无法显示传递的json数据也是没问题的: 所以实在想不通,为什么easyUI datagrid 不显示 ...
模糊查询时，页面没有数据，数据库编辑器里可以正常显示数据
目前遇到两种类似的情况: 1.查看数据库中的数据,比如:此时有两个表会议表和部门表,删除时,我们使用软删除(del),会议表里的3和4不是删除状态,而部门表里的3和4是删除状态,若两表联合查询加上查询 ...
layui数据表格搜索php代码,layui实现显示数据表格和搜索功能示例
本文实例讲述了layui实现显示数据表格和搜索功能.分享给大家供大家参考,具体如下: 搜索 layui.use('table', function(){ var table = layui.table ...
easyui的数据网格实现多条件查询并显示数据
项目ssm(spring+springmvc+mybatis) 编译工具:eclipse 后台框架:easyui 因为easyui数据网格显示的是一种json格式数据: {"total&qu ...
php显示mysql数据实例_php 连接mysql数据库并显示数据实例转载 aoguren
PHP连接MySQL数据库并显示数据//---------基本设定---------$mysql_server_name = "localhost";//服务器名称:$mysql_ ...
python串口数据绘图_使用Python串口实时显示数据并绘图的例子
使用pyserial进行串口传输一.安装pyserial以及基本用法在cmd下输入命令pip install pyserial 注:升级pip后会出现 "'E:\Anaconda3\Sc ...
python读取串口数据绘图_使用Python串口实时显示数据并绘图的例子
使用pyserial进行串口传输一.安装pyserial以及基本用法在cmd下输入命令pip install pyserial 注:升级pip后会出现 "'E:Anaconda3Scri ...
echarts折线图鼠标悬浮竖线_echarts y轴，显示数据，但不显示竖线
在yAxis中插入: axisLine: {show:false}, axisTick: {show:false}, yAxis : [ { show:true, axisLine: {show:fa ...

关于”echarts-JSON请求数据”一文读者反映chart无法显示数据的分析

关于”echarts-JSON请求数据”一文读者反映chart无法显示数据的分析相关推荐

最新文章

热门文章