ECharts 的官网:http://echarts.baidu.com/
点击实例下面的官方实例就可以看到官方给出的各种实例:
使用ECharts首先 先要下载 ECharts 的js 也就是 echarts.js,这里下载你需要的版本就可以了
然后在你的jsp页面引入 echarts.js,我用的js是echarts.min.js 直接用下载之后就可以
<script type="text/javascript" src="<%=path%>/js/echarts.min.js"></script>
在给一个显示的标签,我这里给定了宽度和高度
<div id="wangmx" style="width: 800px;height:400px;"></div>
实例化ECharts
var myChart = echarts.init(document.getElementById('wangmx'));
点开你想要用的js实例,复制右边的全部代码, 粘贴到你的jsp页面
使用刚才指定的配置项和数据
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
之后启动项目访问jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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">
<script type="text/javascript" src="<%=path%>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/echarts.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/echarts.style.js" ></script>
<script type="text/javascript">
$(function(){
var myChart = echarts.init(document.getElementById('main'));
var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
option = {
title: {
/* text: '特性示例:渐变色 阴影 点击缩放', */
/* subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom' */
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
type: 'bar',
itemStyle: {
normal: {color: 'rgba(0,0,0,0.05)'}
},
barGap:'-100%',
barCategoryGap:'40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
}
},
data: data
}
]
};
// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
</script>
</head>
<body>
<div id="main" style="width: 800px;height:400px;"></div>
</body>
</html>
js下载地址 github:https://github.com/2224132867/ECharts-js