| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <%@ page contentType="text/html; charset=utf-8" session="false" %>
- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>我的工作台</title>
- <%@ include file="../common/header.jsp" %>
- <script type="text/javascript" src="${contextPath }/js/calendar/WdatePicker.js"></script>
- <script type="text/javascript" src="${contextPath}/js/echarts.min.js"></script>
- <script type="text/javascript">
- var myChart,option;
-
- $(document).ready( function(){
-
- // 基于准备好的dom，初始化echarts实例
- myChart = echarts.init(document.getElementById('main'));
- queryDate();
-
- //window.onresize = Charts.curCharts.resize;
-
- });
-
-
- function queryDate(){
- // 异步加载数据
- $.ajax({
- async: false,
- type: "post",
- dataType:"json", //返回类型json
- data: "beginDate=2015-1-1&endDate=2015-1-1",
- url: "${contextPath }/admin/chart/echartslist.html",
- error: function(){alert("系统错误");},
- success: function(json){
- if(json.status == "success"){
- option = {
- title: {
- text: '异步数据加载示例',
- subtext: '上海科湃腾信息科技有限公司',
- sublink: 'http://www.dairyinfo.com.cn/index.html',
- x: 'center',
- align: 'right'
- },
- //tooltip触点提示：为空默认显示
- tooltip: {
- //trigger: 'axis' 提示时显示纵向条
- trigger: 'axis',
- formatter: function(params) {
- return params[0].name + '<br/>'
- + params[0].seriesName + ' : ' + params[0].value + ' (m^3/s)<br/>'
- + params[1].seriesName + ' : ' + params[1].value + ' (mm)';
- },
- axisPointer: {
- animation: false
- }
- },
- legend: { //设置线的名称集合、要和series中的name对应
- data:['产奶量','水量'],
- x: 'left'
- },
- dataZoom: [
- {
- show: true,
- realtime: true,
- start: 60,
- end: 80
- },
- {
- type: 'inside',
- realtime: true,
- start: 60,
- end: 80
- }
- ],
- xAxis: [{
- data: ['2009/6/12 2:00', '2009/6/12 3:00']
- }],
- yAxis: [
- {
- name: '产奶量',
- type: 'value',
- max: 500
- },
- {
- name: '水量',
- nameLocation: 'start',
- max: 50,
- type: 'value',
- //inverse: true
- }
- ],
- series: [
- {
- name:'产奶量',
- type:'line',
- hoverAnimation: false,
- areaStyle: {
- normal: {}
- },
- lineStyle: {
- normal: {
- width: 1
- }
- },
- data:[
- 11,444
- ]
- },
- {
- name:'水量',
- type:'line',
- yAxisIndex:1,
- hoverAnimation: false,
- areaStyle: {
- normal: {}
- },
- lineStyle: {
- normal: {
- width: 1
- }
- },
- data: [
- 34,7
- ]
- }
- ]
- };
- loadEChrts(json.Serieslists);
-
- }
- }
- });
-
- }
-
- function loadEChrts(Serieslists){
- //$.each(Serieslists, function(i, n){
- // alert(i+" n.name:"+n.name+" ^^^^ n.data:"+n.data);
- // option.series[i].name = n.name;
- // option.series[i].data = n.data;
- //});
- //option.xAxis[0].data.push("2016-3-1");
- //var data0 = option.series[0].name;
- //alert(data0);
- //option.series[0].name = "www";
- //option.legend.data[0]="winx";
- //option.series[0].name = "winx";
- //option.series[0].data = [19, 23, 45, 56, 23, 343, 454, 89, 343, 123, 45, 123];
-
-
- //$.each(Serieslists, function(i, n){
- // option.legend.data.push(n.name);
- // option.series.push({
- // name: n.name,
- // type: 'scatter', //图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
- // data: n.data
- // });
- //});
- myChart.setOption(option);
- }
-
- window.onresize = function () {
- myChart.resize(); //使第一个图表适应
- };
-
- </script>
- </head>
- <body style="background-color: #E0E0E0;">
- <div id="main" style="width: 100%;height:100%;"></div>
- </body>
- </html>
|
