vue结合axios动态引用echarts

1. 安装echarts和axios

首先需要安装echarts和axios：

npm install echarts axios --save

2. 在Vue组件中引入echarts和axios

在需要使用echarts的Vue组件中，引入echarts和axios：

import echarts from 'echarts'
import axios from 'axios'

3. 在Vue组件中定义数据和方法

在Vue组件中定义需要用到的数据和方法：

export default {
  data() {
    return {
      chartData: null
    }
  },
  methods: {
    async fetchData() {
      const res = await axios.get('/api/data')
      this.chartData = res.data
    },
    renderChart() {
      const chart = echarts.init(this.$refs.chart)
      chart.setOption({
        // echarts配置项
        // ...
      })
    }
  }
}

其中，`chartData`是需要绘制echarts图表的数据，`fetchData`方法用于通过axios获取数据，`renderChart`方法用于绘制echarts图表。

4. 在Vue组件中使用echarts

在Vue组件的`mounted`钩子中，调用`fetchData`方法获取数据，然后在数据获取成功后调用`renderChart`方法绘制echarts图表：

export default {
  mounted() {
    this.fetchData()
      .then(() => this.renderChart())
  }
}

5. 在Vue组件中使用v-if动态引入echarts

可能在某些情况下，需要在Vue组件中动态引入echarts，可以使用`v-if`指令：

<template>
  <div>
    <div v-if="chartData" ref="chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

在`v-if`指令中判断`chartData`是否存在，如果存在，则渲染echarts图表。这样，在数据获取成功后，就可以动态地引入echarts并渲染图表了。