百度 Echarts 的使用
一、Echarts 简介
官方网站：http://echarts.baidu.com/
下载地址：http://echarts.baidu.com/download.html
使用文档：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
官方示例：http://echarts.baidu.com/examples.html
二、Echarts 在 jsp 中的使用（柱状图）
1、引入 echarts.js 文件
2、jsp 页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/echarts.js"></script>
<title>柱状图</title>
<style type="text/css">
/* 设置 div 居中 */
div {
margin: 0 auto;
} marquee {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<marquee>柱状图</marquee>
<div id="chart" style="width: 500px; height: 400px"></div>
</body>
<script type="text/javascript">
/* 获取 echart 要防止的 div */
var dom = document.getElementById('chart');
/* 初始化echarts实例 */
var myChart = echarts.init(dom);
/* x 轴的数据 */
var xAxisData = [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ];
/* y 轴的数据 */
var yAxisData = [ 10, 52, 200, 334, 390, 330, 220 ]; // 指定图表的配置项和数据
var option = {
title : {
text : '柱状图',
left : 'center'
},
toolbox : {
feature : {
/* 数据试图 */
dataView : {
readOnly : false,
},
/* 还原图表*/
restore : {},
/* 保存为图片 */
saveAsImage : {}
}
},
color : [ '#3398DB' ],
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid : {
left : '3%',//条形图左边的预留
right : '10%',//条形图右边的预留
bottom : '10%',//条形图底部的预留
containLabel : true
},
xAxis : [ {
type : 'category',
name:"星期",
data : xAxisData,//给 x 坐标赋值
axisTick : {
alignWithLabel : true
}
} ],
yAxis : [ {
name:"数值",
type : 'value'
} ],
series : [ {
name : '数值',
type : 'bar',
barWidth : '50%',//设置条的宽度，如果为 100% 就是条形图
data : yAxisData
//给 y 坐标赋值
} ]
};
// 使用刚指定的配置项和数据显示图表。
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</html>
3、效果图
