VUE3 echarts

### 如何在 Vue 3 中使用 ECharts

#### 安装依赖库
为了能够在 Vue 3 项目中使用 ECharts，需要安装 `echarts` 和 `vue-echarts` 库。这可以通过 npm 来完成。

npm install echarts vue-echarts

#### 创建组件并初始化图表实例
创建一个新的 Vue 组件用于展示 ECharts 图表，在模板部分定义一个具有唯一 ID 的 DOM 元素作为容器，并设置其样式以确保有足够空间显示图表[^2]。

<template>
  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import VChart, { THEME_KEY } from "vue-echarts";
import { onMounted, ref } from 'vue';

// 初始化图表配置项
const chartOption = {
    title: {
        text: 'ECharts 示例'
    },
    tooltip: {},
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

onMounted(() => {
    const myChart = echarts.init(this.$refs.chartContainer);
    myChart.setOption(chartOption);
});
</script>

上述代码展示了如何在一个简单的柱状图例子中应用基本的选项配置对象 `option`，其中包含了标题、提示框组件 (`tooltip`)、X 轴标签以及系列列表等内容[^4]。

对于更复杂的场景，比如自定义主题或者响应式设计，则可以根据实际需求调整相应的属性值；而对于交互功能的支持，如点击事件监听器等也可以在此基础上进一步扩展实现。