axios动态引用echarts

axios是一个基于Promise的HTTP库，用于发送异步请求。而echarts是一个基于JavaScript的可视化图表库。将axios和echarts结合起来，可以动态引用echarts来展示从后端获取的数据。

具体步骤如下：

1. 在HTML文件中引入echarts的CDN链接

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2. 在JavaScript文件中，使用axios发送异步请求获取数据，并通过echarts动态创建图表展示数据

axios.get('/api/data')
  .then(function (response) {
    // 获取数据成功后，使用echarts创建图表
    var data = response.data;
    var chartContainer = document.getElementById('chart-container');
    var myChart = echarts.init(chartContainer);
    var option = {
      // 配置图表选项
      // ...
      series: [{
        data: data
      }]
    };
    myChart.setOption(option);
  })
  .catch(function (error) {
    console.log(error);
  });

在上面的代码中，首先使用axios发送异步请求获取数据。然后，根据获取的数据使用echarts创建图表。最后，将图表渲染到HTML页面中的指定容器中。

需要注意的是，echarts需要在DOM元素加载完成后才能初始化，因此需要将echarts的初始化代码放在DOM元素加载完成的回调函数中。

document.addEventListener('DOMContentLoaded', function() {
  // 在DOM元素加载完成后，初始化echarts
  var chartContainer = document.getElementById('chart-container');
  var myChart = echarts.init(chartContainer);
  var option = {
    // 配置图表选项
    // ...
  };
  myChart.setOption(option);
});