echarts动态加载折线图数据demo(4)

2017年09月11日 10:08 | 4606次浏览 作者原创 版权保护

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

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

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

EchartsDemo.java 代码

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 代码

<%@ 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中四个动态参数,然后把动态变量赋值到相应位置

var title=${title};
var legend=${legend};
var xAxis =${xAxis};
var series=${series};

2,运行代码,效果如下

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


小说《我是全球混乱的源头》
此文章本站原创,地址 https://www.vxzsk.com/180.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程