add view

src/components/Charts/keyboard2.vue

@@ -0,0 +1,149 @@
+<template>
+    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+<script>
+    // 引入 ECharts 主模块
+    const echarts = require('echarts/lib/echarts');
+    // 引入柱状图
+    require('echarts/lib/chart/bar');
+    require('echarts/lib/chart/line');
+    // 引入提示框和标题组件
+    require('echarts/lib/component/tooltip');
+    require('echarts/lib/component/title');
+
+    require('echarts/lib/component/visualMap');
+    export default {
+      name: 'barPercent',
+      props: {
+        className: {
+          type: String,
+          default: 'bar-percent-chart'
+        },
+        id: {
+          type: String,
+          default: 'bar-percent-chart'
+        },
+        width: {
+          type: String,
+          default: '200px'
+        },
+        height: {
+          type: String,
+          default: '200px'
+        }
+      },
+      data() {
+        return {};
+      },
+      mounted() {
+        this.initBar();
+      },
+      methods: {
+        initBar() {
+          this.chart = echarts.init(document.getElementById(this.id));
+
+          const xAxisData = [];
+          const data = [];
+          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',
+              xAxis: [{
+                show: false,
+                data: xAxisData
+              }, {
+                show: false,
+                data: xAxisData
+              }],
+              visualMap: {
+                show: false,
+                min: 0,
+                max: 50,
+                dimension: 0,
+                inRange: {
+                  color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+                }
+              },
+              yAxis: {
+                axisLine: {
+                  show: false
+                },
+                axisLabel: {
+                  textStyle: {
+                    color: '#4a657a'
+                  }
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#08263f'
+                  }
+                },
+                axisTick: {
+                  show: false
+                }
+              },
+              series: [{
+                name: 'back',
+                type: 'bar',
+                data: data2,
+                z: 1,
+                itemStyle: {
+                  normal: {
+                    opacity: 0.4,
+                    barBorderRadius: 5,
+                    shadowBlur: 3,
+                    shadowColor: '#111'
+                  }
+                }
+              }, {
+                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;
+              }
+            })
+        }
+      }
+    }
+</script>

src/components/Hamburger/index.vue

@@ -1,8 +1,6 @@
 <template>
     <div>
-        <svg @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" aria-hidden="true">
-            <use xlink:href="#icon-hamburger"></use>
-        </svg>
+        <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}"  style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path></svg>
     </div>
 </template>