echarts（JavaScript）加载json的辛酸史

作为非前端开发出身的数据从业人员，echarts数据可视化功能太强大了，通过直接把数据写入到代码里可以实现，但是当数据量太大或者反复操作时，写到代码里太耗时了，因此需要学习js加载文件的方法，去自动化图形，一下记录自己再学习中所遇到的坑。

先上代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=EDGE;"><title>echarts-JSON请求数据</title><script src="echarts.js"></script><script src="asset/js/jquery.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.log("data",data);//看类型console.log("data.categories:",data.categories);//观察类型console.log("data.data:",data.data);//居然是Undefindconsole.log(typeof(data))//你会发现控制台输出的不是String 是 Object，不需要转换// 填入数据// var data = JSON.parse(data);//加上这行，将Sring类型的data转换为JSON形式// var data = $.parseJSON(data);console.log(data.toString()) //[object Object]console.log(data)chartData.setOption({xAxis: {data: data.categories},series: [{name: '销量',data: data.data}]});});function eConsole(param) {console.log(param);}chartData.on("click",eConsole);});</script></head><body><div id="chart" style="width: 1000px; height: 400px;"></div></body>
</html>

直接通过浏览器打开看效果：图呢？

很多文章和官网都有说：要加上var data = JSON.parse(data);这一行，nonono要看返回的类型是什么？

通过控制台查看，通过控制台完全没有输出是怎么回事？

通过咨询开发大神，原来发送的请求是ajax请求，因此需要http sever或者通过tomcat服务器查看，http sever不会写怎么办，那只能通过tomcat服务器了，然后又安装jdk和tomcat，注意注意一定要正确配置文件，然后把文件包放到webapps下面，这样执行tomcat时就会自动执行webapps下的文件，然后打开浏览器输入：http://localhost:8080/myhome/pur.html看效果：

耶成功了，数据格式如下：以后可以随意加载文件了，

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

echarts（JavaScript）加载json的辛酸史相关推荐

ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤连接数据接口,动态加载图表动态加载数据,整体代码折线图绘制总结绘制多个图表的方法 ECharts 纯Javasc ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
jQuery新版本加载json注意事项。
jQuery在1.4版本后,采用了更为严格的json解析方式,所以所有内容都必须要有双引号. 比如以前 {key:"28CATEGORY",status:"0″}是没问题 ...
ajax传输json数据格式乱码_解决Ajax加载JSon数据中文乱码问题
一.问题描述使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { ...
填坑 ---- arcgis api for javascript 加载天地图
写在前面首先要感谢 arcgis api for javascript 加载天地图这篇文章,帮助我完成了在网页中加载天地图. 在此就不再描述加载天地图的方法与过程,只记录我遇到的一个坑与填坑方法. ...
Android中关于Volley的使用（二）加载Json数据
前面一篇关于Volley的文章中,我们学习了如何利用ImageRequest去网络中加载图片,那么今天我们就来学习一下如何利用volley去网络中加载Json格式数据,并将其展示在一个ListView ...
ajax的get json数据格式,jQuery / 用getJSON()方法加载JSON格式数据 - 汇智网
加载JSON格式数据 jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据.获取服务器中的数组,并对获取的数据进行解析,显示在页面中. 语法:$.getJSON(url,[dat ...
flutter 动画json_使用lottie加载json动画
先上效果图,这个是做的一个仿抖音的点赞动画: giphy.gif 众所周知,属性动画.补间动画通常只能做一些效果简单的,而做复杂的动画可采用gif图,帧动画,但是这样资源空间增大导致apk增大不小.而 ...
Cesium基础知识-加载json数据
viewer = new Cesium.Viewer('cesiumContainer'); //加载json数据生成线 function CreateLineFromJson(params) { / ...

echarts（JavaScript）加载json的辛酸史

echarts（JavaScript）加载json的辛酸史相关推荐

最新文章

热门文章