rm:remove keyboard2 demo

src/components/Charts/keyboard.vue

@@ -45,21 +45,22 @@ export default {
 
       const xAxisData = []
       const data = []
-      for (let i = 0; i < 30; i++) {
-        xAxisData.push(i + '号')
-        data.push(Math.round(Math.random() * 2 + 3))
+      const data2 = []
+      for (let i = 0; i < 50; i++) {
+        xAxisData.push(i)
+        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
       }
-
       this.chart.setOption(
         {
           backgroundColor: '#08263a',
-          tooltip: {
-            trigger: 'axis'
-          },
-          xAxis: {
+          xAxis: [{
             show: false,
             data: xAxisData
-          },
+          }, {
+            show: false,
+            data: xAxisData
+          }],
           visualMap: {
             show: false,
             min: 0,
@@ -84,28 +85,64 @@ export default {
                 color: '#08263f'
               }
             },
-            axisTick: {}
+            axisTick: {
+              show: false
+            }
           },
           series: [{
+            name: 'back',
             type: 'bar',
-            data,
-            name: '撸文数',
+            data: data2,
+            z: 1,
             itemStyle: {
               normal: {
+                opacity: 0.4,
                 barBorderRadius: 5,
-                shadowBlur: 10,
+                shadowBlur: 3,
                 shadowColor: '#111'
               }
-            },
-            animationEasing: 'elasticOut',
-            animationEasingUpdate: 'elasticOut',
-            animationDelay(idx) {
-              return idx * 20
-            },
-            animationDelayUpdate(idx) {
-              return idx * 20
             }
-          }]
+          }, {
+            name: 'Simulate Shadow',
+            type: 'line',
+            data,
+            z: 2,
+            showSymbol: false,
+            animationDelay: 0,
+            animationEasing: 'linear',
+            animationDuration: 1200,
+            lineStyle: {
+              normal: {
+                color: 'transparent'
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: '#08263a',
+                shadowBlur: 50,
+                shadowColor: '#000'
+              }
+            }
+          }, {
+            name: 'front',
+            type: 'bar',
+            data,
+            xAxisIndex: 1,
+            z: 3,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5
+              }
+            }
+          }],
+          animationEasing: 'elasticOut',
+          animationEasingUpdate: 'elasticOut',
+          animationDelay(idx) {
+            return idx * 20
+          },
+          animationDelayUpdate(idx) {
+            return idx * 20
+          }
         })
     }
   }