echarts折线图实例一

- 日理万妓 2022-06-08 12:54 315阅读 0赞

1.先看看我们要的一个效果：在点击显示30天和显示2天，数据可以切换，并且另外还要加一个时间区域查询出来；接下来我贴一下具体的操作：![20170926122012950][]

2.以上边的为例，根据回来的数据结构进行解析：

//拿2天的数据
    var data2yespv=[];
    var data2todpv=[];
    var data2yesuv=[];
    var data2toduv=[];

$.ajax({
    	    type: "GET",
    	    url: "json/getTwoDayWebView.json",
    	    dataType:'json',
    	    data: "",
    	    success: function(data){
    	    	for (key in data.yesterDay.uv){data2yesuv.push(data.yesterDay.uv[key])};
    	    	for (key in data.yesterDay.pv){data2yespv.push(data.yesterDay.pv[key])};
    	    	for (key in data.toDay.uv){data2toduv.push(data.toDay.uv[key])};
    	    	for (key in data.toDay.pv){data2todpv.push(data.toDay.pv[key])};
    	    	
    			clickData2();
    	    }
    	});

调用函数，写入上下俩个图，需要注意的是下面这句话，如果你要进行echarts图表的刷新，必须写成这样，要不然数据会累加；

echartsWarppv.setOption(option,true);

function clickData2(){
    	// 基于准备好的dom，初始化echarts实例
        var echartsWarppv = echarts.init(document.getElementById('echartsWarppv'));
        option = {
    	    title: {
    	        text: '最近2天pv图',
    	        textStyle:{
    	        	color: 'blue',
    				fontStyle: 'normal',
    				fontWeight: 'normal',
    				fontFamily: '微软雅黑',
    				fontSize: fontsize12,
    	        }
    	    },
    	    tooltip: {
    	        trigger: 'axis'
    	    },
    	    legend: {
    	        data:['昨日pv','今日pv']
    	    },
    	    grid: {
    	        left: '3%',
    	        right: '4%',
    	        bottom: '3%',
    	        containLabel: true
    	    },
    	    xAxis: {
    	        type: 'category',
    	        boundaryGap: false,
    	        data: ['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','21:00','22:00','23:00']
    	    },
    	    yAxis: {
    	        type: 'value'
    	    },
    	    series: [
    	        {
    	            name:'昨日pv',
    	            type:'line',
    	            smooth:true,
    	            stack: '总量',
    	            data:data2yespv
    	        },
    	        {
    	            name:'今日pv',
    	            type:'line',
    	            smooth:true,
    	            stack: '总量',
    	            data:data2todpv
    	        }
    	    ]
    	};
        echartsWarppv.setOption(option,true);
        //-----------------------------------------------------------------
        var echartsWarpuv = echarts.init(document.getElementById('echartsWarpuv'));
        option = {
    	    title: {
    	        text: '最近2天uv图',
    	        textStyle:{
    	        	color: 'blue',
    				fontStyle: 'normal',
    				fontWeight: 'normal',
    				fontFamily: '微软雅黑',
    				fontSize: fontsize12,
    	        }
    	    },
    	    tooltip: {
    	        trigger: 'axis'
    	    },
    	    legend: {
    	        data:['昨日uv','今日uv']
    	    },
    	    grid: {
    	        left: '3%',
    	        right: '4%',
    	        bottom: '3%',
    	        containLabel: true
    	    },
    	    xAxis: {
    	        type: 'category',
    	        boundaryGap: false,
    	        data: ['0:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','21:00','22:00','23:00']
    	    },
    	    yAxis: {
    	        type: 'value'
    	    },
    	    series: [
    	        {
    	            name:'昨日uv',
    	            type:'line',
    	            smooth:true,
    	            stack: '总量',
    	            data:data2yesuv
    	        },
    	        {
    	            name:'今日uv',
    	            type:'line',
    	            smooth:true,
    	            stack: '总量',
    	            data:data2toduv
    	        }
    	    ]
    	};
        echartsWarpuv.setOption(option,true);
    }

3.到现在，俩个图加载出来了；然后点击显示30天，进行的操作是什么呢？

其实你会发现，除了option变化之外，其他的没有发生变化，这里其实可以封装一下的。。。

