七，ECharts图表的展示

ECharts 是一个功能强大、灵活的开源图表库，适用于数据可视化。

在vue框架中使用ECharts图表

在 Vue 项目中使用 ECharts 非常方便，可以通过以下步骤快速集成和使用：

1. **安装 ECharts**

使用 npm 安装 ECharts：

npm install echarts

2. **创建 ECharts 组件**

在 Vue 中创建一个通用的 ECharts 组件，这样可以重复使用。

创建一个名为 EChart.vue 的组件文件：

<template>
  <div ref="chart" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  options: {
    type: Object,
    required: true,
  }
});

const chart = ref(null);

onMounted(() => {
  const chartInstance = echarts.init(chart.value);
  chartInstance.setOption(props.options);

  // Watch for updates to options
  watch(
    () => props.options,
    (newOptions) => {
      chartInstance.setOption(newOptions);
    }
  );

  // Dispose the chart when the component is unmounted
  onBeforeUnmount(() => {
    if (chartInstance) {
      chartInstance.dispose();
    }
  });
});
</script>

<style scoped>
/* 可以根据需要定义样式 */
</style>

3. **在页面中使用 EChart 组件**

现在可以在任何 Vue 组件中引入这个 `EChart.vue`，并传入 `options` 配置项。例如：

<template>
  <div>
    <EChart :options="chartOptions" />
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import EChart from './EChart.vue';

const chartOptions = reactive({
  title: { text: '示例图表' },
  tooltip: {},
  xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
  yAxis: {},
  series: [{
    name: '数量',
    type: 'bar',
    data: [5, 20, 36, 10, 10]
  }]
});
</script>

4. **解释**

+ 使用 `ref` 来获取 `chart` DOM 节点，并通过 `onMounted` 钩子初始化图表。 + 使用 `watch` 监听 `props.options` 的变化，以便动态更新图表。 + `onBeforeUnmount` 确保在组件卸载时销毁图表实例，以避免内存泄漏。

这使得代码更加简洁，并符合 Vue 3 的 <script setup> 语法规范。

5. **动态更新图表数据**

在组件 `EChart.vue` 中的 `watch` 部分，设置了对 `options` 的监听，父组件传入的 `options` 发生变化时，图表会自动更新。

这就完成了在 Vue 中集成 ECharts 的基本流程。你可以根据需求调整图表配置，甚至为不同类型的图表定制不同的配置项。