echarts.jsp 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <%@ page contentType="text/html; charset=utf-8" session="false" %>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>我的工作台</title>
  6. <%@ include file="../common/header.jsp" %>
  7. <script type="text/javascript" src="${contextPath }/js/calendar/WdatePicker.js"></script>
  8. <script type="text/javascript" src="${contextPath}/js/echarts.min.js"></script>
  9. <script type="text/javascript">
  10. var myChart,option;
  11. $(document).ready( function(){
  12. // 基于准备好的dom,初始化echarts实例
  13. myChart = echarts.init(document.getElementById('main'));
  14. queryDate();
  15. //window.onresize = Charts.curCharts.resize;
  16. });
  17. function queryDate(){
  18. // 异步加载数据
  19. $.ajax({
  20. async: false,
  21. type: "post",
  22. dataType:"json", //返回类型json
  23. data: "beginDate=2015-1-1&endDate=2015-1-1",
  24. url: "${contextPath }/admin/chart/echartslist.html",
  25. error: function(){alert("系统错误");},
  26. success: function(json){
  27. if(json.status == "success"){
  28. option = {
  29. title: {
  30. text: '异步数据加载示例',
  31. subtext: '上海科湃腾信息科技有限公司',
  32. sublink: 'http://www.dairyinfo.com.cn/index.html',
  33. x: 'center',
  34. align: 'right'
  35. },
  36. //tooltip触点提示:为空默认显示
  37. tooltip: {
  38. //trigger: 'axis' 提示时显示纵向条
  39. trigger: 'axis',
  40. formatter: function(params) {
  41. return params[0].name + '<br/>'
  42. + params[0].seriesName + ' : ' + params[0].value + ' (m^3/s)<br/>'
  43. + params[1].seriesName + ' : ' + params[1].value + ' (mm)';
  44. },
  45. axisPointer: {
  46. animation: false
  47. }
  48. },
  49. legend: { //设置线的名称集合、要和series中的name对应
  50. data:['产奶量','水量'],
  51. x: 'left'
  52. },
  53. dataZoom: [
  54. {
  55. show: true,
  56. realtime: true,
  57. start: 60,
  58. end: 80
  59. },
  60. {
  61. type: 'inside',
  62. realtime: true,
  63. start: 60,
  64. end: 80
  65. }
  66. ],
  67. xAxis: [{
  68. data: ['2009/6/12 2:00', '2009/6/12 3:00']
  69. }],
  70. yAxis: [
  71. {
  72. name: '产奶量',
  73. type: 'value',
  74. max: 500
  75. },
  76. {
  77. name: '水量',
  78. nameLocation: 'start',
  79. max: 50,
  80. type: 'value',
  81. //inverse: true
  82. }
  83. ],
  84. series: [
  85. {
  86. name:'产奶量',
  87. type:'line',
  88. hoverAnimation: false,
  89. areaStyle: {
  90. normal: {}
  91. },
  92. lineStyle: {
  93. normal: {
  94. width: 1
  95. }
  96. },
  97. data:[
  98. 11,444
  99. ]
  100. },
  101. {
  102. name:'水量',
  103. type:'line',
  104. yAxisIndex:1,
  105. hoverAnimation: false,
  106. areaStyle: {
  107. normal: {}
  108. },
  109. lineStyle: {
  110. normal: {
  111. width: 1
  112. }
  113. },
  114. data: [
  115. 34,7
  116. ]
  117. }
  118. ]
  119. };
  120. loadEChrts(json.Serieslists);
  121. }
  122. }
  123. });
  124. }
  125. function loadEChrts(Serieslists){
  126. //$.each(Serieslists, function(i, n){
  127. // alert(i+" n.name:"+n.name+" ^^^^ n.data:"+n.data);
  128. // option.series[i].name = n.name;
  129. // option.series[i].data = n.data;
  130. //});
  131. //option.xAxis[0].data.push("2016-3-1");
  132. //var data0 = option.series[0].name;
  133. //alert(data0);
  134. //option.series[0].name = "www";
  135. //option.legend.data[0]="winx";
  136. //option.series[0].name = "winx";
  137. //option.series[0].data = [19, 23, 45, 56, 23, 343, 454, 89, 343, 123, 45, 123];
  138. //$.each(Serieslists, function(i, n){
  139. // option.legend.data.push(n.name);
  140. // option.series.push({
  141. // name: n.name,
  142. // type: 'scatter', //图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
  143. // data: n.data
  144. // });
  145. //});
  146. myChart.setOption(option);
  147. }
  148. window.onresize = function () {
  149. myChart.resize(); //使第一个图表适应
  150. };
  151. </script>
  152. </head>
  153. <body style="background-color: #E0E0E0;">
  154. <div id="main" style="width: 100%;height:100%;"></div>
  155. </body>
  156. </html>