测试echarts

src/App.vue

@@ -22,10 +22,11 @@ export default {
 html, body
   width 100%
   height 100%
+  font-size 1vw
   user-select none
 #app
   /* font-family: 'Avenir', Helvetica, Arial, sans-serif; */
-  font-family DIN, Microsoft YaHei UI, 'Avenir', Helvetica, Arial, sans-serif
+  font-family DIN, 'Avenir', Helvetica, Arial, sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale
   width 100%

src/assets/css/variables.styl

 $fontColor = #2c3e50
+$edgeColor = #2ee4f5
+$cardBg = rgba(19, 78, 115, 0.4)
+$cardBorder = 0.1rem solid #1c425f
+$cardFontColor = #0eb2ee
+

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="stylus" scoped>
-$red = gold
-h1, h2
-  font-weight normal
-  color $red
-ul
-  list-style-type none
-  padding 0
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: $red;
-}
-</style>

src/components/MonitorBrief/index.js

+import MonitorBrief from './monitor-brief.vue'
+export default (Vue) => {
+  Vue.component('m-brief', MonitorBrief)
+}

src/components/MonitorBrief/monitor-brief.vue

+<template>
+  <div class="brief-container">
+    <span class="label">{{label}}</span>
+    <m-count class="count" :value="value"/>
+    <span>{{unit}}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MonitorBrief',
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+    unit: {
+      type: String,
+      default: '',
+    }
+  },
+  computed: {
+    value() {
+      return this.count
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.brief-container
+  display flex
+  align-items flex-end
+  color #fff
+  font-size 0.8rem
+  .label
+    color $cardFontColor
+    margin-right 0.5rem
+  .count
+    font-size 1.2rem
+    font-weight bold
+</style>

src/components/MonitorCard/index.js

+import MonitorCard from './monitor-card.vue'
+export default (Vue) => {
+  Vue.component('m-card', MonitorCard)
+}

src/components/MonitorCard/monitor-card.vue

+<template>
+  <div class="card-wrapper">
+    <div class="card-title">收入监控</div>
+    <div class="edge left-top"/>
+    <div class="edge right-top"/>
+    <div class="edge left-bottom"/>
+    <div class="edge right-bottom"/>
+    <div class="edge shadow left"/>
+    <div class="edge shadow right"/>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MonitorCard'
+}
+</script>
+
+<style lang="stylus" scoped>
+.card-wrapper
+  background $cardBg
+  border $cardBorder
+  width 100%
+  height 100%
+  padding 0.5rem 1rem
+  position relative
+  .card-title
+    color $cardFontColor
+    border-bottom $cardBorder
+    padding-bottom 0.5rem
+    font-size 1.2rem
+    font-weight bold
+  .edge
+    position absolute
+    width 1rem
+    height 1rem
+    border: 0.1rem solid $edgeColor
+    &.left-top
+      border-right-color transparent
+      border-bottom-color transparent
+      top 0
+      left 0
+    &.right-top
+      border-left-color transparent
+      border-bottom-color transparent
+      top 0
+      right 0
+    &.left-bottom
+      border-right-color transparent
+      border-top-color transparent
+      bottom 0
+      left 0
+    &.right-bottom
+      border-left-color transparent
+      border-top-color transparent
+      bottom 0
+      right 0
+    &.shadow
+      background $edgeColor
+      height 24%
+      width 0.1rem
+      border none
+      top 0
+      bottom 0
+      margin auto
+      &.left
+        left 0
+        box-shadow 1px 0px 6px 1px $edgeColor
+      &.right
+        right 0
+        box-shadow -1px 0px 6px 1px $edgeColor
+</style>

src/components/MonitorCount/index.js

+import MonitorCount from './monitor-count.vue'
+export default (Vue) => {
+  Vue.component('m-count', MonitorCount)
+}

src/components/MonitorCount/monitor-count.vue

+<template>
+<ICountUp
+  :delay="delay"
+  :endVal="value"
+  :options="options"
+  @ready="onReady"
+  />
+</template>
+
+<script>
+import ICountUp from 'vue-countup-v2'
+export default {
+  name: 'MonitorCount',
+  components: {
+    ICountUp,
+  },
+  props: {
+    delay: {
+      type: Number,
+      default: 500,
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+    options: {
+      type: Object,
+      default() {
+        return {
+          useEasing: true,
+          useGrouping: true,
+          separator: ',',
+          decimal: '.',
+          prefix: '',
+          suffix: '',
+        }
+      }
+    },
+    autoUpdate: {
+      type: Boolean,
+      default: false,
+    },
+    updateDuration: {
+      type: Number,
+      default: 1,
+    },
+  },
+  methods: {
+    onReady(instance, countup) {
+      if (!this.autoUpdate) return
+      setTimeout(() => {
+        instance.reset()
+        instance.update(instance.endVal)
+      }, 1000 * 60 * this.updateDuration)
+    },
+  }
+}
+</script>

src/main.js

@@ -4,10 +4,18 @@ import 'babel-polyfill'
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import echarts from 'echarts'
 import {Button} from 'view-design'
+import MonitorCard from '@/components/MonitorCard'
+import MonitorCount from '@/components/MonitorCount'
+import MonitorBrief from '@/components/MonitorBrief'
 import 'view-design/dist/styles/iview.css'
 
 Vue.config.productionTip = false
+Vue.prototype.$echarts = echarts
+Vue.use(MonitorCard)
+Vue.use(MonitorCount)
+Vue.use(MonitorBrief)
 Vue.component('Button', Button)
 
 /* eslint-disable no-new */

src/views/chart.vue

+<template>
+  <div id="chart" ref="chart"/>
+</template>
+
+<script>
+export default {
+  name: 'Chart',
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const chart = this.$echarts.init(this.$refs.chart)
+      const options = {
+        grid: {
+          top: '30px',
+          left: '5px',
+          right: '5px',
+          bottom: '5px',
+          width: '100%',
+          height: 'auto',
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+            },
+            fontSize: this.fontSize,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#aaa',
+            }
+          },
+        },
+        yAxis: {
+          type: 'value',
+          interval: 20,
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+            },
+            fontSize: this.fontSize,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#aaa',
+            }
+          },
+        },
+        series: [
+          {
+            type: 'bar',
+            barWidth: '30%',
+            barGap: 0,
+            itemStyle: {
+              shadowColor: '#1ce8ff',
+              shadowBlur: 6,
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {offset: 0, color: '#1ce8ff'},
+                {offset: 1, color: '#0079fd'}
+              ])
+            },
+            data: [10, 20, 30, 40, 50, 60, 10, 20, 30, 40, 50, 60],
+          },
+          {
+            type: 'bar',
+            barWidth: '30%',
+            barGap: 0,
+            itemStyle: {
+              shadowColor: '#c16ad6',
+              shadowBlur: 6,
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {offset: 0, color: '#c16ad6'},
+                {offset: 1, color: '#3725b2'}
+              ])
+            },
+            data: [20, 40, 60, 40, 50, 10, 30, 40, 60, 40, 50, 10],
+          },
+        ],
+      }
+      chart.setOption(options)
+    }
+  },
+  computed: {
+    fontSize() {
+      return Math.floor(window.innerWidth / 100) - 1
+    },
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+#chart
+  height 100%
+  width 100%
+</style>

src/views/main.vue

 <template>
 <div class="main-container">
   <div class="box1"></div>
-  <div class="box2"></div>
-  <div class="box3"></div>
-  <div class="box4"></div>
-  <div class="box5"></div>
-  <div class="box6"></div>
+  <div class="box2">
+    <m-card>
+      <div style="height: 100%">
+        <div style="display: flex;">
+          <m-brief label="正常项目" :count="7" unit="个"/>&nbsp;&nbsp;&nbsp;
+          <m-brief label="对应收入" :count="7697431" unit="元"/>
+        </div>
+        <div style="display: flex;">
+          <m-brief label="应签未签合同项目" :count="6" unit="个"/>&nbsp;&nbsp;&nbsp;
+          <m-brief label="对应收入" :count="6153417" unit="元"/>
+        </div>
+        <div style="height:80%">
+          <Chart />
+        </div>
+      </div>
+    </m-card>
+  </div>
+  <div class="box3"><m-card></m-card></div>
+  <div class="box4"><m-card></m-card></div>
+  <div class="box5"><m-card><Chart></Chart></m-card></div>
+  <div class="box6"><m-card></m-card></div>
 </div>
 </template>
 
 <script>
+import Chart from './chart'
 export default {
   name: 'Main',
+  components: {
+    Chart,
+  },
 }
 </script>
 
 <style lang="stylus" scoped>
 .main-container
-  background $fontColor
+  background #0b131e
   width 100%
   height 100%
   display grid
@@ -26,25 +46,21 @@ export default {
     'box2 box3 box4'\
     'box5 box3 box4'\
     'box6 box6 box6'
-  grid-template-rows 1fr 3fr 3fr 1fr
-  grid-gap 10px
-  padding 10px
+  grid-template-rows 1fr 3fr 3fr 2fr
+  grid-template-columns 1fr 1fr 1fr
+  grid-gap 1rem
+  padding 1rem
   .box1
     background red
     grid-area box1
   .box2
-    background blue
     grid-area box2
   .box3
-    background gold
     grid-area box3
   .box4
-    background green
     grid-area box4
   .box5
-    background gray
     grid-area box5
   .box6
-    background #fff
     grid-area box6
 </style>