菜鸟笔记（二）echarts

最新推荐文章于 2024-06-07 10:28:47 发布

原创最新推荐文章于 2024-06-07 10:28:47 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

IT 同时被 2 个专栏收录

2 篇文章

订阅专栏

echarts

1 篇文章

订阅专栏

本文介绍如何使用ECharts创建动态数据统计图表，包括初始化图表、设置标题、工具栏及自定义数据系列。同时，讲解了Spring Boot中定时任务的实现方法，如设置每日特定时间执行的任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

菜鸟笔记之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);
   }

series中的数据格式如下：

series={
			//数据名称
            name:statsName,
            type:'line',
            //是否是曲线，如果是则为true，如果不是，则为false
            smooth:true,
            //数据，可存数组，或单独的值，此处的YArray是从后台传入的数据的数组
            //可以根据需求对数组进行处理，处理好了直接放在data属性中即可
            data:YArray,
            //线条当中被标记的点，一个最大值，一个最小值
            markPoint:{
            	data:[
                	{type:'max',name:'最大值'},
                	{type:'min',name:'最小值'}
            	]
        	}
        };