一 简介
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','jack@qq.com','管理员');
INSERT INTO users VALUES(NULL,'麻子','123''mazi@qq.com','普通用户');
INSERT INTO users VALUES(NULL,'mike','123''mike@qq.com','普通用户');
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">
<input type="button" value="复杂柱状图" name="bar2">
<input type="button" value="饼图" name="pie">
</h2>
<h2>在单独的页面展示<br/>
<a href="ShowCharts.php?show=bar1" target="_blank">简单柱状图</a>
<a href="ShowCharts.php?show=bar2" target="_blank">复杂柱状图</a>
<a href="ShowCharts.php?show=pie" target="_blank">饼图</a>
</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>