echarts 图表自适应外部盒子大小

项目中用到了echarts，由于页面是自适应的，还得兼容移动， 因此图表还需要根据盒子的大小来变化。

1. 自适应窗口及盒子大小
2. 页面中有一个【放大、缩小】功能，及全屏展示和预览图表

窗口自适应

 let myChart = This.$echarts.init(document.getElementById(This.id)); 
 window.addEventListener('resize',() => { myChart.resize(); });
 //或
 window.onresize = myChart.resize;
//注意：a如果是一个页面中插入多个echarts图，那么需要用第一种方式来监听resize事件，即：window.addEventListener，若选用第二种方法只能监听一个echarts图的自适应

盒子自适应

//js
let timer;
clearTimeout(timer);
timer = setTimeout(() => {
    let myChart = this.$echarts.init(document.getElementById('myChart'));
    myChart.resize();
}, 10);

//angular 
 $scope.echartsRe=function(){
        $interval.cancel($scope.etimer);
        $scope.etimer =$interval(function(){
            var myChart01 = echarts.init(document.getElementById('g_echarts01'));
            var myChart03 = echarts.init(document.getElementById('g_echarts03'));
            var map3 = echarts.init(document.getElementById('map'));

            myChart01.resize();
            myChart03.resize();
            map3.resize();
    },10);

全屏展示图表或预览图表

1. 图标所在盒子增加样式 如下类 full。
2. 退出全屏显示删除样式即可。

    .full {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;        
 }

转载于:https://www.cnblogs.com/yaohe/p/11352980.html