echarts通过ajax动态获取数据的方法
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动态获取数据的方法的更多相关文章
- ECharts 从后台动态获取数据 (asp.net)
(一) 使用工具 visual studio 2017:Web开发:asp.net (代码中的js引用路径以及ajax方法调用的url,记得修改哦) (二) 准备工作(此处写给和我一样小白) 1.动态 ...
- jquery select 列表 ajax 动态获取数据 模糊查询 分页
最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的 这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...
- echarts中跨域动态获取数据时,当某些对应的数据为空时,鼠标滑动到所在位置卡死
才疏学浅,万望指点. formatter: function (params) { var rel = params[0].name + "<br />"; rel + ...
- ECharts 环形饼图 动态获取json数据
ECharts 环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...
- React 中的 AJAX 请求:获取数据的方法
React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...
- highcharts动态获取数据生成图表问题
动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说). 柱状图的动态传值: //获取后台数据 va ...
- ThinkPHP中使用ajax接收json数据的方法
本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...
- vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
随机推荐
- 如何在 Azure 虚拟机里配置条带化
什么是条带化(striping) 条带 (strip) 是把连续的数据分割成相同大小的数据块,把每段数据分别写入到阵列中的不同磁盘上的方法.简单的说,条带是一种将多个磁盘驱动器合并为一个卷的方法. 许 ...
- HTML5离线存储之webstorage
html5在引入webStorage之前,主要用cookies. html5的webstorage 分两种:LocalStorage 和SessionStorage,两者的差别主要在生命周期不同. 1 ...
- Java代码调用存储过程和存储方法
准备一个oracle 的JDBC jar 包:ojdbc14_11g.jar 首先找到你的 oracle 安装位置,例如: 1.创建一个JDBC数据库连接工具类: package com.test.d ...
- SpringMVC与shiro集成及配置文件说明!
在项目中xml文件的配置是必不可少的,特别是SpringMVC框架.但是几乎所有项目的配置都是大同小异,很多人都是直接复制黏贴了事,不少人对其具体含义及用途都不甚全知.本片文章将正对项目中常用的框架S ...
- Python 常用文件
获取当前文件的路径: from os import path d = path.dirname(__file__) #返回当前文件所在的目录 # __file__ 为当前文件, 若果在ide中运行此行 ...
- Burp Suite使用介绍总结
Burp Suite使用介绍(一) 小乐天 · 2014/05/01 19:54 Getting Started Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些 ...
- Git commit comment 汇总标准
参考汇总互联网其它文章建议,结合PEP 257 Docstring Conventions的描述,总结的Git 注释风格,作为个人执行的标准.内容如下: 遵循标准: 1,所有注释尽量坚持使用英文,如果 ...
- 如何实现本机Windows连接虚拟机中的CentOS
1.确定CentOS的IP地址,命令为 ifconfig,由此可知,LinuxIP地址为 192.168.85.128 2.WIndows的IP地址为192.168.16.1, 3.保证CentOS和 ...
- dedecms为导航栏目添加英文标题
最近公司官网是使用 DedeCMS 做的,这个项目中要使用到为导航栏目添加英文标题,就查找资料把它实现了. 根据设计图写成静态页面后是这样的效果: 操作步骤如下: 1. 修改数据表,添加英文字段 影响 ...
- 【[SDOI2015]约数个数和】
慢慢化柿子吧 要求的是这个 \[\sum_{i=1}^N\sum_{j=1}^Md(ij)\] 神奇的约数个数函数有一个这样的性质 \[d(ij)=\sum_{x|i}\sum_{y|j}[(x,y) ...