echarts异步加载获取数据
时间:2019-06-12
本文章向大家介绍echarts异步加载获取数据,主要包括echarts异步加载获取数据使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在做项目中遇到了一个echarts异步加载数据的填充,首先,查看官方文档示例,了解相关属性之后,再去了解异步请求的相关属性,之后在异步中进行定义横坐标和值数组定义,通过遍历获取result的值存放在定义的数组中,最后存放在data下便实现异步加载获取数据,以下是示例:
function test(){ var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 myChart.setOption({ title: { text: '预计生产产量' }, tooltip: {}, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:['数量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '数量', type: 'bar', data: [] }] }); myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 var names=[]; //类别数组(实际用来盛放X轴坐标值) var nums=[]; //销量数组(实际用来盛放Y坐标值) $.ajax({ type : "get", async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) url : "http://localhost:8080/wisdomeet/a/real/realProgress/realList", //请求发送到TestServlet处 success : function(result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 if (result) { for(var i=0;i<result.length;i++){ names.push(result[i].process.name); //挨个取出类别并填入类别数组 } for(var i=0;i<result.length;i++){ // nums.push(result[i].productionArrangement.number); //挨个取出销量并填入销量数组daliy nums.push(result[i].productionArrangement.daliy); } myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 xAxis: { data: names }, series: [{ // 根据名字对应到相应的系列 name: '数量', data: nums }] }); } }, error : function(errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); myChart.hideLoading(); } }); };
后台接口示例:
@ResponseBody @RequestMapping(value="realList") public List<RealProgress> realList(RealProgress realProgress, HttpServletRequest request, HttpServletResponse response, Model model) { List<RealProgress> realList = realProgressService.findList(realProgress); return realList; }
原文地址:https://www.cnblogs.com/ztyc/p/11009956.html
- 搭建 WPF 上的 UI 自动化测试框架
- ttf设置文字字体
- R语言构建追涨杀跌量化交易模型(附源代码)
- Apache Spark中使用DataFrame的统计和数学函数
- android进程 清理及activity栈管理
- 机器学习模型的变量评估和选择基于技术指标『深度解析』
- Picasso and Android-Universal-Image-Loader缓存框架
- 解决ListView嵌套ListView遇到的问题
- 《OEA - 实体扩展属性系统 - 设计方案说明书》
- webview与js的相互交互
- Java与js的交互
- Rafy 框架 - 流水号插件
- 产品前端重构(TypeScript、MVC框架设计)
- 寻找最优持仓期的开盘缺口盈利交易策略基于Matlab
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
- Python分类测试代码实例汇总
- Swoole 5将移除自动添加Event::wait()特性详解
- laravel 数据验证规则详解
- JS操作XML中DTD介绍及使用方法分析
- PHP设计模式之迭代器(Iterator)模式入门与应用详解
- PHP FileSystem 文件系统常用api整理总结
- laravel框架之数据库查出来的对象实现转化为数组
- php apache开启跨域模式过程详解
- laravel5.6实现数值转换
- python中return不返回值的问题解析
- php装饰者模式简单应用案例分析
- php常用日期时间函数实例小结
- PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
- 基于laravel缓冲cache的用法详解