用Echarts制作各种图表自己的源代码

来源：互联网发布：手机版解压软件编辑：程序博客网时间：2024/05/22 08:10

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'EcharsOne.jsp' starting page</title>


<script src="./js/esl.js"></script>
<script src="./js/jquery.js"></script>

<script type="text/javascript">
require.config({
paths:{
echarts:'./js/echarts',

'echarts/chart/map': './js/echarts-map',
}
});

var option1 = {
title:{
text:'竖向柱状图-曲线图',
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
calculable : true,
legend: {
data:['蒸发量','降水量']
},

xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],

series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,3.3]
},
{
name:'降水量',
type:'line',
data:[300, 500, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,2.3]
}
]
};


var option2={
title:{
text:'横向柱状图'
},
tooltip :{
trigger:'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {

show: true, //是否显示工具栏

feature: {

mark: true,

dataView: { readOnly: false }, //数据预览
dataZoom : '区域缩放',
dataZoomReset : '区域缩放后退',
dataView : '数据视图',
lineChart : '折线图切换',
barChart : '柱形图切换',

restore: true, //复原

saveAsImage: true //是否保存图片

}

} ,
calculable : true,
legend:{
data:['入侵检测','恶意软件']
},
xAxis:[
{
type:'value'
}
],
yAxis:[
{
type:'category',
data:['8点','9点','10点','11点','12点', '13点','14点','15点','16点','17点']
}
],
series:[
{
name:'入侵检测',
type:'bar',
//stack:'总量',
//itemStyle:{normal:{label:{show:true,postion:'inside'}}},
data:['100','20','50','35','150','121','25','35','15','1']
},
{
name:'恶意软件',
type:'bar',
//stack:'总量',
//itemStyle:{normal:{label:{show:true,postion:'inside'}}},
data:['10','20','50','65','150','181','10','5','6','7','1']
}
]

};


var option3 = {
title:{
text:'扇形'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'right',
data:['qq','msn','pps','ie','360']
},

calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : [80, 120],//半径，默认为Min(width, height) / 2 - 50, 传数组实现环形图，[内半径，外半径]
itemStyle :　{
normal : {//默认样式
label : {
show : true
},
labelLine : {
show : true
}
},
emphasis : {//强调样式（悬浮时样式
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'qq'},
{value:310, name:'msn'},
{value:234, name:'pps'},
{value:135, name:'ie'},
{value:1548, name:'360'}
]
}
]
};

var option4 = {
title : {
text: '动态数据',
},
tooltip : {
trigger: 'item'
},
legend: {
data:['随机数据1','随机数据2','随机数据3','随机数据4','随机数据5']
},

calculable : true,
series : [
{
name:'pie',
type:'pie',
radius : [0, 110],
center: [250, 225],
itemStyle :　{
normal : {//默认样式
label : {
show : true
},
labelLine : {
show : false
}
},
emphasis : {//强调样式（悬浮时样式
label : {
show : false,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data: (function(){
var res = [];
var len = 0;
while (len++ < 5) {
res.push({
name: '随机数据' + len,
value: Math.round(
Math.random()*10)
});
}
return res;
})()
}
]
};

var option6 = {
title:{
text:'折线图',
},
tooltip : {
trigger: 'axis'
},
calculable : true,
legend: {
data:['工资','买衣服','吃饭']
},

xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],

series : [
{
name:'工资',
type:'line',
data:[5000, 3500, 4500, 5500, 3040, 6050, 4040, 4000, 5050, 4010, 6500,7000]
},
{
name:'买衣服',
type:'line',
data:[300, 500, 1000, 200, 50, 80, 175, 1820, 48, 500, 600,230]
},
{
name:'吃饭',
type:'line',
data:[300, 500, 1000, 600, 500, 800, 1750, 1820, 480, 500, 600,230]
}
]
};

var option6 = {
title:{
text:'折线图',
},
tooltip : {
trigger: 'axis'
},
calculable : true,
legend: {
data:['工资','买衣服','吃饭']
},

xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],

series : [
{
name:'工资',
type:'line',
data:[5000, 3500, 4500, 5500, 3040, 6050, 4040, 4000, 5050, 4010, 6500,7000]
},
{
name:'买衣服',
type:'line',
data:[300, 500, 1000, 200, 50, 80, 175, 1820, 48, 500, 600,230]
},
{
name:'吃饭',
type:'line',
data:[300, 500, 1000, 600, 500, 800, 1750, 1820, 480, 500, 600,230]
}
]
};

$(function(){

echarone();

})

var echarone = function(){
require(
[
'echarts',

'echarts/chart/map',

],
function(ec) {

var myChart = ec.init(document.getElementById('main1'));
myChart.setOption(option1);

var myChart2=ec.init(document.getElementById('main2'));
myChart2.setOption(option2);

var myChart3=ec.init(document.getElementById('main3'));
myChart3.setOption(option3);

var myChart4=ec.init(document.getElementById('main4'));
myChart4.setOption(option4);



var myChart6=ec.init(document.getElementById('main6'));
myChart6.setOption(option6);

}
);
}


</script>

</head>

<body>
<br>
<div id="main1" style="height:300px;border:1px solid #ccc;padding:10px;"></div>
<div id="main2" style="height:400px;border:1px solid #ccc;padding:10px;"></div>
<div id="main3" style="height:350px; border:1px solid #ccc; padding:10px;"></div>
<div id="main4" style="height:350px; border:1px solid #ccc; padding:10px;"></div>

<div id="main6" style="height:300px;border:1px solid #ccc;padding:10px;"></div>

</body>

</html>

0 0

用Echarts制作各种图表 自己的源代码

用Echarts制作各种图表自己的源代码