1. 浏览器页面尺寸变化，图表自动改变尺寸

在 echarts 中绘制图表，都是使用预先指定了一个明确尺寸的 DOM 容器。这也就意味着，图表一旦渲染完成，后续页面尺寸发生变化，图表也不会重新绘制以及改变尺寸。

图表绘制完成后，容器尺寸变小，图表右侧部分被遮住：

这时候，需要手动调用 echarts 实例的 resize 方法来解决。

// resize method
resize() {
 this.chart.resize();
}

// mounted 生命钩子中，绑定 resize 事件处理函数
// 设置图表在页面尺寸变化时，图表重新渲染排布
window.addEventListener("resize", this.resize);

销毁组件前，清空 resize 事件处理函数。

// beforeDestroy 生命钩子中，清空 resize 事件处理函数
window.removeEventListener("resize", this.resize);

增加以上配置后，容器尺寸变小，图表也会重新调整尺寸，不会存在显示不全的现象：

2. 不同屏幕配置下，使用不同布局

这部分可以参考文档中移动端自适应部分的内容。
echarts 中组件的定位设置以及Media Query 的能力，为 echarts 图表提供了图表内部组件随着容器尺寸变化而变化的能力

1. 组件的定位设置

1. left/right/top/bottom/width/height 定位方式：

• left：距离 DOM 容器左边界的距离。

• right：距离 DOM 容器右边界的距离。

• top：距离 DOM 容器上边界的距离。

• bottom：距离 DOM 容器下边界的距离。

• width：宽度。

• height：高度。

  这六个量中，每个量都可以是『绝对值』(eg: {left: 23, height: 400})或者『百分比』（eg: {right: ‘30%’, bottom: ‘40%’}）或者『位置描述』（eg: left: ‘center’, top: ‘middle’）。

2. center / radius 定位方式：

• center: [x, y]
• radius: [内半径，外半径]

4. 横向（horizontal）和纵向（vertical）
   在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。

   横纵向布局的设置，一般在『组件』或者『系列』的 orient 或者 layout 配置项上，设置为 ‘horizontal’ 或者 ‘vertical’。

2. Media Query

echarts 中的 Media Query 的概念与 CSS 中的媒体查询概念十分相似，它针对页面的不同视口尺寸或配置来设置断点，为其提供合适的组件布局。

在 option 中设置 Media Query 的语法格式如下所示：

option = {
    baseOption: { // 这里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {...},   // 这里写规则，现在支持三个属性：width、height、aspectRatio（长宽比）。每个属性都可以加上 min 或 max 前缀。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则，表示『默认』，
            option: {       // 即所有规则都不满足时，采纳这个option。
                legend: {...},
                ...
            }
        }
    ]
};

下面给出一个具体的例子，media query 部分的代码如下：

{
  baseOption: {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
      orient: "horizontal",
      top: 0,
      left: 10,
      data: [
        "已分配库存",
        "冻结库存",
        "未上架库存",
        "其他区域库存",
        "正常库位库存"
      ]
    },
    series: [
      {
        name: "库存状态",
        type: "pie",
        radius: ["40%", "80%"],
        center: ["50%", "56%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "20",
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        }
      }
    ]
  },
  media: [
    {
      query: {
        minAspectRatio: 1,
        minWidth: 400
      },
      option: {
        legend: {
          orient: "vertical"
        },
        series: [
          {
            center: ["50%", "50%"]
          }
        ]
      }
    }
  ]
}

上面代码中的 media query 十分简单，就是当 容器尺寸大于等于 400px 且屏幕长宽比大于1时，改变图例的为垂直布局，改变饼图的放置位置。最终效果图如下：

基础布局效果：

满足查询条件布局效果：