模仿echrts进行数据的动态排序

原创已于 2024-04-12 16:02:34 修改 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #echarts #html5

于 2023-01-05 11:37:52 首次发布

该代码示例展示了一个使用Vue.js创建的动态排序列表，结合CSS转换实现元素的平滑动画效果。数据每3秒随机更新，根据数值大小排序，并计算元素的Y轴位移以产生动画效果。

效果大致如下,根据不同的数据，动态排序+动画

思路：获取最新的数据由大到小排序，将最新的数据和老数据进行比较，看新数据的位置和老数据位置相差多少Y距离，然后translateY到相应的距离


<template>
  <div :class="$style.root">
    <div>
      <div
        :class="$style.list"
        v-for="item in list"
        :key="item.name"
        :style="`transform: translateY(${item.y * (30 + 10)}px)`"
      >
        <!--  30是高度 10是margin-bottom  -->
        <span>{{ item.name }}</span>
        <div :class="$style.line" :style="`width:${getWidth(item.value)}px;background:${item.color}`" />
      </div>
    </div>
  </div>
</template>
<script>
import _ from 'lodash';
export default {
  data() {
    return {
      list: [
        {
          name: '苹果',
          value: 100,
          color: 'red',
          y: 0
        },
        {
          name: '梨子',
          value: 60,
          color: 'pink',
          y: 0
        },
        {
          name: '草莓',
          value: 70,
          color: 'blue',
          y: 0
        },
        {
          name: '橙子',
          value: 20,
          color: 'yellow',
          y: 0
        },
        {
          name: '橘子',
          value: 40,
          color: 'green',
          y: 0
        }
      ]
    };
  },
  mounted() {
    this.list.sort((a, b) => b.value - a.value); //排序
    let newList = [];
    setInterval(() => {
      newList = _.cloneDeep(this.list);
      for (let index = 0; index < 5; index++) {
        newList[index].value = parseInt(Math.random() * 100);
      }

      newList.sort((a, b) => b.value - a.value); //排序

      this.list.forEach((item, index) => {
        newList.forEach((it, id) => {
          if (it.name == item.name) {
            item.y = id - index; //获得当前应该显示的正确索引位置
            item.value = it.value;
          }
        });
      });
    }, 3000);
  },
  methods: {
    getWidth(num) {
      let max = 100;
      let width = 300;
      return parseInt((width * num) / max);
    }
  }
};
</script>

<style lang="scss" module>
.root {
  .list {
    display: flex;
    margin-bottom: 10px;
    transition: all 1s ease-in-out;
    .line {
      width: 300px;
      height: 30px;
    }
  }
}
</style>