注意：1、用Ajax请求获取后台数据 2、Echarts只能处理Json数据

后台Controller：根据业务需求不同而返回不同数据，我前台要循环遍历Echarts的series进行数据添加，所以后台返了个二维数组过去。

前端JSP页面：为Echarts准备一个具有高宽的dom容器

前端JS：初始化时即加载Echarts，将不需要进行加载的配置项(例如title、tooltip等)不作改动，将需要动态加载数据的配置放入ajax的success:function(){}中进行处理。

定义一个为series这个即将动态加入数据的配置项准备的名为Item的数组容器，

接着对后台返回过来的数据(childkind)进行遍历，将遍历出的数据赋给容器中的相应属性(例：tp.name=childkind[i])。由于series里面的data属性(接收的是数组数据)也需要进行数据动态加载，接着再定义一个list数组，循环写入数据到list中，再将list数组返给tp.data。

最后再设置Echarst相关配置项。

Echarts动态加载后台数据的更多相关文章

  1. AJAX 动态加载后台数据 绑定select

    <select id="select"> <!--下拉框数据动态加载--> </select> js:(使用jquery) $(document ...

  2. easyui复选框树动态加载后台数据，实现自动选中数据库中数据。后台语言是.NET

    最近公司做项目用到了easyui复选框树来实现加载不同类型产品.因为我刚刚毕业,现在也算是实习吧,所以一脸懵逼啊.在公司里的一个哥的帮助下 ,我写出来这个EasyUi复选框树了,虽然东西不难,但也是自 ...

  3. Echarts使用及动态加载图表数据

    Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地 ...

  4. geotrellis使用（二十三）动态加载时间序列数据

    目录 前言 实现方法 总结 一.前言        今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...

  5. EasyUI datagrid动态加载json数据

    最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...

  6. Echarts使用及动态加载图表数据 折线图X轴数据动态加载

    Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...

  7. eCharts动态加载各省份的数据

    假如从数据库读出以下数据,如何将数据展示在地图之上 1.部门的名称数据: List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事 ...

  8. C#曲线分析平台的制作（四，highcharts+ajax加载后台数据）

    在上一篇博客:C#曲线分析平台的制作(三,三层构架+echarts显示)中已经完成了后台的三层构架的简单搭建,为实现后面的拓展应用开发和review 改写提供了方便.而在曲线分析平台中,往往有要求时间 ...

  9. dhtmlxtree动态加载节点数据的小随笔

    最近做了一个这个东西,颇有些感触,随笔记录一下自己的过程. 首先特别感谢:https://blog.csdn.net/cfl20121314/article/details/46852591,对我的帮 ...

随机推荐

  1. src与href属性的区别

    src和href之间存在区别,能混淆使用.src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在 ...

  2. ThinkPHP 3.2.3 Pager分页

    不是很喜欢TP的分页类,因为生成的分页url感觉有点不好理解,例如访问路径xxxx/home/show.html,在模板输出分页后,例如产生了页码,页码链接的路径会变成xxxx/home/show/p ...

  3. /etc/resolv.conf overwritten. Redhat/Centos

    Prevent /etc/resolv.conf from being blown away by RHEL/CentOS after customizing If you are using RHE ...

  4. js实现多个图片淡入淡出，框架

    单个淡入淡出已经写过,可以看看上几遍的博文 <style> *{ margin:0; padding:0; } div{ height:100px; width:100px; backgr ...

  5. nginx 安装及代理配置。

    新建etc/yum.repos.d/nginx.repo文件,添加以下内容:[nginx] name=nginx repo baseurl=http://nginx.org/packages/cent ...

  6. Soket编程

    基本概念 lIP地址 每台联网的电脑都有一个唯一的IP地址. 长度32位,分为四段,每段8位,用十进制数字表示,每段范围 0 ~ 255 特殊IP:127.0.0.1 用户本地网卡测试 版本:V4(3 ...

  7. 为什么C++中空类和空结构体大小为1？（转载）

    原文链接:http://www.spongeliu.com/260.html 对于结构体和空类大小是1这个问题,首先这是一个C++问题,在C语言下空结构体大小为0(当然这是编译器相关的).这里的空类和 ...

  8. PIC32MZ tutorial -- Output Compare

    Output Compare is a powerful feature of embedded world. The PIC32 Output Compare module compares the ...

  9. LESS 学习记录(简单入门)

    什么是 LESS LESS是一种动态样式语言,属于 CSS 预处理语言的一种.它使用类似 CSS 的语法,但是 赋予了动态语言的特性,比如变量.继承.运算.函数等,方便 CSS 的编写和维护. 使用 ...

  10. 树莓派USB摄像头与camera模块对比

    http://www.cnblogs.com/weixinforspurs/p/5575962.html ——————————————————————————————————————————————— ...