用echarts结合jsp,servlet生成统计图表

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wx5040257/article/details/81119132

一  简介

        ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二 案例

   这里我们以图书信息表为例,数据库用mysql5.5

-- 简单图书管理系统

DROP DATABASE IF EXISTS bookdb ;
CREATE DATABASE bookdb  CHARACTER SET utf8;

USE bookdb;

DROP TABLE IF EXISTS users;
-- 建立用户表 用于登录
CREATE TABLE users
(
  userId INT PRIMARY KEY AUTO_INCREMENT,
  userName VARCHAR(20) NOT NULL,
  PASSWORD VARCHAR(20) NOT NULL,
  email varchar(20),
  priv varchar(10)
)AUTO_INCREMENT=100

;

INSERT INTO users VALUES(NULL,'jack','123','[email protected]','管理员');
INSERT INTO users VALUES(NULL,'麻子','123''[email protected]','普通用户');
INSERT INTO users VALUES(NULL,'mike','123''[email protected]','普通用户');
DROP TABLE IF EXISTS BookType;

-- 建立图书类别表
CREATE TABLE BookType
(
  typeId INT PRIMARY KEY,
  typeName VARCHAR(20) NOT NULL
)
;
INSERT INTO BookType VALUES(1,'计算机类');
INSERT INTO BookType VALUES(2,'工具辅助类');
INSERT INTO BookType VALUES(3,'言情小说类');
INSERT INTO BookType VALUES(4,'儿童教育类');
DROP TABLE IF EXISTS Books;

-- 建立图书表

CREATE TABLE Books
(
 bookId INT PRIMARY KEY AUTO_INCREMENT,
 bookName VARCHAR(20) NOT NULL,
 number INT,
 price FLOAT,
 typeId INT ,
 FOREIGN KEY(typeId) REFERENCES BookType(typeId)
)AUTO_INCREMENT=100;
INSERT INTO Books VALUES(NULL,'Java面向对象',25,30.5,1);
INSERT INTO Books VALUES(NULL,'c#语言程序设计',20,25.5,1);
INSERT INTO Books VALUES(NULL,'html网页设计',40,16.5,1);
INSERT INTO Books VALUES(NULL,'DreamvearCS使用教程',20,20.5,2);
INSERT INTO Books VALUES(NULL,'myeclipse8.6使用教程',40,26.5,2);
INSERT INTO Books VALUES(NULL,'都市圆舞曲',50,27.5,3);
INSERT INTO Books VALUES(NULL,'玉观音',24,32.5,3);
INSERT INTO Books VALUES(NULL,'简爱',55,31.5,3);
INSERT INTO Books VALUES(NULL,'方与圆',60,22.5,4);
INSERT INTO Books VALUES(NULL,'穷爸爸富爸爸',60,33.5,4);

------------------------------------------------------------------------

       此案例我们生成三个统计图表，一个柱状图用来显示每种图书价格的平均价；另一个柱状图用来显示每种图书的价格的最大值，最小值，平均值；用一个饼图来显示每种图书的库存总数。

对应的统计sql如下：

SELECT t.typeName,sum(number) as sumber,MIN(price) AS miprice,
       MAX(price) AS mxprice,AVG(price) AS avprice
FROM  books b INNER JOIN bookType t
ON b.typeId=t.typeId
GROUP BY t.typeName;

结果如下

最终的结果如下所示：

 

 

 

接下来，我们来查看关键代码：

实体类

=========================BookFunEntity.java====================

package com.accp.entitys;

import java.io.Serializable;

public class BookFunEntity implements Serializable{
	private static final long serialVersionUID = -2685579309299885545L;
	
	private String typeName;    //类型名称
	private int sumber;          //总数
	private double miprice;     //最低价
	private double mxprice;     //最高价
	private double avprice;    //平均价
	
	public BookFunEntity() {
	}
	//省略getter，setter
}

Dao层代码：

====================BookDaoImpl.java===========================

package com.accp.dao;

import java.sql.*;
import java.util.*;

import com.accp.entitys.BookFunEntity;

