如何配合上接口数据 动态请求 动态渲染图表呢

要配合上接口数据动态请求并动态渲染图表，你可以使用一些前端图表库，例如ECharts、Highcharts等，它们都提供了API接口供我们动态渲染图表。通常的做法是先通过AJAX等方式获取后端接口数据，然后将数据传入对应的图表库API中，生成图表并渲染到页面中。如果需要实现实时更新图表数据，可以使用定时器或者WebSocket等方式来定时获取最新的数据并更新图表。需要注意的是，动态请求和动态渲染图表会增加前端的性能压力，应该在保证用户体验的前提下尽量优化性能。

相关问题

不是长链接的动态请求 是根据下拉框的选项 请求得到不同的数据 渲染不同的图表

了解了你的需求后，可以通过监听下拉框选项的变化来实现动态请求不同的数据并渲染不同的图表。具体的实现步骤如下：

1. 监听下拉框选项的变化事件，获取选中的选项值。

2. 根据选中的选项值构造请求参数，例如可以将选项值作为参数之一，然后发起 AJAX 请求，获取后端返回的数据。

3. 根据返回的数据，使用对应的图表库API生成对应的图表，并渲染到页面中。

4. 可以在每次选择下拉框选项时，先清空之前的图表，再生成新的图表。

需要注意的是，不同的图表库有不同的API接口，需要根据选择的图表库来进行对应的操作。另外，为了避免频繁请求后端数据，可以考虑使用缓存机制，例如将已经请求过的数据缓存在本地，下次再请求时，先从本地缓存中获取数据。

在vue种使用Echarts多个图表，请求完接口数据之后,如何根据浏览器窗口的变化，自动重新渲染图表

在 Vue 中使用 ECharts 渲染多个图表，并且在请求完接口数据之后，根据浏览器窗口的变化自动重新渲染图表的步骤如下：

1. 在 `mounted` 钩子函数中，获取 DOM 元素，并初始化 ECharts 实例。

mounted() {
  // 获取 DOM 元素
  const chart1 = this.$refs.chart1
  const chart2 = this.$refs.chart2

  // 初始化 ECharts 实例
  this.chart1 = echarts.init(chart1)
  this.chart2 = echarts.init(chart2)

  // 请求接口数据
  this.getData()
},
methods: {
  // 请求接口数据的方法
  getData() {
    axios.get('/api/data').then(response => {
      // 处理接口数据
      this.chartData1 = response.data.data1
      this.chartData2 = response.data.data2

      // 绘制图表
      this.drawCharts()
    })
  },
  // 绘制图表的方法
  drawCharts() {
    this.chart1.setOption({...})
    this.chart2.setOption({...})
  },
},

2. 在 `created` 钩子函数中，监听浏览器窗口大小变化，触发重新渲染图表的方法。

created() {
  // 监听浏览器窗口大小变化，触发重新渲染图表的方法
  window.addEventListener('resize', this.handleResize)
},
methods: {
  // 重新渲染图表的方法
  handleResize() {
    this.chart1.resize()
    this.chart2.resize()
  },
},

3. 在模板中，使用 `ref` 属性获取 DOM 元素，并绑定 `v-if` 判断接口数据是否已经加载完成，从而避免在数据未加载完成时渲染图表。

<template>
  <div>
    <div v-if="chartData1" ref="chart1" class="chart"></div>
    <div v-if="chartData2" ref="chart2" class="chart"></div>
  </div>
</template>
<style>
.chart {
  width: 50%;
  height: 300px;
}
</style>

完整的代码示例：

<template>
  <div>
    <div v-if="chartData1" ref="chart1" class="chart"></div>
    <div v-if="chartData2" ref="chart2" class="chart"></div>
  </div>
</template>
<style>
.chart {
  width: 50%;
  height: 300px;
}
</style>
<script>
export default {
  data() {
    return {
      chartData1: null,
      chartData2: null,
    }
  },
  mounted() {
    // 获取 DOM 元素
    const chart1 = this.$refs.chart1
    const chart2 = this.$refs.chart2

    // 初始化 ECharts 实例
    this.chart1 = echarts.init(chart1)
    this.chart2 = echarts.init(chart2)

    // 请求接口数据
    this.getData()
  },
  created() {
    // 监听浏览器窗口大小变化，触发重新渲染图表的方法
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    // 请求接口数据的方法
    getData() {
      axios.get('/api/data').then(response => {
        // 处理接口数据
        this.chartData1 = response.data.data1
        this.chartData2 = response.data.data2

        // 绘制图表
        this.drawCharts()
      })
    },
    // 绘制图表的方法
    drawCharts() {
      this.chart1.setOption({...})
      this.chart2.setOption({...})
    },
    // 重新渲染图表的方法
    handleResize() {
      this.chart1.resize()
      this.chart2.resize()
    },
  },
}
</script>

需要注意的是，由于 ECharts 图表默认不会随着容器大小的变化而自适应，因此需要手动调用 `resize()` 方法重新渲染图表。