时间轴折线图
<%-- 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>