echarts 在vue里如何自适应

要让echarts在Vue中自适应，可以使用Vue的watch属性来监听echarts容器的宽度变化，然后动态调整echarts的大小，使其自适应。具体步骤如下：

1. 在Vue组件中引入echarts，并在mounted()函数中初始化echarts：

import echarts from 'echarts'

export default {
  mounted() {
    // 初始化echarts
    this.chart = echarts.init(this.$refs.chart)
    // ...
  }
}

2. 在template中定义echarts容器，并绑定ref属性：

<template>
  <div ref="chart"></div>
</template>

3. 在Vue组件中使用watch属性监听echarts容器的宽度变化，并在回调函数中动态调整echarts的大小：

export default {
  mounted() {
    // 初始化echarts
    this.chart = echarts.init(this.$refs.chart)

    // 监听容器宽度变化
    this.$watch(() => this.$refs.chart.offsetWidth, () => {
      // 动态调整echarts大小
      this.chart.resize()
    })
  }
}

这样，echarts就能在Vue中自适应了。