动态排序柱状图组件

使用Vue 3和ECharts库实现的动态排序柱状图组件的使用方法。该组件能够展示一组数据，并根据数据的变化动态更新图表，实现排序效果。

组件实现

1. 模板部分

组件的模板部分定义了一个div元素，该元素将作为ECharts图表的容器。

2.导入依赖

3.定义响应式引用

使用ref来创建一个响应式引用barRaceChart，用于与模板中的div元素关联。

生命周期钩子

onMounted：确保DOM渲染完成后，调用drawBarRaceChart函数初始化图表。onUnmounted：在组件卸载时，销毁ECharts实例并清除定时器。

绘制图表

drawBarRaceChart函数负责初始化ECharts实例，并设置图表的配置项。图表配置项option包括标题、X轴、Y轴、系列数据等设置。特别地，realtimeSort属性设置为true，以实现数据的实时排序。

const drawBarRaceChart = () => {
    if (barRaceChart.value) {
      const data = [];
       for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
      }
      // 使用与响应式引用匹配的DOM元素初始化 ECharts 实例
      chartInstance = echarts.init(barRaceChart.value);
      const option = {......}
      };

数据更新逻辑

通过run函数实现数据的更新逻辑，该函数会在每个时间间隔内被调用，更新数据并重新设置图表的选项。

导入组件

在Vue组件文件中导入TableAuto组件。

import TableAuto from './components/tableauto.vue';

在模板中使用组件

在Vue组件的模板部分添加TableAuto组件

<div :style="{ background: '#1a2038', width: '100%', height: '55vh' }"> <TableAuto /> </div>

注意事项

确保在组件卸载时正确销毁ECharts实例