程序博客网 > 查看php源码

echarts动态加载折线图数据demo

来源：互联网 发布：查看php源码 编辑：程序博客网 时间：2024/05/22 04:33

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

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

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

=================方式一============

1，新建servelet类EchartsDemo.java和页面echartsDemo2.jsp。

EchartsDemo.java是一个普通的servelet，在这里仅仅是举例，读者可更换为一个spring的controller或者struts的action。

EchartsDemo.java 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
package com.test;
/*****
 * V型知识库
 * www.vxzsk.com
 * 
 */
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class EchartsDemo extends HttpServlet {
 
    private static final long serialVersionUID = 1L;
 
    /**
     * Constructor of the object.
     */
    public EchartsDemo() {
        super();
    }
 
    /**
     * Destruction of the servlet. <br>
     */
    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }
 
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
 
        this.doPost(request, response);
    }
 
    /*****
     * V型知识库
     * www.vxzsk.com
     * 
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String title="'我是折线图'";//标题
        String legend ="['邮件营销a','联盟广告','视频广告','直接访问','搜索引擎']";//折线图线条
        String xAxis="['周一','周二','周三','周四','周五','周六','周日']";//x轴
        String series="["
        +"{"
             +"name:'邮件营销a',"
             +"type:'line',"
             +"stack: '总量',"
             +"data:[120, 132, 101, 134, 90, 230, 210]"
       +"},"
       +"{"
             +"name:'联盟广告',"
             +"type:'line',"
             +"stack: '总量',"
             +"data:[220, 182, 191, 234, 290, 330, 310]"
       +"},"
       +"{"
             +"name:'视频广告',"
             +"type:'line',"
             +"stack: '总量',"
             +"data:[150, 232, 201, 154, 190, 330, 410]"
        +"},"
         +"{"
             +"name:'直接访问',"
             +"type:'line',"
             +"stack: '总量',"
             +"data:[320, 332, 301, 334, 390, 330, 320]"
       +"},"
         +"{"
             +"name:'搜索引擎',"
             +"type:'line',"
             +"stack: '总量',"
             +"data:[820, 932, 901, 934, 1290, 1330, 1320]"
      +"}"
     +"]";
         
        request.setAttribute("title", title);
        request.setAttribute("legend", legend);
        request.setAttribute("xAxis", xAxis);
        request.setAttribute("series", series);
        request.getRequestDispatcher("/baidu/echartsDemo2.jsp").forward(request, response);
         
    }
 
    public void init() throws ServletException {
        // Put your code here
    }
 
}

说明：doPost方法中设置了四个参数，并且四个参数按照echarts的格式设置了常量值，赋值数据读者可根据自己需求自行组装，但是组装的格式一定要符合上述代码案例，赋值数据可来自于数据库，xml文件，接口调用等。

echartsDemo2.jsp 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body >
       <div id="container" style="height: 500px"></div>
       <div style="display: ">
        
       </div>
       <!-- V型知识库 www.vxzsk.com -->
        
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
       
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option = null;
var title=${title};
var legend=${legend};
var xAxis =${xAxis};
var series=${series};
 
option = {
    title: {
        text: title
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:legend
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data:  xAxis
    },
    yAxis: {
        type: 'value'
    },
    series:  series
};
 
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

js代码接收servelet中四个动态参数，然后把动态变量赋值到相应位置

1
2
3
4
var title=${title};
var legend=${legend};
var xAxis =${xAxis};
var series=${series};

2，运行代码，效果如下

我们在servelet中 设置的title值为"我是折线图" ，请注意下图标题





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

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

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

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

5

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

jsp

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

js1

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

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

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

js2



0 0
查看php源码 查看php源码
原创粉丝点击
热门IT博客
淘宝苹果手机版淘宝苹果手机版
地球仪js地球仪js
网络连接线
如何评价彭老总 知乎
北邮ipv6网络电视网站
淘宝甜品店
国外数据分析网站
mysql 监控工具
mac删除的快捷键
夜鹰大神是谁淘宝
linux下怎么配置https
mustache golang
ngrok服务器 windows
情侣app软件排行
淘宝客推广宝贝
数据库认证哪个含金量
孕妇奶粉 知乎
anaconda 包含python
淘宝怎么直接关闭订单
手机棋牌源码论坛
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 减肥仪器价格 机器人减肥仪器 减肥仪器排行榜 减肥仪器排行 理疗减肥仪器 豪华减肥仪器 超声波减肥仪器 凯美特减肥仪器 学生减肥瘦身 瘦身贴减肥有用吗 瘦身减肥运动 减肥瘦身大全 吸脂瘦身减肥 减肥瘦身广告语 怎样减肥瘦身快 减肥瘦身哪里好 男生瘦身减肥方法 减肥瘦身排行榜 明星减肥瘦身方法 男人减肥瘦身方法 锻炼瘦身减肥方法 尚赫美容仪减肥 震动减肥仪 经络减肥仪 完美瘦身产品 什么瘦身产品好 瘦身的产品 哺乳期瘦身产品 索芙特瘦身产品 瘦身的运动 呼啦圈瘦身 减肥黄瓜 生姜减肥法 减肥药物 减肥慢跑 红薯减肥吗 减肥什么 怎么减肥减肥 减肥啊减肥 减肥减肥减肥减肥 减肥那

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里