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. Android 黑色样式menu

    效果图:

  2. QQ群文件下载速度慢-解决办法

    QQ群文件下载速度慢-解决办法 本方法是本人亲测测试出来的,特此和大家分享 没有效果让你打我 解决方法 1.打开[手机版 QQ] 2.进入群文件,找到需要下载文件 3.[分享],先点击[发给好友],选 ...

  3. linux 服务器 keras 深度学习环境搭建

    感慨: 程序跑不起来,都是环境问题. 1. 安装Anaconda https://blog.csdn.net/gdkyxy2013/article/details/79463859 2. 在 Anac ...

  4. BIEE总结

    一,数据仓库,BI涉及到的相关概念  1.DW:    即数据仓库(Data Warehouse),是一个面向主题的(Subject Oriented).集成的(Integrated).相对稳定的(N ...

  5. 打通版微社区(6):部署微信插件及开通QQ云服务

    写在前面: 此文是我最后写的.其实实际部署的时候,我是先安装了论坛并试图开通微信的微社区.发现微社区需要在微信公众平台的开发者中心里配置 "网页账号,网页授权获取用户基本信息"为论 ...

  6. [翻译] WZFlashButton

    WZFlashButton This is a custom button with flash-like effect. Inspired by Ripple Effect. 这是一个自定义的按钮, ...

  7. linux 下安装ant

    1.下载 下载地址:http://ant.apache.org/bindownload.cgi 2.解压     cd /home/work/ant/ tar -zxvf apache-ant-1.8 ...

  8. cygwin64-安装包管理工具

    1.dos command, install pkg $ setup-x86_64.exe -q -P curl $ setup-x86_64.exe -q -P lynx 2. cygwin64 c ...

  9. Linux CPU的中断【转载】

    中断其实就是由硬件或软件所发送的一种称为IRQ(中断请求)的信号. 中断允许让设备,如键盘,串口卡,并口等设备表明它们需要CPU. 一旦CPU接收了中断请求,CPU就会暂时停止执行正在运行的程序,并且 ...

  10. Shell传递参数【转载】

    Shell 传递参数 我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 实例 以 ...