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. OkHttp3源码详解(三) 拦截器

    1.构造Demo 首先构造一个简单的异步网络访问Demo: OkHttpClient client = new OkHttpClient(); Request request = new Reques ...

  2. CPU纯软件全虚拟化技术

    我们在前面的文章中提到了虚拟化技术的大致分类情况,即分为全虚拟化.半虚拟化和硬件辅助虚拟化3大类.而我们虚拟化技术最主要的虚拟主体就是我们的硬件CPU.内存和IO,那么我们的CPU在全虚拟化模式下如何 ...

  3. Software Testing Techniques Homework 2

    Problem 1 1. The fault is i > 0, it should be  i >= 0, because if the case is x = [0], y= 0, w ...

  4. d3js shape深入理解

    本文将视图了解d3js提供的帮助我们创建矢量图形的helper函数,比如下面的: http://d3indepth.com/shapes/ lines curves pie chart segment ...

  5. Linux下部署redis以及相关简介

    什么是redis? Redis是一个高性能的key-value数据库.key-value分布式存储系统查询速度快.存放数据量大.支持高并发,非常适合通过主键进行查询,但不能进行复杂的条件查询.key ...

  6. AD账户锁定策略

    AD账户锁定策略在一个域中可以有多套,密码策略只能有一套

  7. Gdb调试工具/ Makfile项目管理

    gdb调试工具 gcc -g main.c -o main 常用命令 命令            简写         作用 help                h            按模块列 ...

  8. webbench 网站压力测试

    [root@localhost ~]# webbench -c 500 -t 4 http://172.24.61.41/Webbench - Simple Web Benchmark 1.5Copy ...

  9. August 21st 2017 Week 34th Monday

    In fact, the happiest fairy tale is no more than the simple days we have together. 其实全世界最幸福的童话,也比不上我 ...

  10. ZT android -- 蓝牙 bluetooth (五)接电话与听音乐

    android -- 蓝牙 bluetooth (五)接电话与听音乐 分类: Android的原生应用分析 2013-07-13 20:53 2165人阅读 评论(9) 收藏 举报 蓝牙android ...