实现echarts图表响应式效果

echarts图表响应式

最近应项目要求需要做响应式的echarts图表，开始在网上找了各种资源都没有找到如何操作。最后还是靠别人指点做出来的， 其实多看看文档也能明白，不过没那个耐心，哈哈。不多说上干货！下面先举个栗子！

直接上代码吧！！

function echart_seven(date){
	var data = { "bieshu":[120, 132, 101, 134, 90, 230, 210],
				"gongyu":[220, 182, 191, 234, 290, 330, 310],
				"zhuzhai":[150, 232, 201, 154, 190, 330, 410],
				"legend":[
				{name:'平均值',
				icon:'pin'//修改图例样式
				},
				{name:'2017年',
				icon:'pin'
				},
				{name:'2018年',
				icon:'pin'
				}
				],
				"date":['1','2','3','4','5','6','7']
		}
	//中间第二个统计图开始
	var myChart7 = echarts.init(document.getElementById('mainCenterBottom1'));
	var	option = {
				color:['#FF6968','#50DAF4','#EEDA2D'],//图例颜色设置
		    tooltip : {
		        trigger: 'axis',
		        textStyle:{
			               	fontSize :setFontSize(20),
			               	align:'left'
			               },
		    },
		    legend: {
		    	itemWidth:setFontSize(22),
	        itemHeight:setFontSize(12),
		    	textStyle:{
		        	color:'#fff',
		        	fontSize :setFontSize(16)
		       },
		        data:data.legend
		    },
		    //这一行是干货grid就代表网格线。只要把宽高设置成百分比就可以了，位置可以通过y值y2值x值和x2值调试。
		    grid: {show:'true',borderWidth:'0',height:"60%",width:"80%",y:"20%",x:"12%"},
		    calculable : true,
		    xAxis : [
		        {
		        	splitLine:{
                    	show:false
                	},
		            type : 'category',
		            boundaryGap : false,
		            axisLine: {show:false},
		            axisTick: {show:false},
		            data : data.date,
			        	axisLabel : {
	                            formatter: '{value}',
	                            textStyle: {
	                                color: '#fff',
	                                fontSize :setFontSize(16)
	                            }
	                        }
		        }
		    ],
		    yAxis : [
		        {		splitLine:{
		        			lineStyle:{
				            		width:setFontSize(1.5),
				            		color:'#fff'
				            		}
		        		},
		            type : 'value',
	                axisLine: {show:false},
	                axisTick: {show:false},
	                axisLabel : {
	                            formatter: '{value}',
	                            textStyle: {
	                                color: '#fff',
	                               fontSize :setFontSize(16)
	                            }
	                        }
		        }
		    ],
		    series : [
		        {
		            name:'平均值',
		            type:'line',
			          data:data.bieshu,
			          symbolSize: setFontSize(10),
			          itemStyle : { 
		            	normal:{
		            		lineStyle:{
		            		//color:'#50DAF4'//给线条设置颜色
		            		width:setFontSize(2)
		            		}
		            	}
	            	},
			       },
		        {
		            name:'2017年',
		            type:'line',
		            symbolSize: setFontSize(10),
		            itemStyle : { 
		            	normal:{
		            		lineStyle:{
		            		//color:'#50DAF4'//给线条设置颜色
		            		width:setFontSize(2)
		            		}
		            	}
	            	},
		            data:data.gongyu
            	
		        },
		        {
		            name:'2018年',
		            type:'line',
		            symbolSize: setFontSize(10),
		            itemStyle : { 
		            	normal:{
		            		lineStyle:{
		            		//color:'#EEDA2D'//给线条设置颜色
		            		width:setFontSize(2)
		            		}
		            	}
	            	},
		            data:data.zhuzhai
		        }
		    ]
		};
		 myChart7.setOption(option);
		 window.addEventListener("resize",function(){
		    myChart7.resize();
		});
	}

以上就是直角系echarts响应式图的实现，没事儿可以多看看官方文档还是介绍的比较详细，至于其他的圆环图，饼图响应式可以通过series下面的radius : [‘100%’, ‘100%’]和center: [‘100%’,‘100%’]来调试比例。对了echarts字体是不能通过设置来实现响应式的。我的处理办法如下

 //echarts字体大小设置方法
 setFontSize = function(size){
 	var windowWidth = document.body.clientWidth
 if(windowWidth>1024 && windowWidth<4000){
 		return size*windowWidth/1920;
 	}else if(windowWidth<=800){
 		return size*windowWidth/600;
 	}else if(windowWidth<1024){
 		return size*windowWidth/800;
 	}else if(windowWidth==1024){
 		return size*windowWidth/1366;
 	}else if(windowWidth>=4000){
 		return size*windowWidth/1600;
 	}
 }

在echarts设置字体的时候采用setFontSize （数字）就行了。代码写的有点low没有优化，根据自己的实际情况来就行了。继续去爬echarts的坑，see you！！