public class BookDaoImpl implements IBookDao{
	//分组聚合查询
	public List<BookFunEntity> funQuery() {
		List<BookFunEntity> bookList=null; 
		String sqlStr="SELECT t.typeName,sum(number) as sumber,MIN(price) AS miprice,"
				    +" MAX(price) AS mxprice,AVG(price) AS avprice"
				    +" FROM  books b INNER JOIN bookType t"
				    +" ON b.typeId=t.typeId"
				    +" GROUP BY t.typeName";
		PreparedStatement psmt=null;
		ResultSet rs=null;
		Connection conn=BaseDao.getConn();
		try {
			psmt=conn.prepareStatement(sqlStr);
			rs=psmt.executeQuery();
			bookList=new ArrayList<BookFunEntity>();
			BookFunEntity book=null;
			while(rs.next()){
				book=new BookFunEntity();
				book.setSumber(rs.getInt("sumber"));
				book.setAvprice(rs.getDouble("avprice"));
				book.setMiprice(rs.getDouble("miprice"));
				book.setMxprice(rs.getDouble("mxprice"));
				book.setTypeName(rs.getString("typeName"));
				bookList.add(book);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			BaseDao.closeConn(rs, psmt, conn);
		}
		return bookList;
	}
}

Serevlet代码：

===========================ShowEChartsServlet.java=============

package com.accp.servlets;

import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.accp.dao.BookDaoImpl;
import com.accp.dao.IBookDao;
import com.accp.entitys.BookFunEntity;

public class ShowEChartsServlet extends HttpServlet {
	private static final long serialVersionUID = 519071079942744781L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request,response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String showJsp=request.getParameter("show");
		IBookDao bookDao=new BookDaoImpl();
		List<BookFunEntity> bookList=bookDao.funQuery();
		for(BookFunEntity book : bookList){
			System.out.println(book.getTypeName()+","+book.getAvprice());
		}
		request.setAttribute("bookList", bookList);
		if(showJsp==null || showJsp.equals("")){
			showJsp="index";
		}
		showJsp=showJsp+".jsp";
		request.getRequestDispatcher(showJsp).forward(request, response);
	}
}

首页index.jsp

======================index.jsp=========================

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${bathPath }">
    <title>echarts案例</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
	  
