echarts动态加载折线图数据demo

版权声明：本文为博主原创文章，未经博主允许不得转载。

文章来源 http://www.vxzsk.com/180.html

前面几节echarts的使用都是静态常量值得设置，这肯定不能满足我们在日常开发中的需要，平时项目的数据都是动态的，可变的，所以本章节介绍echarts结合Java
如何动态的加载数据。
=================方式一============

1，新建servelet类EchartsDemo.java和页面echartsDemo2.jsp。
EchartsDemo.java是一个普通的servelet，在这里仅仅是举例，读者可更换为一个spring的controller或者struts的action。
EchartsDemo.java 代码
说明：doPost方法中设置了四个参数，并且四个参数按照echarts的格式设置了常量值，赋值数据读者可根据自己需求自行组装，但是组装的格式一定要符合上述代码案例，赋值数据可来自于数据库，xml文件，接口调用等。
echartsDemo2.jsp 代码
js代码接收servelet中四个动态参数，然后把动态变量赋值到相应位置
2，运行代码，效果如下
我们在servelet中 设置的title值为"我是折线图" ，请注意下图标题



还看到一种方式，作为参考

==================方式二===================

注意：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相关配置项。