Vue---Echarts

项目需要用echarts来做数据展示，现记录vue3引入并使用echarts的过程。

1. 使用步骤

1. 安装 ECharts：使用 npm 或 yarn 等包管理工具安装 ECharts。

   npm install echarts
   ```
   
   

2. 在 Vue 组件中引入 ECharts：在需要使用图表的 Vue 组件中，引入 echarts 模块。

   import * as echarts from 'echarts';
   ```
   
   

3. 创建图表容器：在组件的模板中创建一个容器元素，用于渲染图表。

   
   ```
   
   

4. 在组件的 setup 函数中，获取图表容器的 DOM 元素，并创建图表实例。

   import { ref, onMounted } from 'vue';
   
   export default {
     setup() {
       const chartContainer = ref(null);
   
       onMounted(() => {
         if (chartContainer.value) {
           const chartInstance = echarts.init(chartContainer.value);
           // 在 chartInstance 上进行图表的配置和数据处理
         }
       });
   
       return {
         chartContainer,
       };
     },
   };
   ```
   
   在 `setup` 函数中，我们使用 `ref` 创建了一个响应式的 `chartContainer` 变量来引用图表容器的 DOM 元素。
   
   在 `onMounted` 钩子函数中，我们可以获取到图表容器的 DOM 元素，并使用 `echarts.init` 方法创建图表实例。接下来，你可以在 `chartInstance` 上进行图表的配置和数据处理。
   
   

5. 配置和绘制图表：在 chartInstance 上进行图表的配置和数据处理，然后调用 chartInstance.setOption 方法将配置应用到图表上。

   import { ref, onMounted } from 'vue';
   import * as echarts from 'echarts';
   
   export default {
     setup() {
       const chartContainer = ref(null);
   
       onMounted(() => {
         if (chartContainer.value) {
           const chartInstance = echarts.init(chartContainer.value);
   
           const options = {
             // 图表的配置项和数据
             // 可根据 ECharts 的文档和示例进行配置
             // 例如：title、xAxis、yAxis、series 等配置项
           };
   
           chartInstance.setOption(options);
         }
       });
   
       return {
         chartContainer,
       };
     },
   };
   ```
   
   在 `options` 对象中，你可以根据 ECharts 的文档和示例配置图表的各种选项，例如标题、坐标轴、系列数据等。然后，使用 `chartInstance.setOption` 方法将配置应用到图表上。
   
   

6. 在模板中渲染图表容器：在组件的模板中使用 v-bind 将图表容器绑定到 chartContainer 变量。

   
   ```
   
   这样，图表容器就会被渲染出来，并在 `onMounted` 钩子函数中初始化和绘制图表。
   

然后可以根据 ECharts 的文档和示例，进一步配置和定制图表，接下来是常见的图表使用。

2. 常见图表使用

     2.1.  折线图（Line Chart）

     2.2. 柱状图（Bar Chart）

     2.3. 饼状图（Pie Chart）

     2.4. 散点图（Scatter Chart）

    2.5. 雷达图（Radar Chart）

    2.6. 面积图（Area Chart）

    2.7. 仪表盘（Gauge Chart）

    2.8. 漏斗图（Funnel Chart）