<script src="js/jquery.min.js"></script>
<script src="js/echarts.common.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(e){
	$("#main1").hide();
	$("#main2").hide();
	$("#main3").hide();
    var xData=[];
    var minData=[];
    var maxData=[];
    var avgData=[];
    var pieData=[];
    //初始化数据
    <c:forEach items="${bookList}" var="book">
		xData.push("${book.typeName}");
		minData.push(${book.miprice}.toFixed(2));
		maxData.push(${book.mxprice}.toFixed(2));
		avgData.push(${book.avprice}.toFixed(2));
		//注意这里添加的是一个json对象
		pieData.push({
			name:"${book.typeName}",
			value:${book.sumber}
		});
	</c:forEach>
	//定义echarts实例对象
    var myChart1;
	var myChart2;
	var myChart3;
	//显示简单柱状图
    $("[name=bar1]").click(function(e){
    	$("#main1").hide();
		$("#main2").hide();
		$("#main3").hide();
    	$("#main1").show();
    	if(myChart1!=null){
    		myChart1.dispose();//销毁实例后可以再次在该容器上创建 ECharts实例
    	}
    	//创建一个 ECharts 实例,但不能在单个容器上初始化多个 ECharts 实例
    	myChart1 = echarts.init(document.getElementById('main1'));
    	// 指定图表的配置项和数据
	    var optionBar1 = {
	        title: {text: 'ECharts 入门示例',link:'http://echarts.baidu.com/index.html'},
	        tooltip: {show:true,trigger:'item'},
	        legend: {data:['平均值'],show:true},
	        xAxis: {position:'bottom',data: xData},
	        yAxis: {show:true,position:'left'  },
	        series: [{name: '平均值',type: 'bar',data: avgData}]
	    };
    	myChart1.setOption(optionBar1,true);
    });
    //显示复杂柱状图
    $("[name=bar2]").click(function(e){
    	$("#main1").hide();
		$("#main2").hide();
		$("#main3").hide();
    	$("#main2").show();
    	if(myChart2!=null){
    		myChart2.dispose();//销毁实例，否则无法再次显示图表
    	}
    	myChart2 = echarts.init(document.getElementById('main2'));
    	var optionBar2 = {
	        title: {text:'ECharts 入门示例',link:'http://echarts.baidu.com/index.html'},
	        tooltip: {show:true,trigger:'item'},
	        legend: {data:['最大值','最小值','平均值'],show:true},
	        xAxis: {position:'bottom',data: xData},
	        yAxis: {show:true,position:'left'  },
	        series: [{name: '最大值',type: 'bar',data: maxData}
	                 ,{name: '最小值',type: 'bar',data: minData}
	                 ,{name: '平均值',type: 'bar',data: avgData}]
	    };
    	myChart2.setOption(optionBar2,true);
    });
    //显示饼图
    $("[name=pie]").click(function(e){
    	$("#main1").hide();
		$("#main2").hide();
		$("#main3").hide();
    	$("#main3").show();
    	if(myChart3!=null){
    		myChart3.dispose();//销毁实例，否则无法再次显示图表
    	}
    	myChart3 = echarts.init(document.getElementById('main3'));
    	var optionPie = {
	        title : {text: '各种图书的总数',subtext: '这是副标题',x:'center'},
	    	tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},
	    	legend: {orient: 'vertical',left: 'left',data: xData},
	    	series : [{name: '总数',type: 'pie',radius : '55%'  
	    		       ,center: ['50%', '60%'],data:pieData}]
	    }; 
    	myChart3.setOption(optionPie,true);
    });
    
});
</script>
</head>
  
<body>
<h2><input type="button" value="简单柱状图" name="bar1">&nbsp;
    <input type="button" value="复杂柱状图" name="bar2">&nbsp;
    <input type="button" value="饼图" name="pie">&nbsp;
</h2>
<h2>在单独的页面展示<br/>
<a href="ShowCharts.php?show=bar1" target="_blank">简单柱状图</a>&nbsp;
<a href="ShowCharts.php?show=bar2" target="_blank">复杂柱状图</a>&nbsp;
<a href="ShowCharts.php?show=pie" target="_blank">饼图</a>&nbsp;
</h2>
<!-- 为 ECharts 准备三个具备大小（宽高）的显示区域 -->
<div id="main1" style="width: 600px;height:400px; border:2px solid red;" >
</div>
<div id="main2" style="width: 600px;height:400px; border:2px solid red;" >
</div>
<div id="main3" style="width: 600px;height:400px; border:2px solid red;" >
</div>
</body>
</html>

====================================================

单独显示简单柱状图的页面bar1.jsp

==========================bar1.jsp===============

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${bathPath }">
    <title>echarts案例-柱状图</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
