echarts 自适应、媒体查询media

自适应
	(1)让图标适应容器大小
		监听窗口改变,调用echarts.init对象.resize();	即可让图表适应容器大小
	
	(2)媒体查询media
		1.当图标可以拖动变换的工程中,自定义图标样式布局等方式
		2.容器DOM节点需要能任意随着拖拽变化大小,某个配置项在某一个query option中出现,那么在其它query option中也必须出现,否则不能够回归到原来的状态。
		3.chart.setOption时,media不会被合并,而是覆盖
		4.理论上可以写任何option的配置项,但是一般我们只写跟布局定位相关的
		
		option = {
			title: {...},
			series: [{...}, {...}, ...],
			media: [
			    {
			     	当没有query时,所有规则都不满足时,采用这个option。
			    	option:{
			    		legend: {   
			    			right: 'center',
			    		},
			    		...
			    	}
			    },
			    {	
			        query: {	多个条件可以相互组合
			        	minWidth: 200, 		大于200px宽度
			        	maxWidth:200,		小于200px宽度
			        	minHeight:300,		大于300px高度
			        	maxHeight: 300,		小于300px高度	
			        	minAspectRatio: 1,	长宽比大于1	
			            maxAspectRatio: 1,  长宽比小于1
			            
			        },
			        option: {
			            legend: {                   
			                right: 'center',
			                bottom: 0,
			                orient: 'horizontal'    
			            },
			            series: [                 
			                {
			                    radius: [20, '50%'],
			                    center: ['50%', '30%']
			                },
			                {
			                    radius: [30, '50%'],
			                    center: ['50%', '70%']
			                }
			            ]
			        }
			    }
			]
		}

代码示例:

export default {
  name: 'App',
  mounted:async function(){


    var myMap=echarts.init(document.querySelector('.map'));

    var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
    var yData1=[88,92,63,77,94,80,72,86];
    var yData2=[80,90,60,70,90,70,62,76];
    var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]

    var option = {
      series:[
        {
          type:'pie',
          data:pieData,

          
        }
      ],


    };

    myMap.setOption(option);
    
    //屏幕自适应
    window.onresize=()=>{
      myMap.resize();
    }

  }
}