function clickData30(){
    	// 基于准备好的dom，初始化echarts实例
        var echartsWarppv = echarts.init(document.getElementById('echartsWarppv'));
        var option = {
    	    title: {
    	        text: '最近30天pv图',
    	        textStyle:{
    	        	color: 'blue',
    				fontStyle: 'normal',
    				fontWeight: 'normal',
    				fontFamily: '微软雅黑',
    				fontSize: fontsize12,
    	        }
    	    },
    	    tooltip: {
    	        trigger: 'axis'
    	    },
    	    legend: {
    	        data:['pv']
    	    },
    	    grid: {
    	        left: '3%',
    	        right: '4%',
    	        bottom: '3%',
    	        containLabel: true
    	    },
    	    xAxis: {
    	        type: 'category',
    	        boundaryGap: false,
    	        data: data30key
    	    },
    	    yAxis: {
    	        type: 'value'
    	    },
    	    series: [
    	        {
    	            name:'pv',
    	            type:'line',
    	            smooth:true,
    	            stack: '总量',
    	            data:data30valuepv
    	        }
    	    ]
    	};
        echartsWarppv.setOption(option, true);
    	//-----------------------------------------------------------------
        var echartsWarpuv = echarts.init(document.getElementById('echartsWarpuv'));
        option = {
    	    title: {
    	        text: '最近30天uv图',
    	        textStyle:{
    	        	color: 'blue',
    				fontStyle: 'normal',
    				fontWeight: 'normal',
    				fontFamily: '微软雅黑',
    				fontSize: fontsize12,
    	        }
    	    },
    	    tooltip: {
    	        trigger: 'axis'
    	    },
    	    legend: {
    	        data:['uv']
    	    },
    	    grid: {
    	        left: '3%',
    	        right: '4%',
    	        bottom: '3%',
    	        containLabel: true
    	    },
    	    xAxis: {
    	        type: 'category',
    	        boundaryGap: false,
    	        data: data30key
    	    },
    	    yAxis: {
    	        type: 'value'
    	    },
    	    series: [
    	        {
    	            name:'uv',
    	            type:'line',
    	            smooth:true,
    	            stack: '总量',
    	            data:data30valueuv
    	        }
    	    ]
    	};
        // 使用刚指定的配置项和数据显示图表。
        echartsWarpuv.setOption(option,true);
    }

4.最后有一个时间段查询，像下面：这里用的是jqueryUI的时间插件

![20170926125342485][]

需要进行的代码操作：

function timeArea(){
    	var timestart=$('#datepicker').val().replace(/-/g, "");//转换时间格式
    	var timeend=$('#datepicker2').val().replace(/-/g, "");
    	if(timestart&&timeend){
    		var dataAreapv=[];
    		var dataAreauv=[];
    		var dataAreakey=[];
    		var start,end;
    		for(var i=0;i<data30key.length;i++){
    			data30key[i]==timestart?start=i:"";
    			data30key[i]==timeend?end=i:""; 
    		}
    		dataAreakey=data30key.slice(start,end+1);
    		dataAreapv=data30valuepv.slice(start,end+1);
    		dataAreauv=data30valueuv.slice(start,end+1);
    		
    		// 基于准备好的dom，初始化echarts实例
    	    var echartsWarppv = echarts.init(document.getElementById('echartsWarppv'));
    	    var option = {
    		    title: {
    		        text: timestart+'到'+timeend+'pv图',
    		        textStyle:{
    		        	color: 'blue',
    					fontStyle: 'normal',
    					fontWeight: 'normal',
    					fontFamily: '微软雅黑',
    					fontSize: fontsize12,
    		        }
    		    },
    		    tooltip: {
    		        trigger: 'axis'
    		    },
    		    legend: {
    		        data:['pv']
    		    },
    		    grid: {
    		        left: '3%',
    		        right: '4%',
    		        bottom: '3%',
    		        containLabel: true
    		    },
    		    xAxis: {
    		        type: 'category',
    		        boundaryGap: false,
    		        data: dataAreakey
    		    },
    		    yAxis: {
    		        type: 'value'
    		    },
    		    series: [
    		        {
    		            name:'pv',
    		            type:'line',
    		            smooth:true,
    		            stack: '总量',
    		            data:dataAreapv
    		        }
    		    ]
    		};
    	    echartsWarppv.setOption(option, true);
    		//-----------------------------------------------------------------
    	    var echartsWarpuv = echarts.init(document.getElementById('echartsWarpuv'));
    	    option = {
    		    title: {
    		        text: timestart+'到'+timeend+'uv图',
    		        textStyle:{
    		        	color: 'blue',
    					fontStyle: 'normal',
    					fontWeight: 'normal',
    					fontFamily: '微软雅黑',
    					fontSize: fontsize12,
    		        }
    		    },
    		    tooltip: {
    		        trigger: 'axis'
    		    },
    		    legend: {
    		        data:['uv']
    		    },
    		    grid: {
    		        left: '3%',
    		        right: '4%',
    		        bottom: '3%',
    		        containLabel: true
    		    },
    		    xAxis: {
    		        type: 'category',
    		        boundaryGap: false,
    		        data: dataAreakey
    		    },
    		    yAxis: {
    		        type: 'value'
    		    },
    		    series: [
    		        {
    		            name:'uv',
    		            type:'line',
    		            smooth:true,
    		            stack: '总量',
    		            data:dataAreauv
    		        }
    		    ]
    		};
    	    // 使用刚指定的配置项和数据显示图表。
    	    echartsWarpuv.setOption(option,true);
    	}
    }

