vue2横排动态排序条状图

在Vue 2中创建一个横排的动态排序条状图，可以使用诸如Chart.js这样的图表库结合Vue的指令和组件化特性。以下是简要步骤：

1. **安装依赖**：
首先，在项目中安装`chart.js`库，你可以通过npm或yarn命令行工具进行安装：

   npm install chart.js @vue/chartjs --save
   或者
   yarn add chart.js @vue/chartjs

2. **创建组件**：
创建一个新的Vue组件，例如`BarChart.vue`，并引入`<line-chart>`标签：

   <template>
     <div>
       <canvas ref="barChart"></canvas>
     </div>
   </template>

   <script>
   import { Bar } from '@vue/chartjs';

   export default {
     name: 'BarChart',
     components: {
       Bar,
     },
     data() {
       return {
         labels: [], // 数据标签
         datasets: [{ // 条形数据集
           label: '值',
           data: [],
           backgroundColor: 'rgba(75,192,192,0.4)', // 背景色
           borderColor: 'rgba(75,192,192,1)', // 边框色
           borderWidth: 1, // 边框宽度
         }],
       };
     },
     methods: {
       updateChartData(newData) {
         this.labels = newData.labels;
         this.datasets[0].data = newData.values; // 更新数据
         this.renderChart(this.chartData); // 渲染图表
       },
     },
     mounted() {
       this.renderChart(this.chartData);
     },
     computed: {
       chartData() {
         return {
           labels: this.labels,
           datasets: [this.datasets[0]],
         };
       },
     },
   };
   </script>

3. **动态更新数据**：
在父组件或者其他部分，你需要根据业务需求实时获取到数据，并通过`updateChartData`方法传递给`BarChart`组件。

4. **调用组件**：
将`BarChart`组件添加到需要展示条状图的地方，传入数据列表：

<template>
  <div>
    <!-- 其他内容 -->
    <BarChart :labels="sortedLabels" :values="sortedValues" />
  </div>
</template>

<script>
import BarChart from './components/BarChart.vue';
export default {
  components: {
    BarChart,
  },
  data() {
    return {
      sortedLabels: [],
      sortedValues: [],
      // ...其他数据源
    };
  },
  methods: {
    sortData() {
      // 对数据进行排序，然后赋值给sortedLabels和sortedValues
      this.sortedLabels = ...;
      this.sortedValues = ...;
    },
  },
  // 初始化或事件触发后对数据进行排序并更新图表
};
</script>