init

2017-04-18 15:09:13 +08:00
parent 304b17520c
commit d10370086e
145 changed files with 61322 additions and 0 deletions
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -0,0 +1,113 @@
+<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 = [];
+          for (let i = 0; i < 30; i++) {
+            xAxisData.push(i + '号');
+            data.push(Math.round(Math.random() * 2 + 3))
+          }
+
+          this.chart.setOption(
+            {
+              backgroundColor: '#08263a',
+              tooltip: {
+                trigger: 'axis'
+              },
+              xAxis: {
+                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: {}
+              },
+              series: [{
+                type: 'bar',
+                data,
+                name: '撸文数',
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: 5,
+                    shadowBlur: 10,
+                    shadowColor: '#111'
+                  }
+                },
+                animationEasing: 'elasticOut',
+                animationEasingUpdate: 'elasticOut',
+                animationDelay(idx) {
+                  return idx * 20;
+                },
+                animationDelayUpdate(idx) {
+                  return idx * 20;
+                }
+              }]
+            }
+                )
+        }
+      }
+    }
+</script>