菜鳥筆記之echarts

新建定時任務：

@Component
public class TimerTask {
//設定定時任務啟動的時間（如下為每天定時10點進行定時任務）
@Scheduled(cron = "0 00 10 * * ?")
public void TimerTest(){
    //定時任務所做的事
}

}

初始化日期控制元件，對開始日期以及結束日期進行條件限制

function initDatePicker(){
    		$("#beginTime").datepicker().on("click",function(ev){
    		   //開始時間設定為時間不得選擇晚於當日時間的日期
        		$("#beginTime").datepicker("setEndDate", new Date());
 			});
  			$("#endTime").datepicker().on("click",function(ev){
  				//結束時間設定為時間不得選擇早於開始時間的日期
       	 		$("#endTime").datepicker("setStartDate", $("#beginTime").val());
       	 		//結束時間設定為時間不得選擇晚於當日時間的日期
        		$("#endTime").datepicker("setEndDate", new Date());
    		});
}`
 

建立圖表

var chart = echarts.init(document.getElementById("charts"));
        var option={
            title : {
                text: '資料統計表'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
            	//圖表中的線條型別
                data:['會員','課程','文章','訂單','展館','活動']
            },
            grid: {
                left: '3%',
                right: '7%',
                top:'15%',
                bottom: '15%',
                containLabel: true
            },
            //圖示右上方的工具欄
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable:true,
            xAxis : [
                {
                    name:"日期",
                    nameGap:15,
                    type : 'category',
                    boundaryGap : false,
                    data : xArray,
                    axisLine: {            // 座標軸線
                        show: true,         // 預設顯示，屬性show控制顯示與否
                        lineStyle: {        // 屬性lineStyle控制線條樣式
                            color: '#48b',
                            width: 3,
                            type: 'solid'
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLine: {            // 座標軸線
                        show: true,         // 預設顯示，屬性show控制顯示與否
                        lineStyle: {        // 屬性lineStyle控制線條樣式
                            color: '#48b',
                            width: 3,
                            type: 'solid'
                        }
                    },
                    splitArea:{
                        interval:"auto",
                        show:true,
                        areaStyle:{
                            color:['rgba(250,250,250,0.3)','rgba(242, 242, 242,0.7)'],
                            shadowColor:"red",
                            opacity:1
                        }
                    }
                }
            ],
            //此處是圖表的資料，根據後臺傳入的資料傳值完成
            series : data
        };
        chart.setOption(option,true);
   }