echarts自适应

实现echarts图表自适应

if (!this.echarts.analysisAmplificationChart) {
            document.getElementById('analysisAmplificationChart').style.width = (window.innerWidth * 0.48) + "px"  //初始化echarts图表宽度
            this.echarts.analysisAmplificationChart = echarts.init(document.getElementById('analysisAmplificationChart'), 'macarons', {
              renderer: "svg",
            })
            window.onresize = function () {
            twChart.resize();
        }
          }
          this.echarts.analysisAmplificationChart.setOption({
            tooltip: {
              trigger: 'item',
              axisPointer: {
              type: 'cross',
              label:{
              backgroundColor:'#6a7985'
            }
          },
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            // toolbox: {
            //   feature: {
            //     saveAsImage: {}
            //   }
            // },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: xAxisData
            },
            yAxis: {
              type: 'value'
            },
            dataZoom: [
              {
                type:'slider', //图标下面的伸缩条
                show:true, // 是否显示
                realtime:true, // 拖动时更新视图  
                start:0, //滚动条 开始位置（0-100）
                end:100, //滚动条结束位置（0-100）
                height:10 //滚动条高度
               },
              {
                type: 'inside',
                orient: 'vertical',
                filterMode: 'none',
                start: 0,
                end: 100
              },
              {
                type: 'inside',
                orient: 'horizontal',
                filterMode: 'none',
                start: 0,
                end: 100
              }
            ],
            series: seriesData
          }, true)

容器适应之外，echarts实例需要加个myCharts.resize()

我一般是把表的宽高设置为百分百，然后在外面加一个容器div设置定值的宽高，根据自己的需要来，如果外部的div宽高做了适配或者是百分比布局也能有效

布局使用百分比布局，echarts实例调用resize()，以随窗口变化改变尺寸。