vue2 echarts响应式布局

在Vue2中，使用Echarts实现响应式布局可以通过以下步骤进行操作。

1. 首先，需要手动调用Echarts实例的resize方法来解决页面尺寸变化时图表重新渲染排布的问题。可以在组件的mounted生命周期钩子中绑定resize事件处理函数，代码如下：

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

mounted() {
  window.addEventListener("resize", this.resize);
}

2. 其次，可以通过设置组件或系列的orient或layout配置项为'horizontal'或'vertical'来实现横纵向布局的设置。这可以在组件或系列的配置中进行设置，示例代码如下：

{
  // 组件或系列的其他配置项
  orient: "horizontal", // 或者 "vertical"
  // 其他配置项
}

3. 此外，还可以使用Media Query来设置响应式布局。可以根据页面的尺寸或其它条件，动态调整图表的配置。下面是一个具体的例子，示例代码如下：

{
  baseOption: {
    // 基础配置项
    legend: {
      // 图例配置项
      orient: "horizontal",
      // 其他配置项
    },
    series: [
      {
        // 系列配置项
        center: ["50%", "56%"],
        // 其他配置项
      }
    ]
  },
  media: [
    {
      query: {
        minAspectRatio: 1,
        minWidth: 400
      },
      option: {
        legend: {
          orient: "vertical"
        },
        series: [
          {
            center: ["50%", "50%"]
          }
        ]
      }
    }
  ]
}

通过上述步骤和配置，可以实现Vue2中Echarts的响应式布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [在 VUE 项目中，设置 echarts 图表为响应式布局](https://blog.csdn.net/qq_36291747/article/details/106992514)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]