echarts图表自适应浏览器、盒子宽高

一、出现的问题

二、想要的效果

三、实现步骤
1、在html中，一定要写宽高100%

<div id="main" style="width: 100%; height:100%;"></div>

2、在methods中写图表函数

3、关键的一步
调用echartsresize方法

window.onresize = function () {
          myChart.resize()
        }

4、在mounted里调用methods里图表方法

this.taskEcharts()

5、完整代码

<template>
  <div class="myAgent">
    <div id="main" style="width: 100%; height:100%;"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    created() {},
    methods: {
      taskEcharts() {
        var myChart = this.$echarts.init(document.getElementById('main'));
        var data1 = [709, 1999, 709, 2299, 3299, 2299, 1999, 2999, 1999, 709, 1999, 709];
        var data2 = [1709, 2999, 1799, 3299, 4299, 3299, 2999, 3999, 2999, 1709, 2999, 1709];
        var xData = function () {
          var data = [];
          for (var i = 1; i < 13; i++) {
            data.push(i + "月");
          }
          return data;
        }();
        // 指定图表的配置项和数据
        var option = {
          backgroundColor: '#020D20',
          tooltip: {
            trigger: 'axis',
            position: function (point, params, dom, rect, size) {
              //  size为当前窗口大小
              if ((size.viewSize[0] / 2) >= point[0]) {
                //其中point为当前鼠标的位置
                return [point[0] + 50, '10%'];
              } else {
                //其中point为当前鼠标的位置
                return [point[0] - 200, '10%'];
              }
            },
            axisPointer: {
              type: 'shadow',

              textStyle: {
                color: '#05294D',
              },
            },
            backgroundColor: '#05294D',
            borderColor: '#135469',
            borderWidth: 2,
            padding: [20, 20, 20, 20],
            formatter: function (params) {
              // console.log(params.length == 0);
              if (params.length === 0) {
                let result =
                  '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
                  '至少选中一条图例' +
                  '</span>' +
                  '<br>';
                return result;
              } else if (params.length == 1) {
                const paramsArray = [];
                params.forEach((v) => {
                  // console.log(v.name);
                  if (v.seriesName == '趋势') {
                    v.color = '#F3C452';
                  } else {
                    v.color = '#02DBF1';
                  }
                  paramsArray.push({
                    name: v.name,
                    seriesName: v.seriesName,
                    data: v.data,
                    color: v.color,
                  });
                });
                // console.log(paramsArray);
                let result =
                  '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
                  paramsArray[0].name +
                  '</span>' +
                  '<br>';
                result +=
                  '<div style="display:flex;">' +
                  '<div style="font-size: 20px;font-family: MicrosoftYaHeiUI;color: ' +
                  paramsArray[0].color +
                  ';line-height: 25px;margin-top:10px;margin-right:28px;">' +
                  '旅客' +
                  paramsArray[0].seriesName +
                  '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color:' +
                  paramsArray[0].color +
                  ';line-height: 33px;">' +
                  paramsArray[0].data +
                  '人公里' +
                  '</div>' +
                  '</div>' +
                  '</div>';
                return result;
              } else {
                let result =
                  '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
                  params[0].name +
                  '</span>' +
                  '<br>';
                result +=
                  '<div style="display:flex;">' +
                  '<div style="font-size: 20px;font-family: MicrosoftYaHeiUI;color: #02DBF1;line-height: 25px;margin-top:10px;margin-right:28px;">' +
                  '旅客' +
                  params[0].seriesName +
                  '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #02DBF1;line-height: 33px;">' +
                  params[0].data +
                  '人公里' +
                  '</div>' +
                  '</div>' +
                  '<div style="margin-top:10px;font-size: 20px;font-family: MicrosoftYaHeiUI;color: #F3C452;line-height: 25px;">' +
                  '旅客' +
                  params[1].seriesName +
                  '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #F3C452;line-height: 33px;">' +
                  params[1].data +
                  '人公里' +
                  '</div>' +
                  '</div>' +
                  '</div>';
                return result;
              }
            },
          },
          grid: {
            borderWidth: 0,
            top: '20%',
            left: '65',
            bottom: '25%',
            textStyle: {
              color: '#fff',
            },
          },
          legend: {
            top: '0%',
            right: '10%',
            textStyle: {
              fontSize: '20px',
              fontFamily: 'MicrosoftYaHeiUI',
              color: '#FFFFFF',
            },
            itemWidth: 28,
            itemHeight: 28,
            data: [{
                name: '周转量',
                icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=',
              },
              {
                name: '趋势',
                icon: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC',
              },
            ],
          },
          xAxis: [{
            type: 'category',
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.5)',
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: 'rgba(255,255,255,0.7)',
              fontSize: 18,
            },
            data: xData,
          }, ],
          yAxis: [{
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: 'rgba(255,255,255,0.5)',
              fontSize: 20,
            },
            splitArea: {
              show: false,
            },
          }, ],
          series: [{
              name: '周转量',
              type: 'bar',
              // "stack": "总量",
              barMaxWidth: 35,
              barGap: '10%',
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#05F5FF', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#020D20', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              data: data1,
            },
            {
              name: '趋势',
              type: 'line',
              symbolSize: 10,
              symbol: 'circle',
              itemStyle: {
                normal: {
                  color: 'rgba(255, 196, 53, 1)',
                  barBorderRadius: 0,
                },
              },
              lineStyle: {
                normal: {
                  width: 4,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#F0B62A', // 0% 处的颜色
                      },
                      {
                        offset: 0.45,
                        color: '#FFC12B', // 45% 处的颜色
                      },
                      {
                        offset: 0.85,
                        color: '#FFC12B', // 85% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#FFC12B', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              data: data2,
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.onresize = function () {
          myChart.resize()
        }
      }
    },
    mounted() {
      this.taskEcharts()
    }
  }

</script>

<style lang="less" scoped>
  .myAgent {
    height: 500px;
  }

</style>