echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作;

插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法;

灵感和经验来自:https://www.cnblogs.com/zhaoyingjie/p/5963056.html;

前提需了解echarts的基本语法和布局,在这里只记录获取数据部分:

首先,数据的插入主要由xAxis,series中的data[]内插入,动态获取的时候为空,写法即为:data[],

然后,在script标签中写入$.ajax请求方式,然后获取数据,保证数据已获取出来;

再者,可以通过for循环遍历所有数据并插入到新建的空数组中;(如果获取的数据即为数组这步应该可以省略,直接插入到data中;或者只需要插入获取数据的部分,可以执行此操作)

最后,将空数组引入到所要插入数据的图表option的data[]中,完成!

精简代码如下:

(1)xAxis:{ data:[] },series: { data:[] } ;

(2)$.ajax( for(var i = 0;i<arr.length;i++){     xAxisName.push(arr[i]); return xAxisName;   } );//arr为获取出来的数据集合;长度也可自定,用于获取部分数据;

(3)然后再将该数组插入到data中:mycharts.setOption({  xAxis:{  data:xAxisName   }    });//此代码是写在ajax的for循环之外的,$.ajax内部的;和外面的mycharts.setOption(option);不一样;

基本就是这些。

echarts通过ajax动态获取数据的方法的更多相关文章

  1. ECharts 从后台动态获取数据 (asp.net)

    (一) 使用工具 visual studio 2017:Web开发:asp.net (代码中的js引用路径以及ajax方法调用的url,记得修改哦) (二) 准备工作(此处写给和我一样小白) 1.动态 ...

  2. jquery select 列表 ajax 动态获取数据 模糊查询 分页

    最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的 这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...

  3. echarts中跨域动态获取数据时,当某些对应的数据为空时,鼠标滑动到所在位置卡死

    才疏学浅,万望指点. formatter: function (params) { var rel = params[0].name + "<br />"; rel + ...

  4. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...

  5. ajax异步获取数据后动态向表格中添加数据(行)

    因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...

  6. React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

  7. highcharts动态获取数据生成图表问题

    动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说).  柱状图的动态传值: //获取后台数据 va ...

  8. ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...

  9. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

随机推荐

  1. SSM 框架-05-详细整合教程(Eclipse版)(Spring+SpringMVC+MyBatis)

    SSM 框架-05-详细整合教程(Eclipse版)(Spring+SpringMVC+MyBatis) 如果你使用的是 Intellij IDEA,请查看: SSM的配置流程详细的写了出来,方便很少 ...

  2. Socket for android 简单实例

    最近在实现socket通信,所以写个demo来简单实现下.我用了一种是原始的socket实现,另一种是MINA框架来实现的. 下载demo:http://download.csdn.net/detai ...

  3. nginx参考资料

    什么是负载均衡? 官网的入门文章中文版 love2上关注数比较高的nginx教程 什么是反向代理,什么又是正向代理? csdn上浅谈Nginx之反向代理与负载均衡 Nginx 作为 WebSocket ...

  4. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  5. Python初学者第十七天 函数(1)

    17day 函数 1.函数定义: 函数 是指将一组语句的集合通过一个名字(函数名)封装起来,想要执行这个函数,只需调用其函数名即可 2.函数的特性: a 减少重复代码 b 使程序变得可扩展 c 使程序 ...

  6. ORA-28001:口令已经失效

    Oracle11G创建用户时缺省密码过期限制是180天(即6个月),如果超过180天用户密码未做修改则该用户无法登录. 查看密码的有效期设置,LIMIT字段是密码有效天数. select * from ...

  7. how to drop multiple talbes in oracle use a sigle query

    Tool:PL/SQL developer Syntax:SELECT 'DROP TABLE ' || table_name || ';' FROM user_tables; 1.then you ...

  8. 沉淀再出发:xml的意义和存在的价值

    沉淀再出发:xml的意义和存在的价值 一.前言 学习了那么多的语言.框架.语法和基础知识,我们对于数据的理解或许有了一定的认识,但是如何描述.包装.传输.存储数据的手法和流程我们了解的或许并不多,其中 ...

  9. Mysql进阶-day2

    Mysql cmake方式安装 1.卸载原有mysql下载MySQL安装包 [root@localhost ~]# yum remove mysql* -y [root@localhost ~]# m ...

  10. Nowcoder Girl 初赛 T5

    Nowcoder Girl 初赛第五题 来源 Nowcoder Girl 初赛第五题 题面 \(n(1<=n<=10000)\)件武器,每件武器对于属性有加成,一共五种属性.若使用其中的\ ...