还有jqueryUId时间插件的用法：

//时间插件
    	$('#datepicker').datepicker({
    		maxDate: "+0D",
    		dateFormat:"yy-mm-dd"
    	});
    	$('#datepicker2').datepicker({
    		maxDate: "+0D",
    		dateFormat:"yy-mm-dd"
    	});

[20170926122012950]: /images/20220608/ec237937cc0e4f7d9bd8da2c74616fcd.png
[20170926125342485]: /images/20220608/3743aadca2ec4e01841d7e2ad00aa4b2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，315人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts折线图

记录echarts折现图配置我们先来看看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

拼搏现实的明天。/ 2022年11月18日 13:44/ 0 赞/ 269 阅读

相关 ECharts绘制折线图

首先看实现好的页面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

太过爱你忘了你带给我的痛/ 2022年11月10日 14:25/ 0 赞/ 305 阅读

相关 echarts教程（一）：如何使echarts折线图连线平滑

只需要在service中添加 `smooth: true` 完整示例代码 option = { xAxis: { typ

客官°小女子只卖身不卖艺/ 2022年10月29日 15:23/ 0 赞/ 450 阅读

相关 Echarts - 渐变折线图区域

效果图如下图所示，两种颜色可以搭配营造渐变效果： ![在这里插入图片描述][20210524171902259.png] 实现方法 > 官方文档(areaSt

电玩女神/ 2022年10月15日 09:59/ 0 赞/ 198 阅读

相关 Echarts折线图样式收集

效果图1： ![20210830112730906.png][] option:{ backgroundColor: "rgba(255,

妖狐艹你老母/ 2022年09月09日 06:22/ 0 赞/ 232 阅读

相关 echarts折线图实例一

1.先看看我们要的一个效果：在点击显示30天和显示2天，数据可以切换，并且另外还要加一个时间区域查询出来；接下来我贴一下具体的操作：![20170926122012950][]

- 日理万妓/ 2022年06月08日 12:54/ 0 赞/ 316 阅读

相关 echarts折线图

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J

我不是女神ヾ/ 2022年04月18日 04:09/ 0 赞/ 359 阅读

相关 ECharts之折线图

效果图 ![在这里插入图片描述][20190801172702725.gif] 背景图片 ![20190725170845879.png][] 下载EChar

ゝ一世哀愁。/ 2021年09月30日 05:00/ 0 赞/ 1233 阅读

相关 Echarts3实例柱状折线图

实现效果 ![70][] 知识点 Y轴垂直标题柱状折线联合使用代码实现 option = { title:

待我称王封你为后i/ 2021年09月16日 07:06/ 0 赞/ 484 阅读

相关 Echarts3实例双Y轴折线图

实现效果 ![这里写图片描述][70] 知识点双Y轴：yAxisIndex Y轴垂直标题调整左侧Y轴刻度代码实现 opti

电玩女神/ 2021年09月16日 07:06/ 0 赞/ 696 阅读