src/components/bubbleSort.vue

@@ -1,68 +1,1970 @@
 <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"
-        },
-        {
-          value:"descending",
-          label:"descending"
-        }
-      ]
+  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: [],
+        testList: [
+          [
+
+            {
+
+              "value": 9,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "blue"
+
+            }
+
+          ]
+        ],
+        testInsertionSort: {
+
+          "content": {
+
+            "initial": {
+
+              "type": "onInsertion",
+
+              "insertionIndex": 0,
+
+              "content": [
+
+                {
+
+                  "value": 4,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 3,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 2,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 1,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 0,
+
+                  "color": "blue"
+
+                }
+
+              ]
+
+            },
+
+            "onSortingStates": [
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 4,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 4,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
 
-    }
-  },
-  methods:{
-    start(){
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
 
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "allSorted",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              }
+
+            ]
+
+          },
+
+          "message": null,
+
+          "success": true
+
+        }
+
+      }
     },
+    methods: {
+      sleep (time) {
+        return new Promise((resolve) => setTimeout(resolve, time));
+      },
+      async start () {
+        this.testTmpItem = [];
+        await this.sleep(500);
+        let tmplist = ((res) => {
+          res = res.content;
+          let stepUnit = res.onSortingStates.map((v) => v.content);
+          let allSteps = [res.initial.content, ...stepUnit];
+          return allSteps;
+        })(this.testInsertionSort);
+
+        this.testTmpItem = tmplist[0];
+        await this.sleep(500);
+        for (let i = 0; i < tmplist.length; i++) {
+          this.testTmpItem = tmplist[i];
+          await this.sleep(300);
+        }
+      },
+    }
   }
-}
 </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,211 @@
+<template>  
+  <div
+    class="sortChart"
+    :style="{'width':width + 'px', 'height': height+ 'px'}"
+  >
+    <!-- <div class="container"> -->
+    <transition-group
+      class="container"
+      name="flip-list"
+      tag="div"
+    >
+      <div
+        v-for="item in listWithKey"
+        :key="item.key"
+        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>
+    </transition-group>
+    <!-- </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,
+        listWithKey: []
+      }
+    },
+    mounted () {
+      this.listWithKey = list.map((item, idx) => {
+        return {
+          key: idx,
+          value: item.value,
+          color: item.color
+        }
+      });
+    },
+    // computed: {
+    //   thisList (val) {
+    //     return this.list;
+    //   }
+    // },
+    watch: {
+      list: {
+        handler: function (data, old) {
+          if (data == null || data.length == 0) {
+            this.listWithKey = [];
+            return;
+          }
+          // console.log(data, old);
+          this.max = Math.max(...data.map(v => v["value"]));
+          this.width = data.length * this.itemContainerWidth;
+          if (old == null || old.length == 0) {
+            this.listWithKey = data.map((item, idx) => {
+              // console.log(idx);
+              return {
+                key: idx,
+                value: item.value,
+                color: item.color
+              }
+            });
+            // console.log(this.listWithKey);
+          } else this.diff(data, this.listWithKey);
+        },
+        immediate: true
+      }
+    },
+    mounted () { },
+    methods: {
+      diff (val, old) {
+        let status = {
+          v0c1: [], //value 不变， color改变 => 全部变色
+          v1c0: [], //value 变负， color不变 => 下移
+          v1c1: [], //value 变负， color改变 => 下移+变色
+          v2: [] //value 变其他数据 => 改变数据==2，交换； ！=2，直接重新赋值
+        };
+        // old = [{value:1,color:red,key:0}, {value:2,color:red,key:1}]
+        // val = [{value:2,color:red}, {value:1,color:red}]
+
+        for (let i = 0; i < val.length; i++) {
+          val[i]["key"] = old[i]["key"];
+        }
+        // console.log(val);
+        for (let i = 0; i < val.length; i++) {
+          if (old[i].value == val[i].value) {
+            if (old[i].color != val[i].color) {
+              status.v0c1.push(i);
+            }
+          } else if (old[i].value == -val[i].value) {
+            if (old[i].color == val[i].color) {
+              status.v1c0.push(i);
+            }
+            else {
+              status.v1c1.push(i);
+            }
+          } else {
+            status.v2.push(i);
+          }
+        }
+        if (status.v2.length > 0 && status.v2.length != 2) return;
+        status.v0c1.forEach(idx => this.$set(this.listWithKey, idx, val[idx]));
+        status.v1c0.forEach(idx => this.$set(this.listWithKey, idx, val[idx]));
+        status.v1c1.forEach(idx => this.$set(this.listWithKey, idx, val[idx]));
+        if (status.v2.length == 2) {
+          // console.log(status.v2);
+          let tmp = val[status.v2[1]].key;
+          val[status.v2[1]].key = val[status.v2[0]].key;
+          val[status.v2[0]].key = tmp;
+          this.$set(this.listWithKey, status.v2[1], val[status.v2[1]]);
+          this.$set(this.listWithKey, status.v2[0], val[status.v2[0]]);
+        }
+
+        // console.log(this.listWithKey);
+      },
+      getTop (value) {
+        return value >= 0 ? 0 : this.height;
+      },
+      getHeight (value) {
+        return (value < 0 ? -value : value) / this.max * this.height + 1;
+      },
+      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;
+      }
+    }
+  }
+</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;
+  }
+  .flip-list-move {
+    transition: transform 0.5s;
+  }
+</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',