vue3+ts+vite的echarts俩个图表请求数据

在Vue 3 + TypeScript + Vite项目中使用echarts来请求并展示两个图表的数据，你可以按照以下步骤进行操作：

1. 在项目中安装echarts依赖。可以使用npm或yarn命令来安装echarts，例如：`npm install echarts --save`。

2. 在main.ts文件中引入echarts，并将其挂载到Vue实例上。你可以按照以下代码示例来实现：

import { createApp } from "vue";
import App from "./App.vue";
import echarts from "echarts";

const app = createApp(App);
app.config.globalProperties.$echarts = echarts;

通过以上代码，你已经将echarts挂载到了Vue实例的全局属性$echarts上。

3. 在需要使用echarts的组件中引入echarts，并在页面渲染完成后使用echarts来请求并展示图表数据。假设你要在App.vue组件中展示两个图表的数据，你可以按照以下代码示例来实现：

<template>
  <div>
    <div ref="chart1" style="width: 400px; height: 300px;"></div>
    <div ref="chart2" style="width: 400px; height: 300px;"></div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  name: "App",
  setup() {
    const chart1 = ref(null);
    const chart2 = ref(null);

    onMounted(() => {
      // 请求图表1的数据并绘制图表
      const chart1Data = fetchDataForChart1(); // 根据实际情况获取图表1的数据
      const chart1Instance = $echarts.init(chart1.value);
      chart1Instance.setOption(chart1Data);

      // 请求图表2的数据并绘制图表
      const chart2Data = fetchDataForChart2(); // 根据实际情况获取图表2的数据
      const chart2Instance = $echarts.init(chart2.value);
      chart2Instance.setOption(chart2Data);
    });

    return {
      chart1,
      chart2,
    };
  },
};

function fetchDataForChart1() {
  // 根据实际情况请求图表1的数据并返回
  // 例如：return axios.get("/api/chart1").then((res) => res.data);
}

function fetchDataForChart2() {
  // 根据实际情况请求图表2的数据并返回
  // 例如：return axios.get("/api/chart2").then((res) => res.data);
}
</script>

在以上代码中，我们使用了`ref`和`onMounted`来获取图表的DOM元素，并在页面渲染完成后使用echarts来请求并展示图表数据。

请注意，以上代码仅为示例代码，你需要根据实际情况来实现`fetchDataForChart1`和`fetchDataForChart2`方法来请求图表数据。此外，你还需要根据实际需求来配置echarts的图表选项。

#### 引用[.reference_title]
- *1* *2* [vue3+ts+vite 使用echarts](https://blog.csdn.net/gusensen/article/details/129445665)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [vue3+vite+ts+echarts项目问题汇总](https://blog.csdn.net/weixin_41107170/article/details/126401617)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]