vue3的echarts柱状图

在Vue3中使用Echarts绘制柱状图，你需要首先引入Echarts库，并创建一个Echarts实例。然后，你可以通过设置配置参数来定义柱状图的样式、数据等。具体的步骤如下：

1. 在Vue3项目中，通过安装Echarts库来获取Echarts的引用。

2. 在需要使用柱状图的组件中，导入Echarts和所需的样式文件。

3. 创建一个Echarts实例，并指定要绘制柱状图的DOM元素。

4. 定义柱状图的配置参数，包括数据源、图表样式等。

5. 设置Echarts实例的配置参数。

6. 可选：使用自定义的formatter函数来自定义图例组件的显示内容。

7. 可选：封装一个title组件，用于显示柱状图的标题。

8. 在组件的生命周期中监听窗口大小变化，并调用Echarts实例的resize方法来实现图表的自适应。

下面是一个示例代码，演示了如何在Vue3中使用Echarts绘制柱状图：

// 引入Echarts库和样式文件
import * as echarts from "echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/legend";
import "echarts/lib/component/title";

export default {
  mounted() {
    // 创建Echarts实例
    const myChart = echarts.init(document.getElementById("chart"));

    // 定义柱状图的配置参数
    const options = {
      title: {
        text: "柱状图示例", // 可自定义标题内容
      },
      xAxis: {
        type: "category",
        data: ["A", "B", "C", "D", "E"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "柱状图",
          type: "bar",
          data: [10, 20, 30, 40, 50],
        },
      ],
    };

    // 设置Echarts实例的配置参数
    myChart.setOption(options);

    // 监听窗口大小变化，实现图表的自适应
    const echartsResize = () => {
      myChart && myChart.resize();
    };
    window.addEventListener("resize", echartsResize, false);

    // 在组件销毁时，移除窗口大小变化的监听
    onUnmounted(() => {
      window.removeEventListener("resize", echartsResize);
    });
  },
};