<script src="js/echarts.common.min.js"></script>  
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的显示区域 -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;" >
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var xData=[];
    var serData=[];
    <c:forEach items="${bookList}" var="book">
		xData.push("${book.typeName}");
		serData.push(${book.avprice}.toFixed(2));
	</c:forEach>
    // 指定图表的配置项和数据
    var option = {
        title: {text: 'ECharts 入门示例',link:'http://www.baidu.com'},
        tooltip: {show:true,trigger:'item'},
        legend: {data:['平均值'],show:true},
        xAxis: {position:'bottom',data: xData},
        yAxis: {show:true,position:'left'  },
        series: [{name: '平均值',type: 'bar',data: serData}]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

单独显示复杂柱状图的页面bar2.jsp

===========================bar2.jsp====================

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${bathPath }">
    <title>echarts案例-柱状图</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
<script src="js/echarts.common.min.js"></script>  
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的显示区域 -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;" ></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var xData=[];
    var minData=[];
    var maxData=[];
    var avgData=[];
    <c:forEach items="${bookList}" var="book">
		xData.push("${book.typeName}");
		minData.push(${book.miprice}.toFixed(2));
		maxData.push(${book.mxprice}.toFixed(2));
		avgData.push(${book.avprice}.toFixed(2));
	</c:forEach>
    // 指定图表的配置项和数据
    var option = {
        title: {text:'ECharts 入门示例',link:'http://echarts.baidu.com/index.html'},
        tooltip: {show:true,trigger:'item'},
        legend: {data:['最大值','最小值','平均值'],show:true},
        xAxis: {position:'bottom',data: xData},
        yAxis: {show:true,position:'left'  },
        series: [{name: '最大值',type: 'bar',data: maxData}
                 ,{name: '最小值',type: 'bar',data: minData}
                 ,{name: '平均值',type: 'bar',data: avgData}]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

单独显示复杂柱状图的页面pie.jsp

=========================== pie.jsp=======================

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${bathPath }">
    <title>echarts案例-饼图</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
<script src="js/echarts.common.min.js"></script>   
  </head>
  
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var items=[];
    var pieData=[];
    <c:forEach items="${bookList}" var="book">
		items.push("${book.typeName}");
		//注意这里添加的是一个json对象
		pieData.push({
			name:"${book.typeName}",
			value:${book.sumber}
		});
	</c:forEach>
    // 指定图表的配置项和数据
    var option = {
        title : {text: '各种图书的数量',subtext: '这是副标题',x:'center'},
    	tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},
    	legend: {orient: 'vertical',left: 'left',data: items},
    	series : [
           {
            name: '数量',
            type: 'pie',
            radius : '55%',  
            center: ['50%', '60%'],
            data:pieData
           }
        ]
    }; //end option
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

=======================================================

没有和数据库结合的演示页面，里面有每个参数的详细注释

简单柱状图:Bar1Nosql.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${bathPath }">
    <title>echarts案例-柱状图</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
<script src="js/echarts.common.min.js"></script>  
</head>
 
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的显示区域 -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;" ></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
            title: {
                text: 'ECharts 入门示例',
                link:'http://echarts.baidu.com/index.html'
            },
            tooltip: {
            	show:true,
            	trigger:'item'  //axis-坐标轴触发  item--数据条目触发
            	},
            legend: {
                data:['销量'],
                show:true
            },
            xAxis: {
            	position:'bottom',  //top
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
            	show:true,
            	position:'left'   //right
            },
            series: [{
                name: '销量',  //要和legend中的data对应起来
                type: 'bar',  //pie-饼图，bar-柱状图,line-折线图
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

================================================

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${bathPath }">
    <title>echarts案例-柱状图</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
<script src="js/echarts.common.min.js"></script>  
</head>
 
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的显示区域 -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;" ></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
            title: {
                text: 'ECharts 入门示例',
                link:'http://echarts.baidu.com/index.html'
            },
            tooltip: {
            	show:true,
            	trigger:'item'  //axis-坐标轴触发  item--数据条目触发
            	},
            legend: {
                data:['销量','库存'],
                show:true
            },
            xAxis: {
            	position:'bottom',  //top
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
            	show:true,
            	position:'left'   //left
            },
            series: [{
                name: '销量',  //要和legend中的data对应起来
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
            ,{
                name: '库存',
                type: 'bar',   //pie-饼图，bar-柱状图,line-折线图
                data: [5, 15, 8, 20, 33, 43]
            }]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

=================================================

饼图:pie.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="${bathPath }">
    <title>echarts案例-饼图</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
<script src="js/echarts.common.min.js"></script>   
  </head>
  
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title : {
        text: '某站点用户访问来源',    //标题
        subtext: '纯属虚构',        //父标题
        x:'center'
        },
    tooltip : {
        trigger: 'item',
        //折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
        //饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            //饼图的半径，数组的第一项是内半径，第二项是外半径(相对于容器)。
            radius : '55%',  //[0, '75%'] 
            //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
			//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
            center: ['50%', '60%'],//[400, 300]
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>