时间轴折线图
<%--
Created by IntelliJ IDEA.
User: Xxg
Date: 2021/9/29
Time: 16:08
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script>
var name=['C1', 'C11', 'C12', 'C13', 'C14', 'C15', 'C16', 'C17', 'C18', 'C19', 'C2', 'C20', 'C23', 'C24', 'C25', 'C27', 'C29', 'C30', 'C31', 'C32', 'C33', 'C34', 'C36', 'C37', 'C38', 'C39',' C41', 'C42', 'C43', 'C6', 'C7'];
function a() {
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var dataMap = {};
function dataFormatter(obj) {
// prettier-ignore
var pList = name;
var temp;
for (var year = 2002; year <= 2011; year++) {
var max = 0;
var sum = 0;
temp = obj[year];
for (var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += temp[i];
obj[year][i] = {
name: pList[i],
value: temp[i]
};
}
obj[year + 'max'] = Math.floor(max / 100) * 100;
obj[year + 'sum'] = sum;
}
return obj;
}
// prettier-ignore
dataMap.dataCnt = dataFormatter({
//max : 60000,
2011: [45152,
3662,
3702,
10892,
18796,
4747,
5992,
6040,
27789,
3065,
16997,
296,
20599,
79914,
24251,
443,
13236,
5993,
34348,
116046,
4210,
12780,
3648,
23,
30065,
5508,
2592,
658,
48814,
7856,
84633
],
2010: [45880,
3890,
3654,
11154,
21352,
5237,
6429,
5992,
28093,
3153,
17770,
336,
22846,
88186,
26494,
507,
14096,
7721,
38553,
129137,
4734,
13176,
4029,
21,
35857,
6008,
3731,
768,
57287,
8707,
95461
],
2009: [60519,
4548,
5295,
14392,
36485,
6467,
8290,
7722,
34387,
4136,
23871,
323,
33376,
112430,
37737,
719,
18379,
8,
9601,
57040,
206713,
7445,
16982,
4891,
23,
50188,
7386,
4463,
1067,
84495,
12027
],
2008: [59000,
4624,
4956,
14054,
34669,
5753,
8312,
7518,
35546,
4185,
22935,
410,
33287,
104957,
34844,
682,
19176,
4,
9737,
56857,
195396,
6749,
17353,
4424,
26,
48454,
7652,
4578,
1102,
84330,
11646
],
2007: [61841,
4180,
5181,
14528,
36508,
6521,
8277,
8040,
35786,
4154,
23419,
208,
35437,
100935,
35034,
761,
19887,
6,
9881,
57767,
202250,
7293,
17624,
4435,
20,
48883,
7876,
1,
4752,
1162,
86849
],
2006: [62207, 4151, 5253, 14081, 35700, 6085, 8934, 7928, 35862, 4178, 23070, 203, 2, 34650, 99917, 36731, 739, 20740, 6, 9117, 56391, 202171, 7229, 18572, 4435, 27, 48995, 7786, 4308, 1065, 87776],
2005: [59921, 4576, 5818, 14985, 34774, 5542, 8904, 7461, 32688, 4389, 22537, 139, 33473, 92928, 35521, 741, 20551, 6, 9521, 54393, 194883, 7128, 19329, 4121, 21, 47075, 7680, 3603, 715, 84800, 12686],
2004: [42539, 2765, 3919, 11062, 16775, 3929, 5937, 5677, 22401, 2941, 15739, 70, 20684, 64834, 24526, 476, 13423, 6580, 33330, 103657, 4403, 14001, 3237, 9, 29693, 4788, 1853, 528, 49790, 8749, 75362],
2003: [39732, 2874, 4103, 10478, 15863, 3817, 5495, 5604, 20862, 2902, 14183, 49, 19140, 63080, 24705, 418, 11659, 5762, 30015, 100688, 4221, 14703, 3241, 18, 27308, 4505, 2247, 575, 48203, 8277, 69451],
2002: [38806, 2726, 4306, 10420, 15935, 3577, 5634, 5577, 19830, 2953, 15277,116, 19880, 65290, 24226, 450, 11931, 6667, 29825, 107563, 4059, 14609, 2632, 11, 27661, 5446, 2509, 1034, 49721, 9865, 72581,]
});
dataMap.dataMoney = dataFormatter({
//max : 3200,单位为千元
2011: [37265.420,
1918.020,
2848.650,
7779.580,
14505.100,
2425.630,
3366.650,
2900.410,
15844.110,
1886.829,
9415.496,
133.560,
16020.720,
70080.960,
18200.670,
169.390,
8621.070,
3943.500,
28386.650,
87008.748,
3372.440,
7820.090,
2200.700,
50.360,
23951.590,
5493.620,
1959.990,
398.890,
42627.500,
5359.920,
81902.249
],
2010: [38233.640,
2063.640,
2829.240,
7949.850,
16388.580,
2632.010,
3610.680,
3009.190,
16222.760,
1910.020,
9993.780,
202.290,
17920.648,
76325.770,
20002.130,
187.280,
9200.560,
4590.690,
31526.150,
96001.228,
3688.660,
8365.000,
2436.900,
31.010,
28344.270,
6312.500,
3443.410,
449.060,
50157.650,
6163.350,
90901.913
],
2009: [49798.520,
2496.460,
4369.150,
9972.580,
29092.100,
3244.970,
4656.950,
4179.370,
19773.950,
2438.980,
13129.320,
173.190,
25550.940,
96513.570,
28711.438,
283.320,
11755.430,
0,
5742.100,
46768.720,
158916.120,
5493.610,
10674.530,
2978.060,
29.610,
38665.140,
8201.090,
4251.940,
562.910,
73341.110,
8005.860
],
2008: [48724.420,
2544.910,
4257.980,
10111.640,
27498.150,
2823.470,
4637.390,
3821.170,
20790.130,
2565.060,
12425.660,
170.800,
26310.450,
91139.292,
26810.250,
264.130,
12605.950,
0,
5700.010,
46499.860,
148641.821,
5361.830,
10830.130,
2699.040,
34.260,
37954.170,
7986.440,
4248.310,
567.150,
74572.790,
7882.570
],
2007: [50176,740,
2190.030,
4445.960,
10376.360,
28509.152,
3145.980,
4662.050,
4200.910,
20601.550,
2406.840,
12663.740,
75.930,
27604.440,
88315.176,
27017.178,
277.100,
12635.480,
6.000,
5865.320,
46327.580,
151337.390,
5772.940,
11269.650,
2594.980,
27.910,
37136.630,
8179.910,
0.440,
4480.080,
621.880
],
2006: [51225.470,
2245.830,
4392.210,
9855.550,
27913.730,
2855.630,
4796.700,
4142.760,
20347.260,
2515.320,
12644.046,
83.080,
2.400,
27449.090,
86886.235,
28037.478,
276.310,
12804.910,
0,
5272.991,
44910.210,
151214.312,
5460.390,
11625.120,
2684.210,
36.230,
37457.100,
8134.870,
3806.040,
587.790,
75400.290
],
2005: [48836.800,
2412.650,
4801.320,
10146.990,
26690.270,
2679.850,
4811.400,
4015.860,
18575.770,
2613.841,
12012.260,
56.870,
25767.370,
80547.051,
26705.240,
247.920,
13063.350,
0,
5523.010,
42881.884,
143870.010,
5296.250,
11576.360,
2404.860,
26.390,
36068.700,
8013.360,
2851.260,
353.410,
72185.660,
8327.960
],
2004: [33545.160,
1430.430,
3135.920,
7578.270,
12678.376,
1888.880,
3164.170,
2858.960,
12322.460,
1749.410,
8088.610,
31.390,
15846.910,
53611.140,
17358.160,
160.850,
8725.990,
3720.410,
26056.100,
73974.296,
3314.270,
8520.786,
1825.470,
8.970,
22999.570,
5032.240,
1537.120,
376.580,
42010.350,
5802.690,
70040.700
],
2003: [32375.130, 1477.790, 3020.140, 7233.810, 11588.970, 1911.230, 2927.900, 2827.650, 11392.800, 1696.900, 7670.620, 23.380, 14382.510, 51970.160, 17629.890, 157.800, 7333.500, 3363.460, 23582.260, 70118.680, 3138.410, 8845.550, 1826.730, 25.430, 20842.640, 5043.910, 1862.820, 401.950, 39534.860, 5487.790, 62399.130],
2002: [31314.180, 1435.340, 3294.880, 7253.380, 11231.630, 1821.270, 2964.940, 2755.990, 10978.260, 1677.780, 8083.890, 53.660, 14834.730, 52127.285, 17426.539, 149.530, 7223.820, 4133.090, 23325.660, 72836.130, 2955.930, 8822.900, 1509.860, 14.680, 20377.690, 5966.290, 1998.560, 631.300, 39434.540, 6456.110, 63631.626,]
});
option = {
baseOption: {
timeline: {
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: true,
// currentIndex: 2,
playInterval: 1000,
// controlStyle: {
// position: 'left'
// },
data: [
'0901',
'0902',
'0903',
{
value: '0904',
tooltip: {
formatter: '{b} GDP达到一个高度'
},
symbol: 'diamond',
symbolSize: 16
},
'0905',
'0906',
'0907',
'0908',
'0909',
{
value: '0910',
tooltip: {
formatter: function (params) {
return params.name + 'GDP达到又一个高度';
}
},
symbol: 'diamond',
symbolSize: 18
}
],
label: {
formatter: function (s) {
return new Date(s).getFullYear();
}
}
},
title: {
subtext: '数据来自国家统计局'
},
tooltip: {},
legend: {
left: 'right',
data: [ '交易次数', '金额'],
selected: {
交易次数:true,
金额: true,
}
},
calculable: true,
grid: {
top: 80,
bottom: 100,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
formatter: function (params) {
return params.value.replace('
', '');
}
}
}
}
},
xAxis: [
{
type: 'category',
axisLabel: { interval: 0 },
data: ['C1', 'C11','C12', 'C13', 'C14', 'C15', 'C16', 'C17', 'C18', 'C19', 'C2', 'C20', 'C23', 'C24', 'C25', 'C27', 'C29', 'C30', 'C31', 'C32', 'C33', 'C34', 'C36', 'C37', 'C38', 'C39',' C41', 'C42', 'C43', 'C6', 'C7'],
splitLine: { show: false }
}
],
yAxis: [
{
type: 'value',
name: 'GDP（亿元）'
}
],
series: [
{ name: '交易次数', type: 'bar' },
{ name: '金额', type: 'bar' }
]
},
options: [
{
title: { text: '2021-9-1交易详情' },
series: [
{ data: dataMap.dataCnt['2002'] },
{ data: dataMap.dataMoney['2002'] }
]
},
{
title: { text: '2021-9-2交易详情' },
series: [
{ data: dataMap.dataCnt['2003'] },
{ data: dataMap.dataMoney['2003'] }
]
},
{
title: { text: '2021-9-3交易详情' },
series: [
{ data: dataMap.dataCnt['2004'] },
{ data: dataMap.dataMoney['2004'] }
]
},
{
title: { text: '2021-9-4交易详情' },
series: [
{ data: dataMap.dataCnt['2005'] },
{ data: dataMap.dataMoney['2005'] }
]
},
{
title: { text: '2021-9-5交易详情' },
series: [
{ data: dataMap.dataCnt['2006'] },
{ data: dataMap.dataMoney['2006'] }
]
},
{
title: { text: '2021-9-6交易详情' },
series: [
{ data: dataMap.dataCnt['2007'] },
{ data: dataMap.dataMoney['2007'] }
]
},
{
title: { text: '2021-9-7交易详情' },
series: [
{ data: dataMap.dataCnt['2008'] },
{ data: dataMap.dataMoney['2008'] }
]
},
{
title: { text: '2021-9-8交易详情' },
series: [
{ data: dataMap.dataCnt['2009'] },
{ data: dataMap.dataMoney['2009'] }
]
},
{
title: { text: '2021-9-9交易详情' },
series: [
{ data: dataMap.dataCnt['2010'] },
{ data: dataMap.dataMoney['2010'] }
]
},
{
title: { text: '2021-9-10交易详情' },
series: [
{ data: dataMap.dataCnt['2011'] },
{ data: dataMap.dataMoney['2011'] }
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
</head>
<body>
<form action="/web_war_exploded/Servlet?method=query" method="post">
<button onclick="a();">柱状图</button>
</form>
<div id = 'main' style=" 90%;height:90%;float:right;border: 0px solid red;margin-top: 0%" >
</div>
</body>
</html>
2.时间轴柱状图
<%-- Created by IntelliJ IDEA. User: Xxg Date: 2021/10/6 Time: 16:16 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>折线图</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="js/echarts.min.js"></script> <script> function sortId(a,b) { var date1 = new Date(a.day); var date2 = new Date(b.day); if (date1>date2){ return 1; }else{ return -1; } } function c() { var json=[]; var date=[]; var money=[]; var datas=[]; var url = "/web_war_exploded/Servlet?method=query2"; $.ajax({ type: "get", url: url, dataType: 'json', async:true, success: function(result){ alert(1); json = eval(result) // console.log(json[1].day_id); // console.log(json); for(var i = 0;i<json.length;i++){ var data={}; if (json[i].day_id<10){ data['day']='2021-09-0'+json[i].day_id; }else{ data['day']='2021-09-'+json[i].day_id; } data['sale']=json[i].sale_number; datas.push(data); } //排序 datas.sort(sortId); for (var j = 0;j<datas.length;j++){ date[j]=datas[j].day; money[j]=datas[j].sale; } // 输出日期数组 console.log(date) // 输出交易额 console.log(money) // 输出截取后的数组 //echarts var chartDom = document.getElementById('main3'); var myChart = echarts.init(chartDom); var option; let base = +new Date(2021, 9, 1); let oneDay = 24 * 3600 * 1000; let data_e = [Math.random() * 30]; for (let i = 1; i < 30; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth(), now.getDate()].join('/')); data_e.push(Math.round((Math.random() - 0.5) * 20)); } // 截取 var b = date.splice(29); console.log(b) option = { tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: '2021年9月C9机场的交易次数折线图' }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, dataZoom: [ { type: 'inside', start: 0, end: 10 }, { start: 0, end: 10 } ], series: [ { name: '交易次数', type: 'line', symbol: 'none', sampling: 'lttb', itemStyle: { color: 'rgb(255, 70, 131)' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgb(255, 158, 68)' }, { offset: 1, color: 'rgb(255, 70, 131)' } ]) }, data: money } ] }; option && myChart.setOption(option); }, error: function(){ alert("error"); } }); } </script> </head> <body> <form action="#" method="post"> <a type="button" onclick="c();">折线图(请确定hadoop集群已启动)</a> </form> <div id = 'main3' style=" 90%;height:90%;float:right;border: 0px solid red;margin-top: 0%" > </div> </body> </html>
3.饼图
<%-- Created by IntelliJ IDEA. User: Xxg Date: 2021/10/6 Time: 8:47 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>饼图</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="js/echarts.min.js"></script> <script> function b() { var json=[]; var jsonData=[]; var datas=[]; var url = "/web_war_exploded/Servlet?method=query"; $.ajax({ type: "get", url: url, dataType: 'json', async:true, success: function(result){ alert(1); json = eval(result) // console.log(json[1].day_id); // console.log(json); for(var i = 0;i<json.length;i++){ var data={}; data['value'] = parseInt(json[i].cnt); data['name'] = json[i].sale_nbr.replace(/"/g, "'"); datas.push(data); } console.log(datas); // jsonData = JSON.stringify(datas); var chartDom = document.getElementById('main2'); var myChart = echarts.init(chartDom); var option; option = { title:{ text:'2021年9月1日各个代理商之间的销售分析' }, legend: { top: 'bottom' }, tooltip:{ trigger:'item', formatter:"{b}：{c}({d}%)" }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, series: [ { name: '2021年9月1日各个代理商的销售分析', type: 'pie', radius: [50, 250], center: ['50%', '50%'], roseType: 'area', itemStyle: { borderRadius: 8 }, data: datas } ] }; option && myChart.setOption(option); }, error: function(){ //alert("error"); } }); } </script> </head> <body> <form action="#" method="post"> <a type="button" onclick="b();">饼图(请确定hadoop集群已启动)</a> </form> <div id = 'main2' style=" 90%;height:90%;float:right;border: 0px solid red;margin-top: 0%" > </div> </body> </html>