feat:sortChart

src/components/bubbleSort.vue

@@ -1,68 +1,134 @@
 <template>
-    <el-container>
-      <el-header>
-        <el-row>
+  <el-container>
+    <el-header>
+      <el-row>
         numbers:
         <el-input
-        class="input"
-        v-model="numbersStr"
-        placeholder="Numbers need to be separated by Spaces. The numbers must be no more than ten."
+          class="input"
+          v-model="numbersStr"
+          placeholder="Numbers need to be separated by Spaces. The numbers must be no more than ten."
         ></el-input>
-        </el-row>
-        <el-row>
-          rule:
-          <el-select v-model="rule" placeholder=" please select ordering rule">
-            <el-option
-              v-for="item in ruleOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-          <el-button @click="start" type="primary">
-            start
-          </el-button>
-        </el-row>
-      </el-header>
-      <el-main>
-      </el-main>
-    </el-container>
+      </el-row>
+      <el-row>
+        rule:
+        <el-select
+          v-model="rule"
+          placeholder=" please select ordering rule"
+        >
+          <el-option
+            v-for="item in ruleOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-button
+          @click="start"
+          type="primary"
+        >
+          start
+        </el-button>
+      </el-row>
+    </el-header>
+    <el-main style="height:600px;">
+      <sortChart :list=testTmpItem></sortChart>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
-export default {
-  name: 'bubbleSort',
-  data () {
-    return {
-      numbersStr:"",
-      rule:"",
-      ruleOptions:[
-        {
-          value:"ascending",
-          label:"ascending"
+  import sortChart from '@/components/sortChart';
+  export default {
+    name: 'bubbleSort',
+    components: {
+      sortChart
+    },
+    data () {
+      return {
+        numbersStr: "",
+        rule: "",
+        ruleOptions: [
+          {
+            value: "ascending",
+            label: "ascending"
+          },
+          {
+            value: "descending",
+            label: "descending"
+          }
+        ],
+        testTmpItem: [{
+          "value": 9,
+          "color": "blue"
+        }, {
+          "value": 2,
+          "color": "red"
         },
         {
-          value:"descending",
-          label:"descending"
-        }
-      ]
-
-    }
-  },
-  methods:{
-    start(){
+          "value": -8,
+          "color": "green"
+        }],
+        testList: [
+          [{
+            "value": 9,
+            "color": "blue"
+          }, {
+            "value": 2,
+            "color": "red"
+          },
+          {
+            "value": -8,
+            "color": "green"
+          }],
+          [{
+            "value": 3,
+            "color": "yellow"
+          },
+          {
+            "value": 20,
+            "color": "white"
+          },
+          {
+            "value": 10,
+            "color": "purple"
+          }],
+          [{
+            "value": 7,
+            "color": "orange"
+          },
+          {
+            "value": 7,
+            "color": "orange"
+          },
+          {
+            "value": 7,
+            "color": "orange"
+          }]
+        ]
 
+      }
     },
+    methods: {
+      sleep (time) {
+        return new Promise((resolve) => setTimeout(resolve, time));
+      },
+      async start () {
+        for (let i = 0; i < this.testList.length; i++) {
+          this.testTmpItem = this.testList[i];
+          await this.sleep(1000);
+        }
+      },
+    }
   }
-}
 </script>
 
 <style lang="scss">
-.input{
-  width:70%;
-}
-.el-row{
-  align-items: left;
-}
+  .input {
+    width: 70%;
+  }
+  .el-row {
+    align-items: left;
+  }
 </style>
 

src/components/sortChart.vue

@@ -0,0 +1,126 @@
+<template>  
+  <div
+    class="sortChart"
+    :style="{'width':width + 'px', 'height': height+ 'px'}"
+  >
+    <div class="container">
+      <div
+        v-for="(item,idx) in list"
+        :key="'k-'+idx"
+        class="bar"
+        :style="{'height': getHeight(item.value)+ 'px'
+        ,'background-color': getColor(item.color)
+        ,'top': getTop(item.value) + 'px'
+        ,'width': itemWidth + 'px'
+        }"
+      >
+        <div
+          class="value"
+          :style="{'left': itemWidth / 2 - 7 + 'px'}"
+        >{{Math.abs(item["value"])}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  /**
+    * @name sortChart (组件名称)
+    * @desc 柱状图，用于排序
+    * @author Li Xuesong
+    * @param list 传入要显示的内容
+    * @param height 柱状图高度
+    * @param itemContainerWidth 柱状图相邻两个柱子的宽度
+    * @param itemWidth 柱子的宽度
+    * @date 
+    * @example 调用示例
+    * <sortChart></sortChart>
+    */
+
+  export default {
+    name: 'sortChart',
+    components: {},
+    props: {
+      list: {
+        default: () => [],
+      },
+      height: {
+        default: 150
+      },
+      itemContainerWidth: {
+        default: 60
+      },
+      itemWidth: {
+        default: 40
+      }
+
+    },
+    data () {
+      return {
+        max: 20,
+        width: 200
+      }
+    },
+    created () {
+    },
+    watch: {
+      list: function (data) {
+        this.max = Math.max(...data.map(v => v["value"]));
+        this.width = data.length * this.itemContainerWidth;
+      }
+    },
+    mounted () { },
+    methods: {
+      getTop (value) {
+        return value > 0 ? 0 : this.height;
+      },
+      getHeight (value) {
+        return (value < 0 ? -value : value) / this.max * this.height;
+      },
+      getColor (color) {
+        switch (color) {
+          case 'green': return '#00cec9';
+          case 'orange': return '#e17055';
+          case 'red': return '#ff7675';
+          case 'purple': return '#a29bfe';
+          case 'yellow': return '#fdcb6e';
+          case 'white': return '#dfe6e9';
+          case 'blue': return '#0984e3'
+        }
+        return color;
+      }
+    },
+    watch: {}
+  }
+</script>
+
+<style scoped>
+  .sortChart {
+    /* width: 800px; */
+    height: 300px;
+  }
+  .container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: flex-end;
+    justify-content: space-around;
+    flex-wrap: nowrap;
+    flex-direction: row;
+  }
+  .bar {
+    display: flex;
+    width: 40px;
+    position: relative;
+  }
+  .value {
+    position: absolute;
+    bottom: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    -moz-user-select: none; /* 火狐 */
+    -webkit-user-select: none; /* 谷歌 */
+    -ms-user-select: none; /* IE */
+    user-select: none;
+  }
+</style>

src/router/index.js

@@ -22,10 +22,10 @@ export default new Router({
       component: helloWorld
     },
     {
-      path:'/data-structure',
-      name:'navigation',
-      component:navigation,
-      children:[
+      path: '/data-structure',
+      name: 'navigation',
+      component: navigation,
+      children: [
         {
           path: '/data-structure/stack',
           name: 'stack',