v 1.1.0

.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not ie <= 8

.editorconfig

@@ -1,5 +0,0 @@
-[*.{js,jsx,ts,tsx,vue}]
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-insert_final_newline = true

.eslintrc.js

@@ -1,17 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/essential',
-    '@vue/standard'
-  ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
-}

README.md

@@ -1,29 +1,15 @@
-# jdyw_datav
+# DataV
 
-## Project setup
+# Version 1.1.0
-```
-yarn install
-```
 
-### Compiles and hot-reloads for development
+## Vue 大屏数据展示组件库
-```
-yarn run serve
-```
 
-### Compiles and minifies for production
+## Vue Large screen data display component library
-```
-yarn run build
-```
 
-### Run your tests
+[文档官网](http://datav.jiaminghi.com/)
-```
-yarn run test
-```
 
-### Lints and fixes files
+[Document of official website](http://datav.jiaminghi.com/)
-```
-yarn run lint
-```
 
-### Customize configuration
+[项目地址](https://github.com/jiaming743/DataV)
-See [Configuration Reference](https://cli.vuejs.org/config/).
+
+[Project address](https://github.com/jiaming743/DataV)

babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}

components/arcRingChart/index.vue

@@ -1,30 +1,28 @@
 <template>
   <div class="arc-ring-chart">
-    <loading v-if="!data" />
+    <loading v-if="!status" />
 
-    <div class="label-line" v-else>
+    <div class="canvas-container">
-      <div class="label-item" v-for="(label, i) in data.data" :key="label.title">
+      <canvas :ref="ref" />
-        <div :style="`background-color: ${data.color[i % data.color.length]};`"></div>
-        <div>{{ label.title }}</div>
-      </div>
     </div>
 
-    <canvas :ref="ref" />
+    <label-line :label="dealAfterLabelLine" :colors="drawColors" />
   </div>
 </template>
 
 <script>
+import colorsMixin from '../../mixins/colorsMixin.js'
+import canvasMixin from '../../mixins/canvasMixin.js'
+
 export default {
   name: 'ArcRingChart',
-  props: ['data'],
+  props: ['data', 'labelLine', 'colors'],
+  mixins: [colorsMixin, canvasMixin],
   data () {
     return {
       ref: `concentric-arc-chart-${(new Date()).getTime()}`,
-      canvasDom: '',
-      canvasWH: [0, 0],
-      ctx: '',
 
-      arcOriginPos: [],
+      status: false,
 
       defaultDecorationCircleRadius: 0.65,
       defaultArcRadiusArea: [0.3, 0.4],
@@ -41,53 +39,45 @@ export default {
       arcRadian: [],
       arcWidth: [],
 
-      labelLinePoints: []
+      labelLinePoints: [],
+
+      dealAfterLabelLine: []
     }
   },
   watch: {
     data (d) {
-      const { draw } = this
+      const { checkData, draw } = this
 
-      d && draw()
+      checkData() && draw()
     }
   },
   methods: {
-    init () {
+    async init () {
-      const { $nextTick, initCanvas, calcArcConfig, data, draw } = this
+      const { initCanvas, initColors, checkData, draw } = this
 
-      $nextTick(e => {
+      await initCanvas()
-        initCanvas()
 
-        calcArcConfig()
+      initColors()
 
-        data && draw()
+      checkData() && draw()
-      })
     },
-    initCanvas () {
+    checkData () {
-      const { $refs, ref, labelRef, canvasWH } = this
+      const { data } = this
 
-      const canvas = this.canvasDom = $refs[ref]
+      this.status = false
 
-      this.labelDom = $refs[labelRef]
+      if (!data || !data.series) return false
 
-      canvasWH[0] = canvas.clientWidth
+      this.status = true
-      canvasWH[1] = canvas.clientHeight
 
-      canvas.setAttribute('width', canvasWH[0])
+      return true
-      canvas.setAttribute('height', canvasWH[1])
-
-      this.ctx = canvas.getContext('2d')
-    },
-    calcArcConfig () {
-      const { canvasWH, arcOriginPos } = this
-
-      arcOriginPos[0] = canvasWH[0] / 2
-      arcOriginPos[1] = canvasWH[1] / 2
     },
     draw () {
-      const { ctx, canvasWH, drawDecorationCircle } = this
+      const { clearCanvas, calcLabelLineData, drawDecorationCircle } = this
 
-      ctx.clearRect(0, 0, ...canvasWH)
+      clearCanvas()
+
+      calcLabelLineData()
 
       drawDecorationCircle()
 
@@ -109,10 +99,19 @@ export default {
 
       drawLabelText()
     },
-    drawDecorationCircle () {
+    calcLabelLineData () {
-      const { ctx, data: { decorationCircleRadius }, defaultDecorationCircleRadius, arcOriginPos } = this
+      const { labelLine, deepClone, data: { series } } = this
 
-      const radius = this.decorationRadius = Math.min(...arcOriginPos) * (decorationCircleRadius || defaultDecorationCircleRadius)
+      if (!labelLine) return
+
+      const dealAfterLabelLine = this.dealAfterLabelLine = deepClone(labelLine)
+
+      if (labelLine.labels === 'inherit') dealAfterLabelLine.labels = series.map(({ title }) => title)
+    },
+    drawDecorationCircle () {
+      const { ctx, data: { decorationCircleRadius }, defaultDecorationCircleRadius, centerPos } = this
+
+      const radius = this.decorationRadius = Math.min(...centerPos) * (decorationCircleRadius || defaultDecorationCircleRadius)
 
       ctx.beginPath()
 
@@ -120,7 +119,7 @@ export default {
 
       ctx.lineWidth = 4
 
-      ctx.arc(...arcOriginPos, radius, 0, Math.PI * 2)
+      ctx.arc(...centerPos, radius, 0, Math.PI * 2)
 
       ctx.stroke()
 
@@ -128,62 +127,62 @@ export default {
 
       ctx.lineWidth = 1
 
-      ctx.arc(...arcOriginPos, radius - 7, 0, Math.PI * 2)
+      ctx.arc(...centerPos, radius - 7, 0, Math.PI * 2)
 
       ctx.closePath()
 
       ctx.stroke()
     },
     calcArcRadius () {
-      const { data: { data, arcRadiusArea }, defaultArcRadiusArea, arcOriginPos, randomExtend } = this
+      const { data: { series, arcRadiusArea }, defaultArcRadiusArea, centerPos, randomExtend } = this
 
-      const fullRadius = Math.min(...arcOriginPos)
+      const fullRadius = Math.min(...centerPos)
 
       const currentArcRaidusArea = arcRadiusArea || defaultArcRadiusArea
 
       const maxRadius = fullRadius * Math.max(...currentArcRaidusArea)
       const minRadius = fullRadius * Math.min(...currentArcRaidusArea)
 
-      this.arcRadius = data.map(t => randomExtend(minRadius, maxRadius))
+      this.arcRadius = series.map(t => randomExtend(minRadius, maxRadius))
     },
     calcArcRadian () {
-      const { data: { data }, multipleSum, radianOffset } = this
+      const { data: { series }, multipleSum, radianOffset } = this
 
-      const valueSum = this.totalValue = multipleSum(...data.map(({ value }) => value))
+      const valueSum = this.totalValue = multipleSum(...series.map(({ value }) => value))
 
       let radian = radianOffset
 
       const fullRadian = Math.PI * 2
 
-      const avgRadian = fullRadian / data.length
+      const avgRadian = fullRadian / series.length
 
-      this.arcRadian = data.map(({ value }) => {
+      this.arcRadian = series.map(({ value }) => {
         const valueRadian = valueSum === 0 ? avgRadian : value / valueSum * fullRadian
 
         return [radian, (radian += valueRadian)]
       })
     },
     calcArcWidth () {
-      const { data: { data, arcWidthArea }, defaultArcWidthArea, randomExtend } = this
+      const { data: { series, arcWidthArea }, defaultArcWidthArea, randomExtend } = this
 
       const currentArea = arcWidthArea || defaultArcWidthArea
 
       const maxWidth = Math.max(...currentArea)
       const minWidth = Math.min(...currentArea)
 
-      this.arcWidth = data.map(t => randomExtend(minWidth, maxWidth))
+      this.arcWidth = series.map(t => randomExtend(minWidth, maxWidth))
     },
     drawArc () {
-      const { ctx, arcRadius, arcRadian, arcWidth, data: { color }, arcOriginPos } = this
+      const { ctx, arcRadius, arcRadian, arcWidth, drawColors, centerPos } = this
 
-      const colorNum = color.length
+      const colorNum = drawColors.length
 
       arcRadius.forEach((radius, i) => {
         ctx.beginPath()
 
-        ctx.arc(...arcOriginPos, radius, ...arcRadian[i])
+        ctx.arc(...centerPos, radius, ...arcRadian[i])
 
-        ctx.strokeStyle = color[i % colorNum]
+        ctx.strokeStyle = drawColors[i % colorNum]
 
         ctx.lineWidth = arcWidth[i]
 
@@ -191,9 +190,9 @@ export default {
       })
     },
     calcLableLinePoints () {
-      const { arcRadian, arcRadius, arcOriginPos: [x, y], totalValue } = this
+      const { arcRadian, arcRadius, centerPos: [x, y], totalValue } = this
 
-      const { canvas: { getCircleRadianPoint }, data: { data } } = this
+      const { canvas: { getCircleRadianPoint }, data: { series } } = this
 
       let [leftlabelLineNum, rightLabelLineNum] = [0, 0]
 
@@ -202,8 +201,8 @@ export default {
 
         const point = getCircleRadianPoint(x, y, arcRadius[i], middleRadian)
 
-        point[0] > x && (data[i].value || !totalValue) && rightLabelLineNum++
+        point[0] > x && (series[i].value || !totalValue) && rightLabelLineNum++
-        point[0] <= x && (data[i].value || !totalValue) && leftlabelLineNum++
+        point[0] <= x && (series[i].value || !totalValue) && leftlabelLineNum++
 
         return point
       })
@@ -226,7 +225,7 @@ export default {
       const rightNearRadiusX = x + maxRadius + 8
 
       this.labelLinePoints = arcMiddlePoints.map(([px, py], i) => {
-        if (!data[i].value && totalValue) return [false, false, false, false]
+        if (!series[i].value && totalValue) return [false, false, false, false]
 
         if (px > x) {
           const yPos = rightYPos.shift()
@@ -267,15 +266,15 @@ export default {
       }
     },
     drawLabelLine () {
-      const { ctx, labelLinePoints, canvas: { drawPolyline }, data: { color } } = this
+      const { ctx, labelLinePoints, canvas: { drawPolyline }, drawColors } = this
 
-      const colorNum = color.length
+      const colorNum = drawColors.length
 
       labelLinePoints.forEach((polyline, i) =>
-        polyline[0] && drawPolyline(ctx, polyline, 2, color[i % colorNum], false, [10, 0], true))
+        polyline[0] && drawPolyline(ctx, polyline, 2, drawColors[i % colorNum], false, [10, 0], true))
     },
     drawLabelText () {
-      const { ctx, labelLinePoints, data: { data, labelFontSize, fixed }, totalValue, defaultLabelFontSize, arcOriginPos: [x] } = this
+      const { ctx, labelLinePoints, data: { series, labelFontSize, fixed }, totalValue, defaultLabelFontSize, centerPos: [x] } = this
 
       ctx.font = `${labelFontSize || defaultLabelFontSize}px Arial`
 
@@ -283,9 +282,9 @@ export default {
 
       let totalPercent = 0
 
-      const dataLast = data.length - 1
+      const dataLast = series.length - 1
 
-      data.forEach(({ value, title }, i) => {
+      series.forEach(({ value, title }, i) => {
         if (!value && totalValue) return
 
         let currentPercent = (value / totalValue * 100).toFixed(fixed || 1)
@@ -323,36 +322,18 @@ export default {
 <style lang="less">
 .arc-ring-chart {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .canvas-container {
+    position: relative;
+    flex: 1;
+  }
 
   canvas {
     width: 100%;
     height: 100%;
   }
-
-  .label-line {
-    position: absolute;
-    left: 0px;
-    bottom: 0px;
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    font-size: 10px;
-
-    .label-item {
-      display: flex;
-      flex-direction: row;
-      margin: 0px 3px;
-      height: 20px;
-      align-items: center;
-
-      :nth-child(1) {
-        width: 10px;
-        height: 10px;
-        margin-right: 5px;
-      }
-    }
-  }
 }
 </style>

components/borderBox1/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="border-box-1">
+  <div class="dv-border-box-1">
-    <img class="flash-left-top" src="./img/border.gif">
+    <img class="dv-flash-left-top" src="./img/border.gif">
-    <img class="flash-right-top" src="./img/border.gif">
+    <img class="dv-flash-right-top" src="./img/border.gif">
-    <img class="flash-left-bottom" src="./img/border.gif">
+    <img class="dv-flash-left-bottom" src="./img/border.gif">
-    <img class="flash-right-bottom" src="./img/border.gif">
+    <img class="dv-flash-right-bottom" src="./img/border.gif">
     <slot></slot>
   </div>
 </template>
@@ -15,7 +15,7 @@ export default {
 </script>
 
 <style lang="less">
-.border-box-1 {
+.dv-border-box-1 {
   position: relative;
   box-sizing: border-box;
   min-width: 300px;
@@ -23,29 +23,29 @@ export default {
   padding: 35px;
   overflow: hidden;
 
-  .flash-left-top, .flash-right-top, .flash-left-bottom, .flash-right-bottom {
+  .dv-flash-left-top, .dv-flash-right-top, .dv-flash-left-bottom, .dv-flash-right-bottom {
     position: absolute;
     width: 250px;
   }
 
-  .flash-left-top {
+  .dv-flash-left-top {
     top: 0px;
     left: -70px;
   }
 
-  .flash-right-top {
+  .dv-flash-right-top {
     top: 0px;
     right: -70px;
     transform: rotateY(180deg);
   }
 
-  .flash-left-bottom {
+  .dv-flash-left-bottom {
     bottom: 0px;
     left: -70px;
     transform: rotateX(180deg);
   }
 
-  .flash-right-bottom {
+  .dv-flash-right-bottom {
     bottom: 0px;
     right: -70px;
     transform: rotate(180deg);

components/borderBox2/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="dv-border-box-2" :ref="ref">
+    <svg class="dv-border-svg-container">
+      <polyline class="dv-bb2-line1"
+        :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" />
+      <polyline class="dv-bb2-line2"
+        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`" />
+      <circle cx="11" cy="11" r="1" />
+      <circle :cx="width - 11" cy="11" r="1" />
+      <circle :cx="width - 11" :cy="height - 11" r="1" />
+      <circle cx="11" :cy="height - 11" r="1" />
+    </svg>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import borderBoxMixin from '../../mixins/borderBoxMixin.js'
+
+export default {
+  name: 'BorderBox2',
+  mixins: [borderBoxMixin],
+  data () {
+    return {
+      ref: `border-box-2-${(new Date()).getTime()}`
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.dv-border-box-2 {
+  position: relative;
+  box-sizing: border-box;
+  padding: 30px;
+
+  .dv-border-svg-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+
+    polyline {
+      fill: none;
+      stroke-width: 1;
+    }
+
+    circle {
+      fill: #fff;
+    }
+  }
+
+  .dv-bb2-line1 {
+    stroke: #fff;
+  }
+
+  .dv-bb2-line2 {
+    stroke: fade(#fff, 60);
+  }
+}
+</style>

components/borderBox3/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="dv-border-box-3" :ref="ref">
+    <svg class="dv-border-svg-container">
+      <polyline class="dv-bb3-line1"
+        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
+      <polyline class="dv-bb3-line2"
+        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`" />
+      <polyline class="dv-bb3-line2"
+        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`" />
+      <polyline class="dv-bb3-line2"
+        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`" />
+    </svg>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import borderBoxMixin from '../../mixins/borderBoxMixin.js'
+
+export default {
+  name: 'BorderBox3',
+  mixins: [borderBoxMixin],
+  data () {
+    return {
+      ref: `border-box-3-${(new Date()).getTime()}`
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.dv-border-box-3 {
+  position: relative;
+  box-sizing: border-box;
+  padding: 30px;
+
+  .dv-border-svg-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+
+    polyline {
+      fill: none;
+      stroke: #2862b7;
+    }
+  }
+
+  .dv-bb3-line1 {
+    stroke-width: 3;
+  }
+
+  .dv-bb3-line2 {
+    stroke-width: 1;
+  }
+}
+</style>

components/borderBox4/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="dv-border-box-4" :ref="ref">
+    <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`">
+      <polyline class="dv-bb4-line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
+        10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/>
+      <polyline class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
+        14, ${height - 100}`" />
+      <polyline class="dv-bb4-line-3" :points="`7, ${height - 40} 7, ${height - 75}`" />
+      <polyline class="dv-bb4-line-4" :points="`28, 24 13, 41 13, 64`" />
+      <polyline class="dv-bb4-line-5" :points="`5, 45 5, 140`" />
+      <polyline class="dv-bb4-line-6" :points="`14, 75 14, 180`" />
+      <polyline class="dv-bb4-line-7" :points="`55, 11 147, 11 167, 26 250, 26`" />
+      <polyline class="dv-bb4-line-8" :points="`158, 5 173, 16`" />
+      <polyline class="dv-bb4-line-9" :points="`200, 17 ${width - 10}, 17`" />
+      <polyline class="dv-bb4-line-10" :points="`385, 17 ${width - 10}, 17`" />
+    </svg>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import borderBoxMixin from '../../mixins/borderBoxMixin.js'
+
+export default {
+  name: 'BorderBox4',
+  mixins: [borderBoxMixin],
+  data () {
+    return {
+      ref: `border-box-4-${(new Date()).getTime()}`
+    }
+  },
+  props: ['reverse']
+}
+</script>
+
+<style lang="less" scoped>
+.dv-border-box-4 {
+  position: relative;
+  box-sizing: border-box;
+  padding: 30px;
+
+  .dv-reverse {
+    transform: rotate(180deg);
+  }
+
+  .dv-border-svg-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+
+    polyline {
+      fill: none;
+    }
+  }
+
+  .sred {
+    stroke: red;
+  }
+
+  .sblue {
+    stroke: fade(blue, 80);
+  }
+
+  .sw1 {
+    stroke-width: 1;
+  }
+
+  .sw3 {
+    stroke-width: 3px;
+    stroke-linecap: round;
+  }
+
+  .dv-bb4-line-1 {
+    .sred;
+    .sw1;
+  }
+
+  .dv-bb4-line-2 {
+    .sblue;
+    .sw1;
+  }
+
+  .dv-bb4-line-3 {
+    .sred;
+    .sw3;
+  }
+
+  .dv-bb4-line-4 {
+    .sred;
+    .sw3;
+  }
+
+  .dv-bb4-line-5 {
+    .sred;
+    .sw1;
+  }
+
+  .dv-bb4-line-6 {
+    .sblue;
+    .sw1;
+  }
+
+  .dv-bb4-line-7 {
+    .sblue;
+    .sw1;
+  }
+
+  .dv-bb4-line-8 {
+    .sblue;
+    .sw3;
+  }
+
+  .dv-bb4-line-9 {
+    .sred;
+    .sw3;
+    stroke-dasharray: 100 250;
+  }
+
+  .dv-bb4-line-10 {
+    .sblue;
+    .sw1;
+    stroke-dasharray: 80 270;
+  }
+}
+</style>

components/borderBox5/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="dv-border-box-5" :ref="ref">
+    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`">
+      <polyline class="dv-bb5-line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
+        ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
+      <polyline class="dv-bb5-line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
+        ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`" />
+      <polyline class="dv-bb5-line-3" :points="`50, 13 ${width - 35}, 13`" />
+      <polyline class="dv-bb5-line-4" :points="`15, 20 ${width - 35}, 20`" />
+      <polyline class="dv-bb5-line-5" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
+      <polyline class="dv-bb5-line-6" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
+    </svg>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import borderBoxMixin from '../../mixins/borderBoxMixin.js'
+
+export default {
+  name: 'BorderBox5',
+  mixins: [borderBoxMixin],
+  data () {
+    return {
+      ref: `border-box-5-${(new Date()).getTime()}`
+    }
+  },
+  props: ['reverse']
+}
+</script>
+
+<style lang="less">
+.dv-border-box-5 {
+  position: relative;
+  box-sizing: border-box;
+  padding: 20px;
+
+  .dv-reverse {
+    transform: rotate(180deg);
+  }
+
+  .dv-svg-container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+
+    polyline {
+      fill: none;
+    }
+  }
+
+  .dv-bb5-line-1 {
+    stroke-width: 1;
+    stroke: fade(#fff, 35);
+  }
+
+  .dv-bb5-line-2 {
+    stroke: fade(#fff, 20);
+  }
+
+  .dv-bb5-line-3, .dv-bb5-line-6 {
+    stroke-width: 5;
+    stroke: fade(#fff, 15);
+  }
+
+  .dv-bb5-line-4, .dv-bb5-line-5 {
+    stroke-width: 2;
+    stroke: fade(#fff, 15);
+  }
+
+}
+</style>

components/borderBox6/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="border-box-6" :ref="ref">
+  <div class="dv-border-box-6" :ref="ref">
-    <svg class="svg-container">
+    <svg class="dv-svg-container">
       <circle cx="5" cy="5" r="2"/>
       <circle :cx="width - 5" cy="5" r="2" />
       <circle :cx="width - 5" :cy="height - 5" r="2" />
@@ -24,40 +24,26 @@
 </template>
 
 <script>
+import borderBoxMixin from '../../mixins/borderBoxMixin.js'
+
 export default {
   name: 'BorderBox6',
+  mixins: [borderBoxMixin],
   data () {
     return {
-      ref: `border-box-6-${(new Date()).getTime()}`,
+      ref: `border-box-6-${(new Date()).getTime()}`
-      width: 0,
-      height: 0
     }
-  },
-  methods: {
-    init () {
-      const { $nextTick, $refs, ref } = this
-
-      $nextTick(e => {
-        this.width = $refs[ref].clientWidth
-        this.height = $refs[ref].clientHeight
-      })
-    }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
   }
 }
 </script>
 
 <style lang="less">
-.border-box-6 {
+.dv-border-box-6 {
   position: relative;
   box-sizing: border-box;
   padding: 10px;
 
-  .svg-container {
+  .dv-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;

components/borderBox7/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="dv-border-box-7" :ref="ref">
+    <svg class="dv-svg-container">
+      <polyline class="dv-bb7-line-width-2" :points="`0, 25 0, 0 25, 0`" />
+      <polyline class="dv-bb7-line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
+      <polyline class="dv-bb7-line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
+      <polyline class="dv-bb7-line-width-2" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
+
+      <polyline class="dv-bb7-line-width-5" :points="`0, 10 0, 0 10, 0`" />
+      <polyline class="dv-bb7-line-width-5" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
+      <polyline class="dv-bb7-line-width-5" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
+      <polyline class="dv-bb7-line-width-5" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
+    </svg>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import borderBoxMixin from '../../mixins/borderBoxMixin.js'
+
+export default {
+  name: 'BorderBox7',
+  mixins: [borderBoxMixin],
+  data () {
+    return {
+      ref: `border-box-7-${(new Date()).getTime()}`
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@color: fade(gray, 30);
+
+.dv-border-box-7 {
+  position: relative;
+  box-shadow: inset 0 0 40px fade(@color, 30);
+  box-sizing: border-box;
+  border: 1px solid @color;
+  padding: 10px;
+
+  .dv-svg-container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+
+    polyline {
+      fill: none;
+      stroke-linecap: round;
+    }
+  }
+
+  .dv-bb7-line-width-2 {
+    stroke: @color;
+    stroke-width: 2;
+  }
+
+  .dv-bb7-line-width-5 {
+    stroke: fade(gray, 50);
+    stroke-width: 5;
+  }
+}
+</style>

components/capsuleChart/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="capsule-chart">
 
-    <loading v-if="!data" />
+    <loading v-if="!status" />
 
     <template v-else>
       <div class="label-column">
-        <div v-for="item in data.data" :key="item.title">{{ item.title }}</div>
+        <div v-for="item in data.series" :key="item.title">{{ item.title }}</div>
         <div>&nbsp;</div>
       </div>
 
       <div class="capsule-container">
         <div class="capsule-item" v-for="(capsule, index) in capsuleData" :key="index">
-          <div :style="`width: ${capsule * 100}%; background-color: ${data.color[index % data.data.length]};`"></div>
+          <div :style="`width: ${capsule * 100}%; background-color: ${drawColors[index % drawColors.length]};`"></div>
         </div>
         <div class="unit-label">
           <div class="unit-container">
@@ -29,11 +29,16 @@
 </template>
 
 <script>
+import colorsMixin from '../../mixins/colorsMixin.js'
+
 export default {
   name: 'CapsuleChart',
-  props: ['data'],
+  props: ['data', 'colors'],
+  mixins: [colorsMixin],
   data () {
     return {
+      status: false,
+
       capsuleData: [],
       unitData: []
     }
@@ -47,16 +52,27 @@ export default {
   },
   methods: {
     init () {
-      const { data, calcCapsuleAndUnitData } = this
+      const { checkData, initColors, calcCapsuleAndUnitData } = this
 
-      if (!data) return
+      initColors()
 
-      calcCapsuleAndUnitData()
+      checkData() && calcCapsuleAndUnitData()
+    },
+    checkData () {
+      const { data } = this
+
+      this.status = false
+
+      if (!data || !data.series) return false
+
+      this.status = true
+
+      return true
     },
     calcCapsuleAndUnitData () {
-      const { data: { data } } = this
+      const { data: { series } } = this
 
-      const capsuleData = data.map(({ value }) => value)
+      const capsuleData = series.map(({ value }) => value)
 
       const maxValue = Math.max(...capsuleData)
 
@@ -82,6 +98,7 @@ export default {
   flex-direction: row;
   box-sizing: border-box;
   padding: 10px;
+  color: #fff;
 
   .label-column {
     display: flex;

components/columnChart/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="column-chart">
-    <loading v-if="!data" />
+    <loading v-if="!status" />
 
     <div class="canvas-container">
       <canvas :ref="ref" />
     </div>
 
-    <label-line :label="data.labelLine" :colors="drawColors" />
+    <label-line :label="labelLine" :colors="drawColors" />
 
     <for-slot><slot></slot></for-slot>
   </div>
@@ -22,11 +22,13 @@ import axisMixin from '../../mixins/axisMixin.js'
 export default {
   name: 'ColumnChart',
   mixins: [colorsMixin, canvasMixin, axisMixin],
-  props: ['data', 'colors'],
+  props: ['data', 'labelLine', 'colors'],
   data () {
     return {
       ref: `radar-chart-${(new Date()).getTime()}`,
 
+      status: false,
+
       // axis base config
       boundaryGap: true,
       mulValueAdd: true,
@@ -36,7 +38,7 @@ export default {
       defaultColumnBGColor: 'rgba(100, 100, 100, 0.2)',
 
       defaultValueFontSize: 10,
-      defaultValueColor: '#999',
+      defaultValueColor: '#666',
 
       columnData: [],
       columnItemSeriesNum: 0,
@@ -51,10 +53,10 @@ export default {
     }
   },
   watch: {
-    data (d) {
+    data () {
-      const { draw } = this
+      const { checkData, draw } = this
 
-      d && draw()
+      checkData() && draw()
     }
   },
   methods: {
@@ -65,9 +67,20 @@ export default {
 
       initColors()
 
-      const { data, draw } = this
+      const { checkData, draw } = this
 
-      data && draw()
+      checkData() && draw()
+    },
+    checkData () {
+      const { data } = this
+
+      this.status = false
+
+      if (!data || !data.series) return false
+
+      this.status = true
+
+      return true
     },
     draw () {
       const { clearCanvas } = this
@@ -116,9 +129,9 @@ export default {
       drawValueText()
     },
     calcColumnConfig () {
-      const { data: { data, spaceBetween }, labelAxisTagPos, axisOriginPos, horizon } = this
+      const { data: { series, spaceBetween }, labelAxisTagPos, axisOriginPos, horizon } = this
 
-      const columnData = this.columnData = data.filter(({ type }) =>
+      const columnData = this.columnData = series.filter(({ type }) =>
         !(type === 'polyline' || type === 'smoothline'))
 
       const columnItemSeriesNum = this.columnItemSeriesNum = columnData.length
@@ -140,7 +153,7 @@ export default {
     calcColumnItemOffset () {
       const { columnItemSeriesNum, columnItemAllWidth, columnItemWidth } = this
 
-      const { data: { spaceBetween, data } } = this
+      const { data: { spaceBetween, series } } = this
 
       const halfColumnWidth = columnItemWidth / 2
 
@@ -160,7 +173,7 @@ export default {
           columnItemWidth * (i + 1) - halfColumnItemAllWidth)
       }
 
-      this.columnItemOffset = data.map(({ type }) =>
+      this.columnItemOffset = series.map(({ type }) =>
         (type === 'polyline' || type === 'smoothline')
           ? 0
           : columnItemOffset.shift())
@@ -170,24 +183,24 @@ export default {
 
       const { labelAxisTagPos, deepClone, filterNull, multipleSum } = this
 
-      const { data: { data }, axisOriginPos, axisWH, horizon } = this
+      const { data: { series }, axisOriginPos, axisWH, horizon } = this
 
-      const dealAfterData = deepClone(data).map(({ data, againstAxis }) => {
+      const dealAfterData = deepClone(series).map(({ value, againstAxis }) => {
-        if (!(data[0] instanceof Array)) return { data, againstAxis }
+        if (!(value[0] instanceof Array)) return { value, againstAxis }
 
-        const td = data.map(series => series.map((v, i) => {
+        const valueData = value.map(valueSeries => valueSeries.map((v, i) => {
           if (!v && v !== 0) return false
 
-          return multipleSum(...filterNull(series.slice(0, i + 1)))
+          return multipleSum(...filterNull(valueSeries.slice(0, i + 1)))
         }))
 
-        return { data: td, againstAxis }
+        return { value: valueData, againstAxis }
       })
 
-      this.valuePointPos = dealAfterData.map(({ data, againstAxis }) =>
+      this.valuePointPos = dealAfterData.map(({ value, againstAxis }) =>
         getAxisPointsPos(
           againstAxis ? agValueAxisMaxMin : valueAxisMaxMin,
-          data,
+          value,
           axisOriginPos,
           axisWH,
           labelAxisTagPos,
@@ -228,21 +241,21 @@ export default {
       })
     },
     drawFigure () {
-      const { data: { data }, valuePointPos } = this
+      const { data: { series }, valuePointPos } = this
 
       const { drawColumn, drawEchelon, drawline } = this
 
-      data.forEach((series, i) => {
+      series.forEach((valueSeries, i) => {
-        switch (series.type) {
+        switch (valueSeries.type) {
           case 'leftEchelon':
-          case 'rightEchelon': drawEchelon(series, valuePointPos[i], i)
+          case 'rightEchelon': drawEchelon(valueSeries, valuePointPos[i], i)
             break
 
           case 'polyline':
-          case 'smoothline': drawline(series, valuePointPos[i], i)
+          case 'smoothline': drawline(valueSeries, valuePointPos[i], i)
             break
 
-          default: drawColumn(series, valuePointPos[i], i)
+          default: drawColumn(valueSeries, valuePointPos[i], i)
             break
         }
       })
@@ -519,7 +532,7 @@ export default {
 
       if (!showValueText) return
 
-      const { data: { valueTextFontSize, valueTextOffset, data } } = this
+      const { data: { valueTextFontSize, valueTextOffset, series } } = this
 
       const { ctx, defaultValueFontSize } = this
 
@@ -534,9 +547,9 @@ export default {
 
       const { drawSeriesTextValue } = this
 
-      data.forEach((series, i) => drawSeriesTextValue(series, i, trueOffset))
+      series.forEach((seriesItem, i) => drawSeriesTextValue(seriesItem, i, trueOffset))
     },
-    drawSeriesTextValue ({ data, valueTextColor, fillColor, lineColor }, i, trueOffset) {
+    drawSeriesTextValue ({ value, valueTextColor, fillColor, lineColor }, i, trueOffset) {
       const { ctx, valuePointPos, columnItemOffset, drawTexts, getOffsetPoints, drawColors } = this
 
       const { data: { valueTextColor: outerValueTC }, defaultValueColor } = this
@@ -551,10 +564,10 @@ export default {
       const currentPos = valuePointPos[i]
       const currentOffset = columnItemOffset[i]
 
-      const mulSeries = data[0] instanceof Array
+      const mulSeries = value[0] instanceof Array
 
       if (mulSeries) {
-        data.forEach((item, j) => {
+        value.forEach((item, j) => {
           const pointPos = getOffsetPoints(currentPos[j], currentOffset)
 
           item.forEach((v, l) => {
@@ -569,7 +582,7 @@ export default {
         mulColor && (currentColor = currentColor[0])
 
         ctx.fillStyle = currentColor || outerValueTC || defaultValueColor
-        drawTexts(ctx, data, getOffsetPoints(currentPos, currentOffset), trueOffset)
+        drawTexts(ctx, value, getOffsetPoints(currentPos, currentOffset), trueOffset)
       }
     },
     drawTexts (ctx, values, points, [x, y] = [0, 0]) {

components/concentricArcChart/index.vue

@@ -1,21 +1,26 @@
 <template>
   <div class="concentric-arc-chart">
-    <loading v-if="!data" />
+    <loading v-if="!status" />
 
-    <canvas :ref="ref" />
+    <div class="canvas-container">
+      <canvas :ref="ref" />
+    </div>
   </div>
 </template>
 
 <script>
+import colorsMixin from '../../mixins/colorsMixin.js'
+import canvasMixin from '../../mixins/canvasMixin.js'
+
 export default {
   name: 'ConcentricArcChart',
-  props: ['data'],
+  props: ['data', 'colors'],
+  mixins: [colorsMixin, canvasMixin],
   data () {
     return {
       ref: `concentric-arc-chart-${(new Date()).getTime()}`,
-      canvasDom: '',
+
-      canvasWH: [0, 0],
+      status: false,
-      ctx: '',
 
       arcOriginPos: [],
 
@@ -30,49 +35,37 @@ export default {
     }
   },
   watch: {
-    data (d) {
+    data () {
-      const { draw } = this
+      const { checkData, draw } = this
 
-      d && draw()
+      checkData() && draw()
     }
   },
   methods: {
-    init () {
+    async init () {
-      const { $nextTick, initCanvas, calcArcConfig, data, draw } = this
+      const { initCanvas, initColors, checkData, draw } = this
 
-      $nextTick(e => {
+      await initCanvas()
-        initCanvas()
 
-        calcArcConfig()
+      initColors()
 
-        data && draw()
+      checkData() && draw()
-      })
     },
-    initCanvas () {
+    checkData () {
-      const { $refs, ref, labelRef, canvasWH } = this
+      const { data } = this
 
-      const canvas = this.canvasDom = $refs[ref]
+      this.status = false
 
-      this.labelDom = $refs[labelRef]
+      if (!data || !data.series) return false
 
-      canvasWH[0] = canvas.clientWidth
+      this.status = true
-      canvasWH[1] = canvas.clientHeight
 
-      canvas.setAttribute('width', canvasWH[0])
+      return true
-      canvas.setAttribute('height', canvasWH[1])
-
-      this.ctx = canvas.getContext('2d')
-    },
-    calcArcConfig () {
-      const { canvasWH, arcOriginPos } = this
-
-      arcOriginPos[0] = canvasWH[0] / 2
-      arcOriginPos[1] = canvasWH[1] / 2
     },
     draw () {
-      const { ctx, canvasWH, calcArcRadius, calcArcRadian, calcArcColor, drawArc, drawTitle } = this
+      const { clearCanvas, calcArcRadius, calcArcRadian, calcArcColor, drawArc, drawTitle } = this
 
-      ctx.clearRect(0, 0, ...canvasWH)
+      clearCanvas()
 
       calcArcRadius()
 
@@ -85,11 +78,11 @@ export default {
       drawTitle()
     },
     calcArcRadius () {
-      const { data: { data, arcArea, arcGap }, arcOriginPos, defaultArcRadiusArea, defaultArcGap } = this
+      const { data: { series, arcArea, arcGap }, centerPos, defaultArcRadiusArea, defaultArcGap } = this
 
-      const arcNum = data.length
+      const arcNum = series.length
 
-      const fullRadius = (arcOriginPos[0] > arcOriginPos[1] ? arcOriginPos[1] : arcOriginPos[0])
+      const fullRadius = (centerPos[0] > centerPos[1] ? centerPos[1] : centerPos[0])
 
       const currentArcArea = arcArea || defaultArcRadiusArea
 
@@ -106,27 +99,27 @@ export default {
       this.arcRadius = new Array(arcNum).fill(0).map((t, i) => maxRadius - halfArcLineWidth - fullArcLineWidth * i)
     },
     calcArcRadian () {
-      const { data: { data } } = this
+      const { data: { series } } = this
 
       const fullRadian = Math.PI / 2 * 3
 
       const offsetRadian = Math.PI * 0.5
 
-      this.arcRadian = new Array(data.length).fill(0).map((t, i) => data[i].value * fullRadian - offsetRadian)
+      this.arcRadian = new Array(series.length).fill(0).map((t, i) => series[i].value * fullRadian - offsetRadian)
     },
     calcArcColor () {
       const { ctx, arcLineWidth, defaultArcColor, canvas: { getLinearGradientColor } } = this
 
-      const { data: { color }, arcRadius: [ radius ], arcOriginPos: [x, y] } = this
+      const { drawColors, arcRadius: [ radius ], centerPos: [x, y] } = this
 
-      const colors = color || defaultArcColor
+      const colors = drawColors || defaultArcColor
 
       this.arcColor = getLinearGradientColor(ctx,
         [x, y - radius - arcLineWidth],
         [x, y + radius + arcLineWidth], colors)
     },
     drawArc () {
-      const { ctx, arcRadius, arcRadian, arcOriginPos, arcLineWidth, arcColor } = this
+      const { ctx, arcRadius, arcRadian, centerPos, arcLineWidth, arcColor } = this
 
       const offsetRadian = Math.PI / -2
 
@@ -136,13 +129,13 @@ export default {
       arcRadius.forEach((radius, i) => {
         ctx.beginPath()
 
-        ctx.arc(...arcOriginPos, radius, offsetRadian, arcRadian[i])
+        ctx.arc(...centerPos, radius, offsetRadian, arcRadian[i])
 
         ctx.stroke()
       })
     },
     drawTitle () {
-      const { ctx, data: { data, fontSize }, arcRadius, arcOriginPos: [ x, y ], arcLineWidth } = this
+      const { ctx, data: { series, fontSize }, arcRadius, centerPos: [ x, y ], arcLineWidth } = this
 
       const textEndX = x - 10
 
@@ -153,7 +146,7 @@ export default {
 
       ctx.beginPath()
 
-      data.forEach(({ title }, i) => {
+      series.forEach(({ title }, i) => {
         ctx.fillText(title, textEndX, y - arcRadius[i])
       })
     }
@@ -169,6 +162,14 @@ export default {
 <style lang="less">
 .concentric-arc-chart {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .canvas-container {
+    position: relative;
+    flex: 1;
+  }
 
   canvas {
     width: 100%;

components/decoration4/index.vue

@@ -9,6 +9,9 @@
       <template v-else>
         <polyline class="lighter-line" :points="`5, 3 ${width - 5},3`" />
         <polyline class="bolder-line" :points="`5, 3 ${width - 5},3`" />
+
+        <!-- <polyline class="lighter-line" :points="`5, 3 ${width - 5},3`" />
+        <polyline class="bolder-line" :points="`5, 3 ${width - 5},3`" /> -->
       </template>
     </svg>
   </div>
@@ -43,8 +46,9 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .decoration-4 {
+  position: relative;
 
   &.normal {
     width: 6px;
@@ -55,6 +59,7 @@ export default {
   }
 
   .svg-container {
+    position: absolute;
 
     &.ani-height {
       width: 100%;

components/decoration5/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="decoration-5">
+  <div class="dv-decoration-5">
     <img src="./img/decoration.gif" />
   </div>
 </template>
@@ -11,7 +11,7 @@ export default {
 </script>
 
 <style lang="less">
-.decoration-5 {
+.dv-decoration-5 {
 
   img {
     width: 100%;

components/fullScreenContainer/index.vue

@@ -1,14 +1,12 @@
 <template>
-  <div id="datav-entrance">
+  <div id="dv-full-screen-container" ref="full-screen-container">
-    <div class="datav-container" ref="data-root">
+    <slot></slot>
-      <router-view />
-    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'DatavEntrance',
+  name: 'FullScreenContainer',
   data () {
     return {
       scale: 0,
@@ -30,7 +28,7 @@ export default {
 
       this.allWidth = width
 
-      const datavRoot = this.datavRoot = this.$refs['data-root']
+      const datavRoot = this.datavRoot = this.$refs['full-screen-container']
 
       datavRoot.style.width = `${width}px`
       datavRoot.style.height = `${height}px`
@@ -59,16 +57,12 @@ export default {
 </script>
 
 <style lang="less">
-#datav-entrance {
+#dv-full-screen-container {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  position: fixed;
-  width: 100%;
+  top: 0px;
-  height: 100%;
+  left: 0px;
   overflow: hidden;
-  background-size: 100%;
+  transform-origin: left top;
-  background-image: url('../../assets/img/bg.png');
+  z-index: 999;
-
-  .datav-container {
-    transform-origin: left top;
-  }
 }
 </style>

components/index.js

@@ -30,6 +30,7 @@ import percentArc from './percentArc/index.vue'
 import waterLevelPond from './waterLevelPond/index.vue'
 import scrollBoard from './scrollBoard/index.vue'
 
+import fullScreenContainer from './fullScreenContainer'
 import labelLine from './labelLine'
 import forSlot from './forSlot'
 
@@ -66,6 +67,7 @@ export default function (Vue) {
   Vue.component('waterLevelPond', waterLevelPond)
   Vue.component('scrollBoard', scrollBoard)
 
+  Vue.component('fullScreenContainer', fullScreenContainer)
   Vue.component('labelLine', labelLine)
   Vue.component('forSlot', forSlot)
 }

components/labelLine/index.vue

@@ -39,11 +39,11 @@ export default {
 
       if (!label) return
 
-      const { data, color, type } = label
+      const { labels, color, type } = label
 
-      if (!data) return
+      if (!labels) return
 
-      this.labelData = data
+      this.labelData = labels
 
       let trueColor = color || colors
 

components/pointChart/index.vue

@@ -6,7 +6,7 @@
       <canvas :ref="ref" />
     </div>
 
-    <label-line :label="data.labelLine" :colors="drawColors" />
+    <label-line :label="labelLine" :colors="drawColors" />
 
     <for-slot><slot></slot></for-slot>
   </div>
@@ -22,7 +22,7 @@ import axisMixin from '../../mixins/axisMixin.js'
 export default {
   name: 'PointChart',
   mixins: [canvasMixin, colorsMixin, axisMixin],
-  props: ['data', 'colors'],
+  props: ['data', 'labelLine', 'colors'],
   data () {
     return {
       ref: `point-chart-${(new Date()).getTime()}`,
@@ -37,15 +37,35 @@ export default {
       valuePointPos: []
     }
   },
+  watch: {
+    data () {
+      const { checkData, draw } = this
+
+      checkData() && draw()
+    }
+  },
   methods: {
     async init () {
-      const { initCanvas, initColors, data, draw } = this
+      const { initCanvas, initColors } = this
 
       await initCanvas()
 
       initColors()
 
-      data && draw()
+      const { checkData, draw } = this
+
+      checkData() && draw()
+    },
+    checkData () {
+      const { data } = this
+
+      this.status = false
+
+      if (!data || !data.series) return false
+
+      this.status = true
+
+      return true
     },
     draw () {
       const { clearCanvas } = this
@@ -65,14 +85,14 @@ export default {
       drawPoints()
     },
     calcValuePointPos () {
-      const { data: { data }, valueAxisMaxMin, getAxisPointsPos } = this
+      const { data: { series }, valueAxisMaxMin, getAxisPointsPos } = this
 
       const { axisOriginPos, axisWH, labelAxisTagPos } = this
 
-      this.valuePointPos = data.map(({ data: td }, i) =>
+      this.valuePointPos = series.map(({ value }, i) =>
         getAxisPointsPos(
           valueAxisMaxMin,
-          td,
+          value,
           axisOriginPos,
           axisWH,
           labelAxisTagPos,
@@ -80,11 +100,11 @@ export default {
         ))
     },
     drawPoints () {
-      const { data: { data }, drawSeriesPoint, ctx } = this
+      const { data: { series }, drawSeriesPoint, ctx } = this
 
       ctx.setLineDash([10, 0])
 
-      data.forEach((series, i) => drawSeriesPoint(series, i))
+      series.forEach((seriesItem, i) => drawSeriesPoint(seriesItem, i))
     },
     drawSeriesPoint ({ color: cr, edgeColor, fillColor, radius, opacity }, i) {
       const { drawColors, defaultPointRadius, valuePointPos, drawPoint } = this

components/polylineChart/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="polyline-chart">
-    <loading v-if="!data" />
+    <loading v-if="!status" />
 
     <div class="canvas-container">
       <canvas :ref="ref" />
     </div>
 
-    <label-line :label="data.labelLine" :colors="drawColors" />
+    <label-line :label="labelLine" :colors="drawColors" />
 
     <for-slot><slot></slot></for-slot>
   </div>
@@ -22,17 +22,19 @@ import axisMixin from '../../mixins/axisMixin.js'
 export default {
   name: 'PolylineChart',
   mixins: [colorsMixin, canvasMixin, axisMixin],
-  props: ['data', 'colors'],
+  props: ['data', 'labelLine', 'colors'],
   data () {
     return {
       ref: `polyline-chart-${(new Date()).getTime()}`,
 
+      status: false,
+
       // axis base config
       boundaryGap: false,
       mulValueAdd: false,
       horizon: false,
 
-      defaultLineDash: [10, 5],
+      defaultLineDash: [2, 2],
       defaultPointRadius: 2,
 
       defaultValueFontSize: 10,
@@ -43,9 +45,9 @@ export default {
   },
   watch: {
     data (d) {
-      const { draw } = this
+      const { checkData, draw } = this
 
-      d && draw()
+      checkData() && draw()
     }
   },
   methods: {
@@ -56,9 +58,20 @@ export default {
 
       initColors()
 
-      const { data, draw } = this
+      const { checkData, draw } = this
 
-      data && draw()
+      checkData() && draw()
+    },
+    checkData () {
+      const { data } = this
+
+      this.status = false
+
+      if (!data || !data.series) return false
+
+      this.status = true
+
+      return true
     },
     draw () {
       const { clearCanvas } = this
@@ -95,12 +108,12 @@ export default {
     calcValuePointPos () {
       const { valueAxisMaxMin, axisOriginPos, axisWH, labelAxisTagPos, horizon } = this
 
-      const { data: { data }, getAxisPointsPos } = this
+      const { data: { series }, getAxisPointsPos } = this
 
-      this.valuePointPos = data.map(({ data, againstAxis }) =>
+      this.valuePointPos = series.map(({ value, againstAxis }) =>
         getAxisPointsPos(
           valueAxisMaxMin,
-          data,
+          value,
           axisOriginPos,
           axisWH,
           labelAxisTagPos,
@@ -108,9 +121,9 @@ export default {
         ))
     },
     drawLines () {
-      const { data: { data }, valuePointPos, drawLine } = this
+      const { data: { series }, valuePointPos, drawLine } = this
 
-      data.forEach((line, i) => drawLine(line, valuePointPos[i], i))
+      series.forEach((line, i) => drawLine(line, valuePointPos[i], i))
     },
     drawLine ({ type, lineType, lineDash, lineColor }, points, i) {
       const { ctx, drawColors, defaultLineDash } = this
@@ -131,11 +144,11 @@ export default {
       drawLineFun(ctx, points, 1, color, false, tureLineDash, true, true)
     },
     drawFills () {
-      const { data: { data }, valuePointPos, drawFill } = this
+      const { data: { series }, valuePointPos, drawFill } = this
 
-      data.forEach((line, i) => drawFill(line, valuePointPos[i]))
+      series.forEach((line, i) => drawFill(line, valuePointPos[i]))
     },
-    drawFill ({ fillColor, type, data }, points) {
+    drawFill ({ fillColor, type, value }, points) {
       if (!fillColor) return
 
       const { canvas: { drawPolylinePath, drawSmoothlinePath } } = this
@@ -145,8 +158,8 @@ export default {
       let drawLineFun = drawPolylinePath
       type === 'smoothline' && (drawLineFun = drawSmoothlinePath)
 
-      const maxValue = Math.max(...filterNull(data))
+      const maxValue = Math.max(...filterNull(value))
-      const maxValueIndex = data.findIndex(v => v === maxValue)
+      const maxValueIndex = value.findIndex(v => v === maxValue)
 
       const color = getGradientColor(points[maxValueIndex], fillColor)
 
@@ -183,9 +196,9 @@ export default {
       }
     },
     drawPoints () {
-      const { data: { data }, valuePointPos, drawPoint } = this
+      const { data: { series }, valuePointPos, drawPoint } = this
 
-      data.forEach((line, i) => drawPoint(line, valuePointPos[i], i))
+      series.forEach((line, i) => drawPoint(line, valuePointPos[i], i))
     },
     drawPoint ({ pointColor }, points, i) {
       const { ctx, drawColors, defaultPointRadius } = this
@@ -197,7 +210,7 @@ export default {
       drawPFun(ctx, points, defaultPointRadius, color)
     },
     drawValues () {
-      const { ctx, data: { data, showValueText, valueTextOffset, valueTextFontSize } } = this
+      const { ctx, data: { series, showValueText, valueTextOffset, valueTextFontSize } } = this
 
       if (!showValueText) return
 
@@ -210,9 +223,9 @@ export default {
       ctx.textAlign = 'center'
       ctx.textBaseline = 'bottom'
 
-      data.forEach((line, i) => drawValue(line, i, offset))
+      series.forEach((line, i) => drawValue(line, i, offset))
     },
-    drawValue ({ data, valueTextColor, lineColor, pointColor, fillColor }, i, offset) {
+    drawValue ({ value, valueTextColor, lineColor, pointColor, fillColor }, i, offset) {
       const { ctx, getOffsetPoints, valuePointPos, drawColors, defaultValueColor } = this
 
       const { data: { valueTextColor: outerValueTC } } = this
@@ -228,9 +241,9 @@ export default {
       const pointsPos = valuePointPos[i]
 
       getOffsetPoints(pointsPos, offset).forEach((pos, i) => {
-        if (!data[i] && data[i] !== 0) return
+        if (!value[i] && value[i] !== 0) return
 
-        ctx.fillText(data[i], ...pos)
+        ctx.fillText(value[i], ...pos)
       })
     },
     getOffsetPoint ([x, y], [ox, oy]) {

components/radarChart/index.vue

@@ -7,7 +7,7 @@
       <canvas :ref="ref" />
     </div>
 
-    <label-line :label="data.labelLine" :colors="drawColors" />
+    <label-line :label="labelLine" :colors="drawColors" />
   </div>
 </template>
 
@@ -19,6 +19,7 @@ import canvasMixin from '../../mixins/canvasMixin.js'
 export default {
   name: 'RadarChart',
   mixins: [canvasMixin, colorsMixin],
+  props: ['data', 'labelLine', 'colors'],
   data () {
     return {
       ref: `radar-chart-${(new Date()).getTime()}`,
@@ -62,26 +63,36 @@ export default {
       valuePointData: []
     }
   },
-  props: ['data', 'colors'],
   watch: {
     data (d) {
-      const { reDraw } = this
+      const { checkData, reDraw } = this
 
-      reDraw(d)
+      checkData && reDraw(d)
     },
     color (d) {
-      const { reDraw } = this
+      const { checkData, reDraw } = this
 
-      reDraw(d)
+      checkData && reDraw(d)
     }
   },
   methods: {
     async init () {
-      const { initCanvas, data, draw } = this
+      const { initCanvas, checkData, draw } = this
 
       await initCanvas()
 
-      data && draw()
+      checkData() && draw()
+    },
+    checkData () {
+      const { data } = this
+
+      this.status = false
+
+      if (!data || !data.series) return false
+
+      this.status = true
+
+      return true
     },
     draw () {
       const { ctx, canvasWH } = this
@@ -153,15 +164,15 @@ export default {
     calcRayLineRadianData () {
       const { data: { label, rayLineOffset }, defaultRayLineOffset } = this
 
-      const { data } = label
+      const { tags } = label
 
       const fullRadian = Math.PI * 2
 
-      const radianGap = fullRadian / data.length
+      const radianGap = fullRadian / tags.length
 
       const radianOffset = rayLineOffset || defaultRayLineOffset
 
-      this.rayLineRadianData = data.map((t, i) => radianGap * i + radianOffset)
+      this.rayLineRadianData = tags.map((t, i) => radianGap * i + radianOffset)
     },
     calcRingRadiusData () {
       const { data: { ringNum }, defaultRingNum, radius } = this
@@ -414,7 +425,7 @@ export default {
     drawLable () {
       const { ctx, centerPos: [x], labelPosData, labelColor, labelFontSize, labelMultipleColor } = this
 
-      const { data: { label: { data } } } = this
+      const { data: { label: { tags } } } = this
 
       ctx.font = `${labelFontSize}px Arial`
 
@@ -431,27 +442,27 @@ export default {
 
         labelMultipleColor && (ctx.fillStyle = labelColor[i % colorNum])
 
-        ctx.fillText(data[i], ...pos)
+        ctx.fillText(tags[i], ...pos)
       })
     },
     caclValuePointData () {
-      const { data: { data, max }, centerPos, radius, rayLineRadianData } = this
+      const { data: { series, max }, centerPos, radius, rayLineRadianData } = this
 
       const { canvas: { getCircleRadianPoint } } = this
 
-      const maxValue = max || Math.max(...data.map(({ data: td }) => Math.max(...td)))
+      const maxValue = max || Math.max(...series.map(({ value }) => Math.max(...value)))
 
-      const valueRadius = data.map(({ data: td }) =>
+      const valueRadius = series.map(({ value }) =>
-        td.map(value =>
+        value.map(v =>
-          Number.isFinite(value)
+          Number.isFinite(v)
-            ? value / maxValue * radius : false))
+            ? v / maxValue * radius : false))
 
       this.valuePointData = valueRadius.map(td =>
         td.map((r, i) =>
-          r ? getCircleRadianPoint(...centerPos, r, rayLineRadianData[i]) : false))
+          (r || r === 0) ? getCircleRadianPoint(...centerPos, r, rayLineRadianData[i]) : false))
     },
     fillRadar () {
-      const { ctx, data: { data }, valuePointData, drawColors, filterNull } = this
+      const { ctx, data: { series }, valuePointData, drawColors, filterNull } = this
 
       const { canvas: { drawPolylinePath } } = this
 
@@ -462,10 +473,10 @@ export default {
       valuePointData.forEach((line, i) => {
         const currentColor = drawColors[i % colorNum]
 
-        const lineColor = data[i].lineColor
+        const lineColor = series[i].lineColor
-        const fillColor = data[i].fillColor
+        const fillColor = series[i].fillColor
 
-        data[i].dashed ? ctx.setLineDash([5, 5]) : ctx.setLineDash([10, 0])
+        series[i].dashed ? ctx.setLineDash([5, 5]) : ctx.setLineDash([10, 0])
 
         drawPolylinePath(ctx, filterNull(line), 1, true, true)
 
@@ -479,7 +490,7 @@ export default {
       })
     },
     fillValueText () {
-      const { data: { data, showValueText, valueTextFontSize } } = this
+      const { data: { series, showValueText, valueTextFontSize } } = this
 
       if (!showValueText) return
 
@@ -489,9 +500,9 @@ export default {
 
       const { fillSeriesText } = this
 
-      data.forEach((item, i) => fillSeriesText(item, i))
+      series.forEach((item, i) => fillSeriesText(item, i))
     },
-    fillSeriesText ({ valueTextColor, lineColor, fillColor, data }, i) {
+    fillSeriesText ({ valueTextColor, lineColor, fillColor, value }, i) {
       const { ctx, drawColors, valuePointData, drawTexts } = this
 
       const { data: { valueTextOffset, valueTextColor: outerValueTC }, defaultValueColor } = this
@@ -506,7 +517,7 @@ export default {
 
       ctx.fillStyle = currentColor || outerValueTC || defaultValueColor
 
-      drawTexts(ctx, data, valuePointData[i], trueOffset)
+      drawTexts(ctx, value, valuePointData[i], trueOffset)
     },
     drawTexts (ctx, values, points, [x, y] = [0, 0]) {
       values.forEach((v, i) => {

components/ringChart/index.vue

@@ -1,45 +1,38 @@
 <template>
   <div class="ring-chart">
-    <canvas :ref="ref" />
+    <loading v-if="!status" />
 
-    <loading v-if="!data" />
+    <div class="canvas-container">
+      <canvas :ref="ref" />
 
-    <template v-else>
       <div class="center-info" v-if="data.active">
         <div class="percent-show">{{percent}}</div>
-        <div class="current-label" :ref="labelRef">{{data.data[activeIndex].title}}</div>
+        <div class="current-label" :ref="labelRef">{{data.series[activeIndex].title}}</div>
       </div>
+    </div>
 
-      <div class="label-line">
+    <label-line :label="dealAfterLabelLine" :colors="drawColors" />
-        <div class="label-container">
-
-          <div class="label" v-for="(label, index) in data.data" :key="label.title">
-            <div :style="`background-color: ${data.color[index % data.data.length]}`" />
-            <div>{{ label.title }}</div>
-          </div>
-
-        </div>
-      </div>
-    </template>
   </div>
 </template>
 
 <script>
+import colorsMixin from '../../mixins/colorsMixin.js'
+import canvasMixin from '../../mixins/canvasMixin.js'
+
 export default {
   name: 'RingChart',
-  props: ['data'],
+  props: ['data', 'labelLine', 'colors'],
+  mixins: [colorsMixin, canvasMixin],
   data () {
     return {
       ref: `ring-chart-${(new Date()).getTime()}`,
-      canvasDom: '',
+
-      canvasWH: [0, 0],
+      status: false,
-      ctx: '',
 
       labelRef: `label-ref-${(new Date()).getTime()}`,
       labelDom: '',
 
       ringRadius: '',
-      ringOriginPos: [0, 0],
       ringLineWidth: '',
       maxRingWidthP: 1.15,
 
@@ -58,6 +51,8 @@ export default {
 
       offsetAngle: Math.PI * 0.5 * -1,
 
+      dealAfterLabelLine: [],
+
       percent: 0,
       totalValue: 0,
 
@@ -67,11 +62,9 @@ export default {
   },
   watch: {
     data (d) {
-      const { reDraw } = this
+      const { checkData, reDraw } = this
 
-      if (!d) return
+      checkData() && reDraw()
-
-      reDraw()
     },
     activeIndex () {
       const { doPercentAnimation, doLabelTextAnimation } = this
@@ -82,46 +75,41 @@ export default {
     }
   },
   methods: {
-    init () {
+    async init () {
-      const { $nextTick, initCanvas, calcRingConfig, data, draw } = this
+      const { initCanvas, initColors, calcRingConfig, checkData, draw } = this
 
-      $nextTick(e => {
+      await initCanvas()
-        initCanvas()
 
-        calcRingConfig()
+      initColors()
 
-        data && draw()
+      calcRingConfig()
-      })
-    },
-    initCanvas () {
-      const { $refs, ref, labelRef, canvasWH } = this
 
-      const canvas = this.canvasDom = $refs[ref]
+      checkData() && draw()
-
-      this.labelDom = $refs[labelRef]
-
-      canvasWH[0] = canvas.clientWidth
-      canvasWH[1] = canvas.clientHeight
-
-      canvas.setAttribute('width', canvasWH[0])
-      canvas.setAttribute('height', canvasWH[1])
-
-      this.ctx = canvas.getContext('2d')
     },
     calcRingConfig () {
-      const { canvasWH, ringOriginPos } = this
+      const { canvasWH } = this
-
-      ringOriginPos[0] = canvasWH[0] / 2
-      ringOriginPos[1] = (canvasWH[1] - 30) / 2
 
       const ringRadius = this.ringRadius = Math.min(...canvasWH) * 0.6 / 2
 
       this.ringLineWidth = ringRadius * 0.3
     },
-    draw () {
+    checkData () {
-      const { ctx, canvasWH } = this
+      const { data } = this
 
-      ctx.clearRect(0, 0, ...canvasWH)
+      this.status = false
+
+      if (!data || !data.series) return false
+
+      this.status = true
+
+      return true
+    },
+    draw () {
+      const { clearCanvas, calcLabelLineData } = this
+
+      clearCanvas()
+
+      calcLabelLineData()
 
       const { caclArcData, data: { active }, drawActive, drwaStatic } = this
 
@@ -129,8 +117,17 @@ export default {
 
       active ? drawActive() : drwaStatic()
     },
+    calcLabelLineData () {
+      const { labelLine, deepClone, data: { series } } = this
+
+      if (!labelLine) return
+
+      const dealAfterLabelLine = this.dealAfterLabelLine = deepClone(labelLine)
+
+      if (labelLine.labels === 'inherit') dealAfterLabelLine.labels = series.map(({ title }) => title)
+    },
     caclArcData () {
-      const { data: { data } } = this
+      const { data: { series } } = this
 
       const { getTotalValue, offsetAngle } = this
 
@@ -138,13 +135,13 @@ export default {
 
       const full = 2 * Math.PI
 
-      const aveAngle = full / data.length
+      const aveAngle = full / series.length
 
       let currentPercent = offsetAngle
 
       this.arcData = []
 
-      data.forEach(({ value }) => {
+      series.forEach(({ value }) => {
         const valueAngle = totalValue === 0 ? aveAngle : value / totalValue * full
 
         this.arcData.push([
@@ -154,11 +151,11 @@ export default {
       })
     },
     getTotalValue () {
-      const { data: { data } } = this
+      const { data: { series } } = this
 
       let totalValue = 0
 
-      data.forEach(({ value }) => (totalValue += value))
+      series.forEach(({ value }) => (totalValue += value))
 
       this.totalValue = totalValue
 
@@ -215,30 +212,30 @@ export default {
       this.activeAddStatus = true
     },
     drawRing () {
-      const { arcData, ctx, ringOriginPos, radiusData } = this
+      const { arcData, ctx, centerPos, radiusData } = this
 
-      const { ringLineWidth, data: { color } } = this
+      const { ringLineWidth, drawColors } = this
 
       const arcNum = arcData.length
 
       arcData.forEach((arc, i) => {
         ctx.beginPath()
 
-        ctx.arc(...ringOriginPos, radiusData[i], ...arc)
+        ctx.arc(...centerPos, radiusData[i], ...arc)
 
         ctx.lineWidth = ringLineWidth
 
-        ctx.strokeStyle = color[i % arcNum]
+        ctx.strokeStyle = drawColors[i % arcNum]
 
         ctx.stroke()
       })
     },
     doPercentAnimation () {
-      const { totalValue, percent, activeIndex, data: { data }, doPercentAnimation } = this
+      const { totalValue, percent, activeIndex, data: { series }, doPercentAnimation } = this
 
       if (!totalValue) return
 
-      const currentValue = data[activeIndex].value
+      const currentValue = series[activeIndex].value
 
       let currentPercent = Math.trunc(currentValue / totalValue * 100)
 
@@ -283,7 +280,7 @@ export default {
       drawRing()
     },
     calcAroundLineData () {
-      const { arcData, ringRadius, ringLineWidth, ringOriginPos: [x, y], data: { data }, canvas, totalValue } = this
+      const { arcData, ringRadius, ringLineWidth, centerPos: [x, y], data: { series }, canvas, totalValue } = this
 
       const { getCircleRadianPoint } = canvas
 
@@ -296,7 +293,7 @@ export default {
       const lineLength = 35
 
       this.aroundLineData = aroundLineData.map(([bx, by], i) => {
-        if (!data[i].value && totalValue) return [false, false]
+        if (!series[i].value && totalValue) return [false, false]
 
         const lineEndXPos = (bx > x ? bx + lineLength : bx - lineLength)
 
@@ -307,26 +304,26 @@ export default {
       })
     },
     drawAroundLine () {
-      const { aroundLineData, data: { color }, ctx, canvas: { drawLine } } = this
+      const { aroundLineData, drawColors, ctx, canvas: { drawLine } } = this
 
-      const colorNum = color.length
+      const colorNum = drawColors.length
 
       aroundLineData.forEach(([lineBegin, lineEnd], i) =>
         lineBegin !== false &&
-        drawLine(ctx, lineBegin, lineEnd, 1, color[i % colorNum]))
+        drawLine(ctx, lineBegin, lineEnd, 1, drawColors[i % colorNum]))
     },
     calcAroundTextData () {
-      const { data: { data, fixed }, totalValue } = this
+      const { data: { series, fixed }, totalValue } = this
 
       const aroundTextData = this.aroundTextData = []
 
       if (!totalValue) return data.forEach(({ v, title }, i) => aroundTextData.push([0, title]))
 
-      const dataLast = data.length - 1
+      const dataLast = series.length - 1
 
       let totalPercent = 0
 
-      data.forEach(({ value, title }, i) => {
+      series.forEach(({ value, title }, i) => {
         if (!value) return aroundTextData.push([false, false])
 
         let percent = Number((value / totalValue * 100).toFixed(fixed || 1))
@@ -341,7 +338,7 @@ export default {
       })
     },
     drawAroundText () {
-      const { ctx, aroundTextData, aroundTextFont, aroundLineData, ringOriginPos: [x] } = this
+      const { ctx, aroundTextData, aroundTextFont, aroundLineData, centerPos: [x] } = this
 
       ctx.font = aroundTextFont
       ctx.fillStyle = '#fff'
@@ -381,6 +378,14 @@ export default {
 <style lang="less">
 .ring-chart {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .canvas-container {
+    position: relative;
+    flex: 1;
+  }
 
   canvas {
     width: 100%;
@@ -392,7 +397,6 @@ export default {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    margin-top: -20px;
     text-align: center;
     font-family: "Microsoft Yahei", Arial, sans-serif;
     max-width: 25%;
@@ -426,38 +430,5 @@ export default {
       }
     }
   }
-
-  .label-line {
-    position: absolute;
-    width: 100%;
-    height: 30px;
-    bottom: 0px;
-    font-size: 12px;
-    line-height: 30px;
-    color: rgba(255, 255, 255, 0.6);
-    display: flex;
-    justify-content: space-around;
-
-    .label-container {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-
-    .label {
-      display: flex;
-      flex-direction: row;
-      margin: 0 3px;
-      height: 20px;
-
-      :nth-child(1) {
-        width: 10px;
-        height: 10px;
-        margin-top: 10px;
-        margin-right: 3px;
-      }
-    }
-  }
 }
 </style>

components/scrollBoard/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="scroll-board" :ref="ref">
 
-    <loading v-if="!data" />
+    <loading v-if="!status" />
 
     <template v-else>
       <div class="title-container"
@@ -42,13 +42,15 @@
 <script>
 export default {
   name: 'scroll-board',
-  props: ['data', 'index', 'html', 'rowNum', 'titleBG', 'waitTime', 'oddBG', 'evenBG', 'columnWidth', 'textAlign', 'carousel'],
+  props: ['data', 'index', 'rowNum', 'titleBG', 'waitTime', 'oddBG', 'evenBG', 'columnWidth', 'textAlign', 'carousel'],
   data () {
     return {
       ref: `scroll-board-${(new Date()).getTime()}`,
       container: '',
       containerWH: [],
 
+      status: false,
+
       reAnimationTimer: '',
       doFadeTimer: '',
 
@@ -77,19 +79,19 @@ export default {
     }
   },
   watch: {
-    data (d) {
+    data () {
-      const { init } = this
+      const { checkData, init } = this
 
-      d && init()
+      checkData() && init()
     }
   },
   methods: {
     init () {
-      const { data, initDom, stopAnimation, dealData, calcConfig, getCurrentScrollData } = this
+      const { checkData, initDom, stopAnimation, dealData, calcConfig, getCurrentScrollData } = this
 
       initDom()
 
-      if (!data) return
+      if (!checkData()) return
 
       stopAnimation()
 
@@ -107,12 +109,23 @@ export default {
       this.containerWH[0] = container.clientWidth
       this.containerWH[1] = container.clientHeight
     },
+    checkData () {
+      const { data } = this
+
+      this.status = false
+
+      if (!data || !data.series) return false
+
+      this.status = true
+
+      return true
+    },
     dealData () {
-      const { data: { data, title }, index, deepClone } = this
+      const { data: { series, title }, index, deepClone } = this
 
       if (title) (this.titleData = index ? ['', ...title] : [...title])
 
-      this.allRowData = deepClone(data).map((row, i) =>
+      this.allRowData = deepClone(series).map((row, i) =>
         ({ index: i + 1, data: index ? [i + 1, ...row] : row }))
     },
     calcConfig () {
@@ -137,11 +150,11 @@ export default {
       calcTextAlign()
     },
     calcAllRowColumnNum () {
-      const { data: { data }, index } = this
+      const { data: { series }, index } = this
 
-      this.allRowNum = data.length
+      this.allRowNum = series.length
 
-      this.allColumnNum = data[0].length + (index ? 1 : 0)
+      this.allColumnNum = series[0].length + (index ? 1 : 0)
     },
     calcRowNum () {
       const { rowNum, defaultRowNum } = this
@@ -275,6 +288,7 @@ export default {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  color: #fff;
 
   .title-container {
     height: 35px;

components/waterLevelPond/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="water-level-pond">
+    <loading v-if="!status" />
+
     <svg class="svg-container">
       <defs>
         <linearGradient :id="id" x1="0%" y1="100%" x2="0%" y2="0%">
@@ -11,14 +13,14 @@
 
       <text :stroke="`url(#${id})`"
         :fill="`url(#${id})`"
-        :x="arcOriginPos[0] + 8"
+        :x="centerPos[0] + 8"
-        :y="arcOriginPos[1] + 8">
+        :y="centerPos[1] + 8">
         {{ (level && Math.max(...level)) || 0 }}%
       </text>
 
       <ellipse v-if="!type || type === 'circle'"
-        :cx="arcOriginPos[0] + 8"
+        :cx="centerPos[0] + 8"
-        :cy="arcOriginPos[1] + 8"
+        :cy="centerPos[1] + 8"
         :rx="canvasWH[0] / 2 + 5"
         :ry="canvasWH[1] / 2 + 5"
         :stroke="`url(#${id})`" />
@@ -35,14 +37,16 @@
 </template>
 
 <script>
+import canvasMixin from '../../mixins/canvasMixin.js'
+
 export default {
   name: 'WaterLevelPond',
+  mixins: [canvasMixin],
   data () {
     return {
       ref: `water-level-pond-${(new Date()).getTime()}`,
-      canvasDom: '',
+
-      canvasWH: [0, 0],
+      status: false,
-      ctx: '',
 
       id: `water-level-pond-${(new Date()).getTime()}`,
 
@@ -54,7 +58,6 @@ export default {
 
       waveAdded: 0.7,
 
-      arcOriginPos: [0, 0],
       drawColor: '',
       linearGradient: [],
       waveTrueNum: '',
@@ -68,6 +71,13 @@ export default {
     }
   },
   props: ['level', 'type', 'colors', 'waveNum', 'waveHeight', 'borderColor', 'noGradient'],
+  watch: {
+    level () {
+      const { checkData, draw } = this
+
+      checkData() && draw()
+    }
+  },
   computed: {
     radius () {
       const { type } = this
@@ -82,42 +92,30 @@ export default {
     }
   },
   methods: {
-    init () {
+    async init () {
-      const { $nextTick, initCanvas, calcOriginPos, level, draw } = this
+      const { initCanvas, checkData, draw } = this
 
-      $nextTick(e => {
+      await initCanvas()
-        initCanvas()
 
-        calcOriginPos()
+      checkData() && draw()
-
-        level && draw()
-      })
     },
-    initCanvas () {
+    checkData () {
-      const { $refs, ref, labelRef, canvasWH } = this
+      const { level } = this
 
-      const canvas = this.canvasDom = $refs[ref]
+      this.status = false
 
-      this.labelDom = $refs[labelRef]
+      if (!level || !level.length) return false
 
-      canvasWH[0] = canvas.clientWidth
+      this.status = true
-      canvasWH[1] = canvas.clientHeight
 
-      canvas.setAttribute('width', canvasWH[0])
+      return true
-      canvas.setAttribute('height', canvasWH[1])
-
-      this.ctx = canvas.getContext('2d')
-    },
-    calcOriginPos () {
-      const { canvasWH, arcOriginPos } = this
-
-      arcOriginPos[0] = canvasWH[0] / 2
-      arcOriginPos[1] = canvasWH[1] / 2
     },
     draw () {
-      const { ctx, canvasWH } = this
+      const { stopAnimation, clearCanvas } = this
 
-      ctx.clearRect(0, 0, ...canvasWH)
+      stopAnimation()
+
+      clearCanvas()
 
       const { initColor, calcBorderLinearColor, calcWaveData } = this
 
@@ -198,9 +196,9 @@ export default {
       this.overXPos = width + waveTrueWidth
     },
     drawWaveAnimation () {
-      const { ctx, canvasWH, drawWaveAnimation } = this
+      const { clearCanvas, drawWaveAnimation } = this
 
-      ctx.clearRect(0, 0, ...canvasWH)
+      clearCanvas()
 
       const { getCurrentPoints, drawCurrentWave, calcNextFramePoints } = this
 
@@ -268,7 +266,7 @@ export default {
     stopAnimation () {
       const { animationHandler } = this
 
-      cancelAnimationFrame(animationHandler)
+      animationHandler && cancelAnimationFrame(animationHandler)
     }
   },
   mounted () {

config/index.js

@@ -0,0 +1 @@
+export default {}

index.js

@@ -0,0 +1,8 @@
+import components from './components/index'
+
+import plugins from './plugins'
+
+export default function (Vue) {
+  components(Vue)
+  plugins(Vue)
+}

mixins/axisMixin.js

@@ -1,18 +1,38 @@
 export default {
   data () {
     return {
-      defaultAxisLineColor: '#666',
+      // config able
-      defaultGridLineColor: '#666',
-      defaultTagColor: '#666',
-
-      defaultGridLineType: 'line',
-      defaultGridLineDash: [5, 5],
-
-      defaultXAxisOffset: 30,
-      defaultAxisLineTagGap: 5,
       defaultAxisFontSize: 10,
       defaultAxisFontFamily: 'Arial',
 
+      defaultAxisLineColor: '#666',
+      defaultGridLineColor: '#666',
+      defaultAxisTagColor: '#666',
+      defaultAxisUnitColor: '#666',
+
+      defaultGridLineDash: [2, 2],
+
+      defaultNoAxisLine: false,
+      defaultNoAxisTag: false,
+
+      defaultXAxisOffset: 20,
+      defaultAxisLineTagGap: 5,
+
+      // after merge
+      axisFontSize: 0,
+      axisFontFamily: '',
+
+      axisLineColor: '',
+      gridLineColor: '',
+      axisTagColor: '',
+      axisUnitColor: '',
+
+      gridLineDash: [],
+
+      noAxisLine: '',
+      noAxisTag: '',
+
+      // calc data
       valueMaxMin: [],
       agValueMaxMin: [],
 
@@ -38,9 +58,6 @@ export default {
 
       axisUnit: [],
 
-      axisFontSize: 0,
-      axisFontFamily: '',
-
       axisOffset: [],
 
       axisOriginPos: [],
@@ -75,10 +92,18 @@ export default {
 
       calcAxisUnit()
 
-      const { calcAxisFontData, calcAxisOffset, calcAxisAreaData } = this
+      const { calcAxisFontData, calcAxisColor, calcGridLineDash } = this
 
       calcAxisFontData()
 
+      calcAxisColor()
+
+      calcGridLineDash()
+
+      const { calcAxisLineTagStatus, calcAxisOffset, calcAxisAreaData } = this
+
+      calcAxisLineTagStatus()
+
       calcAxisOffset()
 
       calcAxisAreaData()
@@ -96,20 +121,20 @@ export default {
       calcTagAlign()
     },
     calcValuesMaxMin () {
-      const { data: { data }, calcValueMaxMin } = this
+      const { data: { series }, calcValueMaxMin } = this
 
-      const valueSeries = data.filter(({ againstAxis }) => !againstAxis)
+      const valueSeries = series.filter(({ againstAxis }) => !againstAxis)
 
       if (valueSeries.length) this.valueMaxMin = calcValueMaxMin(valueSeries)
 
-      const agValueSeries = data.filter(({ againstAxis }) => againstAxis)
+      const agValueSeries = series.filter(({ againstAxis }) => againstAxis)
 
       if (agValueSeries.length) this.agValueMaxMin = calcValueMaxMin(agValueSeries)
     },
-    calcValueMaxMin (data) {
+    calcValueMaxMin (series) {
       const { mulValueAdd, calcMulValueAdd, getArrayMax, getArrayMin } = this
 
-      let valueSeries = data.map(({ data: td }) => td)
+      let valueSeries = series.map(({ value }) => value)
 
       const min = getArrayMin(valueSeries)
 
@@ -145,11 +170,13 @@ export default {
         this.agValueAxisMaxMin = getValueAxisMaxMin(agValueAxisTag)
       }
     },
-    calcValueAxisTag ([vmax, vmin], { max, min, num, fixed, data } = {}) {
+    calcValueAxisTag ([vmax, vmin], { max, min, num, fixed, tags } = {}) {
-      if (data) return data
+      if (tags) return tags
 
       let [trueMax, trueMin] = [max, min]
 
+      if (vmax === 0 && vmin === 0) vmax = 8
+
       const thirdValueMinus = parseInt((vmax - vmin) / 3)
 
       !max && (max !== 0) && (trueMax = vmax + thirdValueMinus)
@@ -178,9 +205,9 @@ export default {
 
       const labelAxis = horizon ? [y, ay] : [x, ax]
 
-      if (labelAxis[0] && labelAxis[0].data) this.labelAxisTag = labelAxis[0].data
+      if (labelAxis[0] && labelAxis[0].tags) this.labelAxisTag = labelAxis[0].tags
 
-      if (labelAxis[1] && labelAxis[1].data) this.agLabelAxisTag = labelAxis[1].data
+      if (labelAxis[1] && labelAxis[1].tags) this.agLabelAxisTag = labelAxis[1].tags
     },
     calcTagBA () {
       const { data: { x, ax, y, ay } } = this
@@ -223,13 +250,46 @@ export default {
       if (ay && ay.unit) this.axisUnit[3] = ay.unit
     },
     calcAxisFontData () {
-      const { defaultAxisFontSize, defaultAxisFontFamily } = this
+      const { defaultAxisFontSize, defaultAxisFontFamily, data } = this
 
-      const { data: { axisFontSize, axisFontFamily } } = this
+      const { fontSize, fontFamily, axisFontSize, axisFontFamily }= data
 
-      this.axisFontSize = axisFontSize || defaultAxisFontSize
+      this.axisFontSize = axisFontSize || fontSize || defaultAxisFontSize
 
-      this.axisFontFamily = axisFontFamily || defaultAxisFontFamily
+      this.axisFontFamily = axisFontFamily || fontFamily || defaultAxisFontFamily
+    },
+    calcAxisColor () {
+      const { data, defaultAxisTagColor, defaultAxisLineColor, defaultGridLineColor } = this
+
+      const { axisTagColor, axisLineColor, gridLineColor } = data
+
+      this.axisTagColor = axisTagColor || defaultAxisTagColor
+
+      this.axisLineColor = axisLineColor || defaultAxisLineColor
+
+      this.gridLineColor = gridLineColor || defaultGridLineColor
+    },
+    calcGridLineDash () {
+      const { data, defaultGridLineDash } = this
+
+      const { gridLineDash } = data
+
+      if (gridLineDash instanceof Array) {
+        this.gridLineDash = gridLineDash
+      } else if (gridLineDash) {
+        this.gridLineDash = defaultGridLineDash
+      } else {
+        this.gridLineDash = [10, 0]
+      }
+    },
+    calcAxisLineTagStatus () {
+      const { defaultNoAxisLine, defaultNoAxisTag, data } = this
+
+      const { noAxisLine, noAxisTag } = data
+
+      this.noAxisLine = noAxisLine || defaultNoAxisLine
+
+      this.noAxisTag = noAxisTag || defaultNoAxisTag
     },
     calcAxisOffset () {
       const { horizon, axisUnit, defaultXAxisOffset } = this
@@ -374,16 +434,20 @@ export default {
       drawAxisGrid()
     },
     drawAxisLine () {
+      const { noAxisLine } = this
+
+      if (noAxisLine) return
+
       const { ctx, horizon, axisOriginPos, axisAnglePos } = this
 
-      const { defaultAxisLineColor, agValueAxisTag, agLabelAxisTag } = this
+      const { axisLineColor, agValueAxisTag, agLabelAxisTag } = this
 
       const { data: { x, ax, y, ay } } = this
 
       ctx.lineWidth = 1
 
       if (!x || !x.noAxisLine) {
-        ctx.strokeStyle = (x && x.axisLineColor) || defaultAxisLineColor
+        ctx.strokeStyle = (x && x.axisLineColor) || axisLineColor
         ctx.beginPath()
         ctx.moveTo(...axisOriginPos)
         ctx.lineTo(...axisAnglePos.rightBottom)
@@ -391,7 +455,7 @@ export default {
       }
 
       if (!y || !y.noAxisLine) {
-        ctx.strokeStyle = (y && y.axisLineColor) || defaultAxisLineColor
+        ctx.strokeStyle = (y && y.axisLineColor) || axisLineColor
         ctx.beginPath()
         ctx.moveTo(...axisOriginPos)
         ctx.lineTo(...axisAnglePos.leftTop)
@@ -401,7 +465,7 @@ export default {
       const agValueAxis = horizon ? ay : ax
 
       if (agValueAxisTag.length && (!agValueAxis || !agValueAxis.noAxisLine)) {
-        ctx.strokeStyle = (agValueAxis && agValueAxis.axisLineColor) || defaultAxisLineColor
+        ctx.strokeStyle = (agValueAxis && agValueAxis.axisLineColor) || axisLineColor
         ctx.beginPath()
         ctx.moveTo(...(horizon ? axisAnglePos.leftTop : axisAnglePos.rightTop))
         ctx.lineTo(...(horizon ? axisAnglePos.rightTop : axisAnglePos.rightBottom))
@@ -411,7 +475,7 @@ export default {
       const agLebalAxis = horizon ? ax : ay
 
       if (agLabelAxisTag.length && (!agLebalAxis || !agLebalAxis.noAxisLine)) {
-        ctx.strokeStyle = (agLebalAxis && agLebalAxis.axisLineColor) || defaultAxisLineColor
+        ctx.strokeStyle = (agLebalAxis && agLebalAxis.axisLineColor) || axisLineColor
         ctx.beginPath()
         ctx.moveTo(...(horizon ? axisAnglePos.rightTop : axisAnglePos.leftTop))
         ctx.lineTo(...(horizon ? axisAnglePos.rightBottom : axisAnglePos.rightTop))
@@ -419,6 +483,10 @@ export default {
       }
     },
     drawAxisTag () {
+      const { noAxisTag } = this
+
+      if (noAxisTag) return
+
       const { horizon, tagAlign, defaultAxisLineTagGap: offset } = this
 
       const { data: { x, ax, y, ay }, drawAxisSeriesTag } = this
@@ -434,9 +502,9 @@ export default {
       if (!ay || !ay.noAxisTag) drawAxisSeriesTag(...agYAxis.map(td => this[td]), ay, tagAlign.ay, [offset, 0])
     },
     drawAxisSeriesTag (tags, tagPos, { fontSize, fontFamily, tagColor } = {}, align, offset, rotate = false) {
-      const { ctx, defaultAxisFontSize, defaultAxisFontFamily, defaultTagColor, drawColors } = this
+      const { ctx, axisFontSize, axisFontFamily, axisTagColor, drawColors } = this
 
-      let color = tagColor || defaultTagColor
+      let color = tagColor || axisTagColor
 
       color === 'colors' && (color = drawColors)
 
@@ -444,7 +512,7 @@ export default {
 
       const mulColor = color instanceof Array
 
-      ctx.font = `${fontSize || defaultAxisFontSize}px ${fontFamily || defaultAxisFontFamily}`
+      ctx.font = `${fontSize || axisFontSize}px ${fontFamily || axisFontFamily}`
 
       !mulColor && (ctx.fillStyle = color)
 
@@ -473,6 +541,10 @@ export default {
       })
     },
     drawAxisUnit () {
+      const { noAxisTag } = this
+
+      if (noAxisTag) return
+
       const { axisOriginPos, canvasWH, drawUnit, defaultAxisLineTagGap } = this
 
       const { data: { x, ax, y, ay }, axisAnglePos } = this
@@ -498,15 +570,15 @@ export default {
       }
     },
     drawUnit ({ unit, unitColor, fontSize, fontFamily }, pos, align) {
-      const { defaultTagColor, defaultAxisFontSize, defaultAxisFontFamily } = this
+      const { axisTagColor, axisFontSize, axisFontFamily } = this
 
       const { ctx } = this
 
       if (!unit) return
 
-      ctx.font = `${fontSize || defaultAxisFontSize}px ${fontFamily || defaultAxisFontFamily}`
+      ctx.font = `${fontSize || axisFontSize}px ${fontFamily || axisFontFamily}`
 
-      ctx.fillStyle = unitColor || defaultTagColor
+      ctx.fillStyle = unitColor || axisTagColor
 
       ctx.textAlign = align[0]
       ctx.textBaseline = align[1]
@@ -522,15 +594,15 @@ export default {
 
       const xAxis = horizon ? [valueAxisTag, valueAxisTagPos] : [labelAxisTag, labelAxisTagPos]
 
-      let xLLLineStatus = [false, false]
+      let xBELineStatus = [false, false]
 
       if (horizon) {
-        xLLLineStatus = [true, false]
+        xBELineStatus = [true, false]
       } else {
-        xLLLineStatus = boundaryGap ? [false, false] : [true, true]
+        xBELineStatus = boundaryGap ? [false, false] : [true, true]
       }
 
-      if (xAxis[0].length) drawGrid(x, ...xAxis, false, false, true, ...xLLLineStatus)
+      if (xAxis[0].length) drawGrid(x, ...xAxis, false, false, true, ...xBELineStatus)
 
       const yAxis = horizon ? [labelAxisTag, labelAxisTagPos] : [valueAxisTag, valueAxisTagPos]
 
@@ -545,20 +617,25 @@ export default {
       if (agYAxis[0].length) drawGrid(ay, ...agYAxis, true, false, false, true)
     },
     drawGrid (axis = {}, gridTag, gridPos, horizon = true, right = true, top = true, noFirst = false, noLast = false) {
-      const { grid, gridLineColor, gridLineType, gridLineDash } = axis
+      const { grid, gridLineColor: cGLC, gridLineDash: cGLD } = axis
 
       if (!grid) return
 
-      const { defaultGridLineType, defaultGridLineColor, defaultGridLineDash } = this
+      const { gridLineColor, gridLineDash, defaultGridLineDash } = this
 
       const { ctx, drawColors, axisWH } = this
 
-      const trueGridLineType = gridLineType || defaultGridLineType
+      let trueGridLineDash = gridLineDash
-      const trueGridLineDash = trueGridLineType === 'dashed' ? (gridLineDash || defaultGridLineDash) : [10, 0]
+
+      if (cGLD instanceof Array) {
+        trueGridLineDash = cGLD
+      } else if (cGLD === true) {
+        trueGridLineDash = defaultGridLineDash
+      }
 
       ctx.setLineDash(trueGridLineDash)
 
-      let color = gridLineColor || defaultGridLineColor
+      let color = cGLC || gridLineColor
 
       color === 'colors' && (color = drawColors)
 

mixins/borderBoxMixin.js

@@ -0,0 +1,70 @@
+export default {
+  data () {
+    return {
+      dom: '',
+
+      width: 0,
+      height: 0,
+
+      debounceInitWHFun: '',
+
+      domObserver: ''
+    }
+  },
+  methods: {
+    async init () {
+      const { initWH, getDebounceInitWHFun, bindDomResizeCallback } = this
+
+      await initWH()
+
+      getDebounceInitWHFun()
+
+      bindDomResizeCallback()
+    },
+    initWH () {
+      const { $nextTick, $refs, ref } = this
+
+      return new Promise(resolve => {
+        $nextTick(e => {
+          const dom = this.dom = $refs[ref]
+
+          this.width = dom.clientWidth
+          this.height = dom.clientHeight
+
+          resolve()
+        })
+      })
+    },
+    getDebounceInitWHFun () {
+      const { debounce, initWH } = this
+
+      this.debounceInitWHFun = debounce(100, initWH)
+    },
+    bindDomResizeCallback () {
+      const { dom, debounceInitWHFun, observerDomResize } = this
+
+      this.domObserver = observerDomResize(dom, debounceInitWHFun)
+
+      window.addEventListener('resize', debounceInitWHFun)
+    },
+    unbindDomResizeCallback () {
+      const { domObserver, debounceInitWHFun } = this
+
+      domObserver.disconnect()
+      domObserver.takeRecords()
+      domObserver = null
+
+      window.removeEventListener('resize', debounceInitWHFun)
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  },
+  beforeDestroyed () {
+    const { unbindDomResizeCallback } = this
+
+    unbindDomResizeCallback()
+  }
+}

mixins/canvasMixin.js

@@ -4,7 +4,7 @@ export default {
       canvasDom: '',
       canvasWH: [0, 0],
       ctx: '',
-      centerPos: []
+      centerPos: [0, 0]
     }
   },
   methods: {

mixins/colorsMixin.js

@@ -1,9 +1,10 @@
-import defaultColors from '../config/color.js'
-
 export default {
   data () {
     return {
-      defaultColors,
+      defaultColors: [
+        '#9cf4a7', '#66d7ee', '#eee966',
+        '#a866ee', '#ee8f66', '#ee66aa'
+      ],
 
       drawColors: '',
 

package.json

@@ -1,28 +0,0 @@
-{
-  "name": "dataview",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "axios": "^0.18.0",
-    "highlight.js": "^9.13.1",
-    "vue": "^2.5.17",
-    "vue-router": "^3.0.2"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.1.1",
-    "@vue/cli-plugin-eslint": "^3.1.1",
-    "@vue/cli-service": "^3.1.1",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0-0",
-    "less": "^3.0.4",
-    "less-loader": "^4.1.0",
-    "vue-template-compiler": "^2.5.17"
-  }
-}

plugins/colorExtend.js

@@ -12,7 +12,7 @@ export function hexToRgb (hex, opacity) {
   hex = hex.toLowerCase().replace('#', '')
 
   // deal 3bit hex color to 6bit hex color
-  hex.length === 3 && (hex = Array.from(hex).map(hexNum => hexNum + hexNum).join())
+  hex.length === 3 && (hex = Array.from(hex).map(hexNum => hexNum + hexNum).join(''))
 
   let rgb = []
 

plugins/index.js

@@ -4,11 +4,8 @@ import canvasExtend from './canvasExtend'
 
 import colorExtend from './colorExtend'
 
-import axiosExtend from './axiosExtend'
-
 export default function (Vue) {
   methodsExtend(Vue)
   canvasExtend(Vue)
   colorExtend(Vue)
-  axiosExtend(Vue)
 }

plugins/methodsExtend.js

@@ -83,7 +83,9 @@ export function getArrayMin (array) {
 }
 
 export function getAxisPointsPos ([max, min], values, axisOriginPos, axisWH, tagPos, horizon) {
-  const minus = max - min
+  let minus = max - min
+
+  minus === 0 && (minus = 1)
 
   return values.map((value, i) => {
     if (!value && value !== 0) return false
@@ -125,6 +127,16 @@ export function getAxisPointPos ([max, min], value, axisOriginPos, axisWH, tagPo
   ]
 }
 
+export function observerDomResize (dom, callback) {
+  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
+
+  const observer = new MutationObserver(callback)
+
+  observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
+
+  return observer
+}
+
 export default function (Vue) {
   Vue.prototype.deepClone = deepClone
   Vue.prototype.deleteArrayAllItems = deleteArrayAllItems
@@ -139,4 +151,5 @@ export default function (Vue) {
   Vue.prototype.getArrayMin = getArrayMin
   Vue.prototype.getAxisPointPos = getAxisPointPos
   Vue.prototype.getAxisPointsPos = getAxisPointsPos
+  Vue.prototype.observerDomResize = observerDomResize
 }

postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-}

public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>DATAV-DEMO</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but jdyw_datav doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

src/App.vue

@@ -1,30 +0,0 @@
-<template>
-  <div id="app" ref="data-root">
-    <router-view />
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'app'
-}
-</script>
-
-<style lang="less">
-#app {
-  font-family:
-  '-apple-system',
-  'BlinkMacSystemFont',
-  'Helvetica Neue',
-  'PingFang SC',
-  'Microsoft YaHei',
-  'Source Han Sans SC',
-  'Noto Sans CJK SC',
-  'WenQuanYi Micro Hei',
-  'sans-serif';
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-</style>

src/assets/style/class.less

@@ -1,12 +0,0 @@
-.text-info {
-  font-size: 17px;
-  line-height: 25px;
-}
-
-.title {
-  font-size: 20px;
-  text-indent: 20px;
-  font-weight: bold;
-  line-height: 30px;
-  margin: 10px 0px;
-}

src/assets/style/font.less

@@ -1,4 +0,0 @@
-@font-face{
-  font-family: 'code';
-  src: url('../font/code.ttf');
-}

src/assets/style/index.less

@@ -1,18 +0,0 @@
-@import url('./font.less');
-@import url('./class.less');
-
-* {
-  margin: 0px;
-  padding: 0px;
-}
-
-html, body{
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-::-webkit-scrollbar {
-  width: 0px;
-  height: 0px;
-}

src/auxiliary/highlightCode/index.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="highlight-code">
-    <pre><code :ref="ref">
-<slot></slot>
-    </code></pre>
-  </div>
-</template>
-
-<script>
-import 'highlight.js/styles/monokai-sublime.css'
-
-import highlight from 'highlight.js/lib/highlight'
-
-import xml from 'highlight.js/lib/languages/xml'
-import javascript from 'highlight.js/lib/languages/javascript'
-
-highlight.registerLanguage('xml', xml)
-highlight.registerLanguage('javascript', javascript)
-
-export default {
-  name: 'HighlightCode',
-  data () {
-    return {
-      ref: `highlight-code-${(new Date()).getTime()}`
-    }
-  },
-  methods: {
-    init () {
-      const { ref, $refs } = this
-
-      const codeChunk = $refs[ref]
-
-      highlight.highlightBlock(codeChunk)
-    }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
-  }
-}
-</script>
-
-<style lang="less">
-.highlight-code {
-
-  code {
-    font-family: 'code';
-    background-color: transparent;
-  }
-}
-</style>

src/auxiliary/index.js

@@ -1,8 +0,0 @@
-import highlightCode from './highlightCode'
-
-import sideNav from './sideNav'
-
-export default function (Vue) {
-  Vue.component('highlightCode', highlightCode)
-  Vue.component('sideNav', sideNav)
-}

src/auxiliary/sideNav/index.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="side-nav">
-    <div class="item" v-for="navItem in nav" :key="navItem.title">
-      <a :href="`#${navItem.target}`">{{ navItem.title }}</a>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'SideNav',
-  props: ['nav']
-}
-</script>
-
-<style lang="less">
-.side-nav {
-  position: fixed;
-  width: 200px;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-
-  .item {
-    font-weight: bold;
-    color: #fff;
-    height: 30px;
-    line-height: 30px;
-    font-size: 18px;
-
-    a {
-      color: #fff;
-
-      &:hover,
-      &:active,
-      &:visited {
-        color: #fff;
-      }
-    }
-  }
-}
-</style>

src/components/borderBox2/index.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="border-box-2">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BorderBox2'
-}
-</script>
-
-<style lang="less">
-.border-box-2 {
-  box-sizing: border-box;
-  border-style: solid;
-  border-image: url('./img/border.png') 14 fill;
-  border-width: 14px;
-}
-</style>

src/components/borderBox3/index.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="border-box-3">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BorderBox3'
-}
-</script>
-
-<style lang="less">
-.border-box-3 {
-  box-sizing: border-box;
-  border-style: solid;
-  border-image: url('./img/border.png') 17 24 18 19 fill;
-  border-width: 24px;
-}
-</style>

src/components/borderBox4/index.vue

@@ -1,142 +0,0 @@
-<template>
-  <div class="border-box-4" :ref="ref">
-    <svg :class="`border-svg-container ${reverse && 'reverse'}`">
-      <polyline class="line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
-        10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/>
-      <polyline class="line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
-        14, ${height - 100}`" />
-      <polyline class="line-3" :points="`7, ${height - 40} 7, ${height - 75}`" />
-      <polyline class="line-4" :points="`28, 24 13, 41 13, 64`" />
-      <polyline class="line-5" :points="`5, 45 5, 140`" />
-      <polyline class="line-6" :points="`14, 75 14, 180`" />
-      <polyline class="line-7" :points="`55, 11 147, 11 167, 26 250, 26`" />
-      <polyline class="line-8" :points="`158, 5 173, 16`" />
-      <polyline class="line-9" :points="`200, 17 ${width - 10}, 17`" />
-      <polyline class="line-10" :points="`385, 17 ${width - 10}, 17`" />
-    </svg>
-
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BorderBox4',
-  data () {
-    return {
-      ref: `border-box-4-${(new Date()).getTime()}`,
-      width: 0,
-      height: 0
-    }
-  },
-  props: ['reverse'],
-  methods: {
-    init () {
-      const { $nextTick, $refs, ref } = this
-
-      $nextTick(e => {
-        this.width = $refs[ref].clientWidth
-        this.height = $refs[ref].clientHeight
-      })
-    }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.border-box-4 {
-  position: relative;
-  box-sizing: border-box;
-  padding: 30px;
-
-  .reverse {
-    transform: rotate(180deg);
-  }
-
-  .border-svg-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-
-    polyline {
-      fill: none;
-    }
-  }
-
-  .sred {
-    stroke: red;
-  }
-
-  .sblue {
-    stroke: fade(blue, 80);
-  }
-
-  .sw1 {
-    stroke-width: 1;
-  }
-
-  .sw3 {
-    stroke-width: 3px;
-    stroke-linecap: round;
-  }
-
-  .line-1 {
-    .sred;
-    .sw1;
-  }
-
-  .line-2 {
-    .sblue;
-    .sw1;
-  }
-
-  .line-3 {
-    .sred;
-    .sw3;
-  }
-
-  .line-4 {
-    .sred;
-    .sw3;
-  }
-
-  .line-5 {
-    .sred;
-    .sw1;
-  }
-
-  .line-6 {
-    .sblue;
-    .sw1;
-  }
-
-  .line-7 {
-    .sblue;
-    .sw1;
-  }
-
-  .line-8 {
-    .sblue;
-    .sw3;
-  }
-
-  .line-9 {
-    .sred;
-    .sw3;
-    stroke-dasharray: 100 250;
-  }
-
-  .line-10 {
-    .sblue;
-    .sw1;
-    stroke-dasharray: 80 270;
-  }
-}
-</style>

src/components/borderBox5/index.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="border-box-5" :ref="ref">
-    <svg :class="`svg-container  ${reverse && 'reverse'}`">
-      <polyline class="line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
-        ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
-      <polyline class="line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
-        ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`" />
-      <polyline class="line-3" :points="`50, 13 ${width - 35}, 13`" />
-      <polyline class="line-4" :points="`15, 20 ${width - 35}, 20`" />
-      <polyline class="line-5" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
-      <polyline class="line-6" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
-    </svg>
-
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BorderBox5',
-  data () {
-    return {
-      ref: `border-box-5-${(new Date()).getTime()}`,
-      width: 0,
-      height: 0
-    }
-  },
-  props: ['reverse'],
-  methods: {
-    init () {
-      const { $nextTick, $refs, ref } = this
-
-      $nextTick(e => {
-        this.width = $refs[ref].clientWidth
-        this.height = $refs[ref].clientHeight
-      })
-    }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
-  }
-}
-</script>
-
-<style lang="less">
-.border-box-5 {
-  position: relative;
-  box-sizing: border-box;
-  padding: 20px;
-
-  .reverse {
-    transform: rotate(180deg);
-  }
-
-  .svg-container {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-
-    polyline {
-      fill: none;
-    }
-  }
-
-  .line-1 {
-    stroke-width: 1;
-    stroke: fade(#fff, 35);
-  }
-
-  .line-2 {
-    stroke: fade(#fff, 20);
-  }
-
-  .line-3, .line-6 {
-    stroke-width: 5;
-    stroke: fade(#fff, 15);
-  }
-
-  .line-4, .line-5 {
-    stroke-width: 2;
-    stroke: fade(#fff, 15);
-  }
-
-}
-</style>

src/components/borderBox7/index.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="border-box-7" :ref="ref">
-    <svg class="svg-container">
-      <polyline class="line-width-2" :points="`0, 25 0, 0 25, 0`" />
-      <polyline class="line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
-      <polyline class="line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
-      <polyline class="line-width-2" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
-
-      <polyline class="line-width-5" :points="`0, 10 0, 0 10, 0`" />
-      <polyline class="line-width-5" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
-      <polyline class="line-width-5" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
-      <polyline class="line-width-5" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
-    </svg>
-
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BorderBox7',
-  data () {
-    return {
-      ref: `border-box-7-${(new Date()).getTime()}`,
-      width: 0,
-      height: 0
-    }
-  },
-  methods: {
-    init () {
-      const { $nextTick, $refs, ref } = this
-
-      $nextTick(e => {
-        this.width = $refs[ref].clientWidth
-        this.height = $refs[ref].clientHeight
-      })
-    }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
-  }
-}
-</script>
-
-<style lang="less">
-@color: fade(gray, 30);
-
-.border-box-7 {
-  position: relative;
-  box-shadow: inset 0 0 40px fade(@color, 30);
-  box-sizing: border-box;
-  border: 1px solid @color;
-  padding: 10px;
-
-  .svg-container {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-
-    polyline {
-      fill: none;
-      stroke-linecap: round;
-    }
-  }
-
-  .line-width-2 {
-    stroke: @color;
-    stroke-width: 2;
-  }
-
-  .line-width-5 {
-    stroke: fade(gray, 50);
-    stroke-width: 5;
-  }
-}
-</style>

src/config/color.js

@@ -1,8 +0,0 @@
-export default [
-  '#9cf4a7',
-  '#66d7ee',
-  '#eee966',
-  '#a866ee',
-  '#ee8f66',
-  '#ee66aa'
-]

src/main.js

@@ -1,24 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router/index'
-
-import './assets/style/index.less'
-
-import plugins from './plugins/index'
-
-import auxiliary from './auxiliary/index'
-
-import components from './components/index'
-
-Vue.use(plugins)
-
-Vue.use(auxiliary)
-
-Vue.use(components)
-
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  render: h => h(App)
-}).$mount('#app')

src/plugins/axiosExtend.js

@@ -1,73 +0,0 @@
-import Axios from 'axios'
-
-const timeout = 3000
-
-Axios.defaults.timeout = timeout
-
-function interception (fn, methods) {
-  return (...args) => {
-    // Request params num
-    const argsLen = args.length
-
-    // GET Request
-    if (methods === 'get' && argsLen > 1) {
-      const requerParams = Object.entries(args[1]).map(([key, value]) => {
-        return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
-      }).join('&')
-
-      args[0] += `?${requerParams}`
-
-      args.pop()
-
-      // POST Request
-    } else if (methods === 'post' && argsLen > 2) {
-      args[1] = Object.entries(args[1]).map(([key, value]) => `${key}=${value}`).join('&')
-
-      args.pop()
-    }
-
-    return fn.apply(this, args)
-      .then(res => {
-        let { respCode, respMessage, serverDate, respBody, respList } = res.data
-        /**
-         * respCode:
-         * success   成功
-         * error     失败
-         * warning   警告
-         * fatalError 系统错误
-         * session_timeout 会话超时或无效
-         */
-        let temp = {
-          code: respCode,
-          msg: respMessage,
-          timestamp: serverDate,
-          data: {}
-        }
-        // 返回数据为list
-        if (respList) {
-          let data = {
-            list: respList,
-            pageIndex: res.data.pageIndex,
-            pageSize: res.data.pageSize,
-            pageCount: res.data.pages,
-            total: res.data.recCount
-          }
-          temp.data = data
-          // 开发对接接口过程中的辅助字段说明
-          if (res.data.zhConsult) {
-            temp.remarks = res.data.zhConsult
-          }
-        } else {
-          temp.data = { ...respBody }
-        }
-        return temp
-      })
-  }
-}
-
-export default function (Vue) {
-  Vue.prototype.$http = Axios
-
-  Vue.prototype.$http.get = interception(Vue.prototype.$http.get, 'get')
-  Vue.prototype.$http.post = interception(Vue.prototype.$http.post, 'post')
-}

src/router/demo.js

@@ -1,44 +0,0 @@
-const Document = r => require.ensure([], () => r(require('../views/demo/document.vue')), 'demo')
-
-const BorderBox = r => require.ensure([], () => r(require('../views/demo/borderBox.vue')), 'demo')
-
-const Decoration = r => require.ensure([], () => r(require('../views/demo/decoration.vue')), 'demo')
-
-const Chart = r => require.ensure([], () => r(require('../views/demo/chart.vue')), 'demo')
-
-const Other = r => require.ensure([], () => r(require('../views/demo/other.vue')), 'datav')
-
-const Show = r => require.ensure([], () => r(require('../views/demo/show.vue')), 'datav')
-
-export default [
-  {
-    path: 'document',
-    name: 'document',
-    component: Document
-  },
-  {
-    path: 'borderBox',
-    name: 'borderBox',
-    component: BorderBox
-  },
-  {
-    path: 'decoration',
-    name: 'decoration',
-    component: Decoration
-  },
-  {
-    path: 'chart',
-    name: 'chart',
-    component: Chart
-  },
-  {
-    path: 'other',
-    name: 'other',
-    component: Other
-  },
-  {
-    path: 'show',
-    name: 'show',
-    component: Show
-  }
-]

src/router/index.js

@@ -1,55 +0,0 @@
-import Vue from 'vue'
-
-import Router from 'vue-router'
-
-import demoChildren from './demo'
-
-const Demo = r => require.ensure([], () => r(require('../views/demo/index.vue')), 'demo')
-
-const Datav = r => require.ensure([], () => r(require('../views/datavEntrance/index.vue')), 'datav')
-
-const View = r => require.ensure([], () => r(require('../views/dataView/index.vue')), 'datav')
-
-Vue.use(Router)
-
-export default new Router({
-  scrollBehavior (to, from, savedPosition) {
-    if (to.hash) {
-      return {
-        selector: to.hash
-      }
-    }
-  },
-  routes: [
-    {
-      path: '/demo',
-      name: 'demo',
-      component: Demo,
-      redirect: { name: 'document' },
-      children: [
-        ...demoChildren
-      ]
-    },
-    {
-      path: '/datav',
-      name: 'datav',
-      component: Datav,
-      redirect: '/datav/view',
-      children: [
-        {
-          path: 'view',
-          name: 'view',
-          component: View
-        },
-        {
-          path: '*',
-          redirect: '/datav/view'
-        }
-      ]
-    },
-    {
-      path: '*',
-      redirect: { name: 'document' }
-    }
-  ]
-})

src/views/dataView/index.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="datav-page">
-    <border-box-1>
-      <div class="welcome">Welcome Data View Page</div>
-    </border-box-1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'DatavPage'
-}
-</script>
-
-<style lang="less">
-.datav-page {
-  width: 100%;
-  height: 100%;
-  color: #fff;
-
-  .border-box-1 {
-    width: 100%;
-    height: 100%;
-    font-size: 100px;
-    font-weight: bold;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-
-    .welcome {
-      margin-top: -100px;
-    }
-  }
-}
-</style>

src/views/demo/borderBox.vue

@@ -1,96 +0,0 @@
-<template>
-  <div id="border-box">
-    <border-box-1 class="border-box-item">
-      <div class="title">Border-Box-1</div>
-      <highlight-code>
-&lt;border-box-1&gt;&lt;/border-box-1&gt;
-      </highlight-code>
-    </border-box-1>
-
-    <border-box-2 class="border-box-item">
-      <div class="title">Border-Box-2</div>
-      <highlight-code>
-&lt;border-box-2&gt;&lt;/border-box-2&gt;
-      </highlight-code>
-    </border-box-2>
-
-    <border-box-3 class="border-box-item">
-      <div class="title">Border-Box-3</div>
-      <highlight-code>
-&lt;border-box-3&gt;&lt;/border-box-3&gt;
-      </highlight-code>
-    </border-box-3>
-
-    <border-box-4 class="border-box-item">
-      <div class="title">Border-Box-4</div>
-      <highlight-code>
-&lt;border-box-4&gt;&lt;/border-box-4&gt;
-      </highlight-code>
-    </border-box-4>
-
-    <border-box-4 class="border-box-item" :reverse="true">
-      <div class="title">Border-Box-4(reverse)</div>
-      <highlight-code>
-&lt;border-box-4 :reverse="true" &gt;&lt;/border-box-4&gt;
-      </highlight-code>
-    </border-box-4>
-
-    <border-box-5 class="border-box-item">
-      <div class="title">Border-Box-5</div>
-      <highlight-code>
-&lt;border-box-5&gt;&lt;/border-box-5&gt;
-      </highlight-code>
-    </border-box-5>
-
-    <border-box-5 class="border-box-item" :reverse="true">
-      <div class="title">Border-Box-5(reverse)</div>
-      <highlight-code>
-&lt;border-box-5 :reverse="true" &gt;&lt;/border-box-5&gt;
-      </highlight-code>
-    </border-box-5>
-
-    <border-box-6 class="border-box-item">
-      <div class="title">Border-Box-6</div>
-      <highlight-code>
-&lt;border-box-6&gt;&lt;/border-box-6&gt;
-      </highlight-code>
-    </border-box-6>
-
-    <border-box-7 class="border-box-item">
-      <div class="title">Border-Box-7</div>
-      <highlight-code>
-&lt;border-box-7&gt;&lt;/border-box-7&gt;
-      </highlight-code>
-    </border-box-7>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BorderBox'
-}
-</script>
-
-<style lang="less">
-#border-box {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  padding-bottom: 100px;
-
-  .border-box-item {
-    position: relative;
-    width: 50%;
-    height: 300px;
-    margin-bottom: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .title {
-      text-indent: 0px;
-    }
-  }
-}
-</style>

src/views/demo/chart.vue

@@ -1,415 +0,0 @@
-<template>
-  <div id="chart">
-    <side-nav :nav="navData" />
-
-    <attention />
-
-    <column-chart-demo />
-
-    <polyline-chart-demo />
-
-    <point-chart-demo />
-
-    <radar-chart-demo />
-
-    <div id="capsule-chart" />
-
-    <border-box-7 class="chart-item">
-      <capsule-chart :data="capsuleChartData" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Capsule-Chart</div>
-        <highlight-code>
-&lt;capsule-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  // 必填项
-  data: [
-    {
-      value: 85,
-      title: '收费系统'
-    },...
-  ],
-  // 必填项 依次循环使用
-  color: ['#00baff', '#3de7c9', ...]
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <div id="arc-ring-chart" />
-
-    <border-box-7 class="chart-item" :reverse="true">
-      <arc-ring-chart :data="arcRingChartData" class="chart" />
-      <div class="config-info">
-        <div class="title">Arc-Ring-Chart</div>
-
-        <highlight-code>
-&lt;capsule-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  // 必填项
-  data: [
-    {
-      value: 38,
-      title: '监控系统'
-    },...
-  ],
-  // 必填项 依次循环使用
-  color: ['#00c0ff', '#3de7c9', ...]
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <div id="concentric-arc-chart" />
-
-    <border-box-7 class="chart-item">
-      <concentric-arc-chart :data="concentricArcChartData" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Concentric-Arc-Chart</div>
-
-        <highlight-code>
-&lt;concentric-arc-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  // 必填项
-  data: [
-    {
-      value: 0.38,
-      title: '8小时以内'
-    },...
-  ],
-  // 必填项 多个颜色自动生成渐变色
-  color: ['#00c0ff', '#3de7c9']
-  arcArea: [0.3, 0.7],           // 非必须
-  arcGap: 5,                     // 非必须
-  fontSize: 12                   // 非必须
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <div id="ring-chart" />
-
-    <border-box-7 class="chart-item" :reverse="true">
-      <ring-chart :data="ringChart1" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Ring-Chart</div>
-
-        <highlight-code>
-&lt;ring-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  // 必填项
-  data: [
-    {
-      value: 1315,
-      title: '收费站'
-    },...
-  ],
-  // 必填项 依次循环使用
-  color: ['#00baff', '#3de7c9'],
-  // 为false时 无动态效果
-  active: true
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <ring-chart :data="ringChart2" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Ring-chart</div>
-
-        <highlight-code>
-&lt;ring-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      value: 1315,
-      title: '收费站'
-    },...
-  ],
-  // 非必须 依次循环使用
-  color: ['#00baff', '#3de7c9'],
-  // 为true时 有动态效果
-  active: false,
-  // 非必须 该项可设置百分比精度 active为false时无效
-  // fixed: 2
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <!-- <highlight-code class="chart-item" :reverse="true">
-      <polyline-chart :data="polylineChartData" class="chart" />
-
-      <div class="config-info">
-        <div class="header">Polyline-chart</div>
-        <pre>
-        </pre>
-      </div>
-    </highlight-code> -->
-
-  </div>
-</template>
-
-<script>
-import attention from './chart/attention.vue'
-
-import columnChartDemo from './chart/columnChartDemo'
-
-import polylineChartDemo from './chart/polylineChartDemo'
-
-import pointChartDemo from './chart/pointChartDemo'
-
-import radarChartDemo from './chart/radarChartDemo'
-
-export default {
-  name: 'Chart',
-  components: {
-    attention,
-    columnChartDemo,
-    polylineChartDemo,
-    pointChartDemo,
-    radarChartDemo
-  },
-  data () {
-    return {
-      navData: [
-        {
-          title: 'Attention',
-          target: 'attention'
-        },
-        {
-          title: 'Column-Chart',
-          target: 'column-chart'
-        },
-        {
-          title: 'Polyline-Chart',
-          target: 'polyline-chart'
-        },
-        {
-          title: 'Point-Chart',
-          target: 'point-chart'
-        },
-        {
-          title: 'Radar-Chart',
-          target: 'radar-chart'
-        },
-        {
-          title: 'Capsule-Chart',
-          target: 'capsule-chart'
-        },
-        {
-          title: 'Arc-Ring-Chart',
-          target: 'arc-ring-chart'
-        },
-        {
-          title: 'Concentric-Arc-Chart',
-          target: 'concentric-arc-chart'
-        },
-        {
-          title: 'Ring-Chart',
-          target: 'ring-chart'
-        }
-      ],
-
-      capsuleChartData: {
-        data: [
-          {
-            value: 85,
-            title: '收费系统'
-          },
-          {
-            value: 44,
-            title: '通信系统'
-          },
-          {
-            value: 125,
-            title: '监控系统'
-          },
-          {
-            value: 110,
-            title: '供配电系统'
-          },
-          {
-            value: 66,
-            title: '其他'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ]
-      },
-
-      arcRingChartData: {
-        data: [
-          {
-            value: 19,
-            title: '监控系统'
-          },
-          {
-            value: 16,
-            title: '收费系统'
-          },
-          {
-            value: 24,
-            title: '通信系统'
-          },
-          {
-            value: 14,
-            title: '供配电系统'
-          },
-          {
-            value: 27,
-            title: '其他'
-          }
-        ],
-        color: ['#00c0ff', '#3de7c9', '#fff']
-      },
-
-      concentricArcChartData: {
-        data: [
-          {
-            value: 0.38,
-            title: '8小时以内'
-          },
-          {
-            value: 0.57,
-            title: '24小时以内'
-          },
-          {
-            value: 0.7,
-            title: '48小时以内'
-          },
-          {
-            value: 0.78,
-            title: '72小时以内'
-          },
-          {
-            value: 0.22,
-            title: '大于72小时'
-          }
-        ],
-        color: ['#00c0ff', '#3de7c9'],
-        arcArea: [0.3, 0.7],
-        arcGap: 5,
-        fontSize: 12
-      },
-
-      ringChart1: {
-        data: [
-          {
-            value: 1315,
-            title: '收费站'
-          },
-          {
-            value: 415,
-            title: '监控中心'
-          },
-          {
-            value: 90,
-            title: '道路外场'
-          },
-          {
-            value: 317,
-            title: '其他'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: true
-      },
-
-      ringChart2: {
-        data: [
-          {
-            value: 1315,
-            title: '收费站'
-          },
-          {
-            value: 415,
-            title: '监控中心'
-          },
-          {
-            value: 90,
-            title: '道路外场'
-          },
-          {
-            value: 317,
-            title: '其他'
-          }
-        ],
-        color: [
-          '#00baff',
-          '#3de7c9',
-          '#ffffff',
-          '#ffc53d',
-          '#469f4b'
-        ],
-        active: false
-      },
-
-      colors: ''
-    }
-  }
-}
-</script>
-
-<style lang="less">
-#chart {
-  display: flex;
-  flex-direction: column;
-
-  .chart-item {
-    width: 80%;
-    min-height: 300px;
-    display: flex;
-    flex-direction: row;
-    margin: 20px 0px;
-    margin-left: 20%;
-    align-items: center;
-  }
-
-  .chart {
-    width: 400px;
-    height: 300px;
-    flex-shrink: 0;
-  }
-
-  .config-info {
-    padding: 0px 30px;
-    display: flex;
-    flex-direction: column;
-
-    .highlight-code {
-      margin: -30px 0px;
-    }
-  }
-}
-</style>

src/views/demo/chart/attention.vue

@@ -1,149 +0,0 @@
-<template>
-  <border-box-7 class="attention" id="attention">
-    <div class="title">Attention</div>
-
-    <div class="title">Colors</div>
-
-    <div class="text-info">
-      下列组件颜色配置均绑定在节点的colors属性上
-    </div>
-
-    <div class="text-info">
-      若未绑定将自动使用默认配色
-    </div>
-
-    <div class="text-info">
-      colors所绑变量应为hex十六进制色的数组,示例如下
-    </div>
-
-    <highlight-code>
-&lt;chart :data="data" :colors="color" /&gt;
-    </highlight-code>
-
-    <highlight-code>
-// 修改默认配色方案 可直接修改./src/config/color.js
-colors: ['#9cf4a7', '#66d7ee', '#eee966', '#a866ee', '#ee8f66', '#ee66aa']
-// 数组内颜色将自动循环使用
-    </highlight-code>
-
-    <div class="text-info">
-      如在特殊颜色配置属性中使用colors关键字,将自动将该属性配置指向colors
-    </div>
-
-    <div class="text-info">
-      下列组件均不再展示colors属性绑定的变量
-    </div>
-
-    <div class="title">Axis</div>
-
-    <div class="text-info">
-      下列组件中多有使用坐标轴 坐标轴配置如下
-    </div>
-
-    <highlight-code class="center-code">
-// 坐标轴分为四部分 x y ax ay
-// ax ay 即为x y轴相对的坐标轴
-// 如果要使ax ay生效 data中应配置 againstAxis: true
-axisData: {
-data: [
-  { // 该组数据基于 x y 轴
-    data: [123, 123, 123, '', 123]
-  },
-  { // 改组数据基于 ax
-    data: [123, 123, 123, '', 123],
-    againstAxis: true
-  }
-],
-x: {
-  // 必须 x轴展示标签
-  data: ['label1', 'label2', 'label3', 'label4'],
-  // 非必须 单位
-  unit: '单位',
-  // 非必须 禁止绘制该轴坐标线
-  noAxisLine: true,
-  // 非必须 禁止绘制该轴展示标签
-  noAxisTag: true,
-  // 非必须 该轴偏移量
-  offset: 30,
-  // 非必须 是否绘制网格
-  grid: true,
-  // 非必须 设置网格线条为虚线
-  gridType: 'dashed',
-  // 非必须 网格虚线dashed
-  gridLineDash: [2, 2],
-  // 非必须 网格颜色 多个则循环使用
-  gridColor: 'colors' | '#123456' | ['#123', '#456']
-  // 非必须 设置该轴标签before字符
-  tagBefore: 'before',
-  // 非必须 设置该轴标签after字符
-  tagAfter: 'after',
-  // 非必须 设置x轴 展示标签旋转度数 仅在x轴有效
-  rotate: 20
-},
-// y轴 也可设置data 设置data 下列专有配置自动失效
-y: {
-  // 非必须 强制最大值
-  max: 999,
-  // 非必须 强制最小值
-  min: 0,
-  // 非必须 强制数值展示个数
-  num: 5,
-  // 非必须 设置数据精度
-  fixed: 2
-},
-// 非必须 水平坐标轴 配置该项 x y数据应对调
-// 并非所有图表有效
-horizon: true
-}
-// 具体见示例
-    </highlight-code>
-
-    <div class="title">Label-Line</div>
-
-    <div class="text-info">
-      下列组件中多有使用坐标轴 坐标轴常用配置如下
-    </div>
-
-    <highlight-code class="center-code">
-// label-line 即图标底部标签
-labelLineData: {
-  // 必须 标签文字
-  data: ['标签1', '标签2', ...],
-  // 非必须 设置标签前置色块颜色 多个则循环使用
-  color: '#2b7bfb',
-  // 非必须 设置标签前置色块形状 rectangle 长方形 rect正方形
-  type: 'rectangle'
-}
-// 具体见示例
-    </highlight-code>
-
-    <div id="column-chart" />
-  </border-box-7>
-</template>
-
-<script>
-export default {
-  name: 'Attention'
-}
-</script>
-
-<style lang="less">
-#attention {
-  width: 80%;
-  margin-left: 20%;
-  text-align: center;
-  margin-bottom: 20px;
-
-  .highlight-code {
-    margin: -40px 0px;
-  }
-
-  .center-code {
-    text-align: left;
-    padding: 0px 100px;
-    width: 500px;
-    margin-left: 50%;
-    transform: translateX(-50%);
-  }
-}
-</style>

src/views/demo/chart/columnChartDemo.vue

@@ -1,614 +0,0 @@
-<template>
-  <div>
-    <border-box-7 class="chart-item">
-      <column-chart :data="columnChartData1" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Column-Chart</div>
-        <highlight-code>
-&lt;column-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      data: [150, 290, 420, 200, 350, 219],
-      fillColor: ['#247efc', '#ff2fdb'],
-      // 非必需 强制该列数据值标签颜色
-      // inherit 即为继承本列颜色 继承优先级为 fillColor lineColor colors
-      valueTextColor: 'inherit'
-    }
-  ],
-  x: {
-    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-  },
-  y: {
-    unit: '辆'
-  },
-  labelLine: {
-    color: '#2b7bfb',
-    data: ['车流量'],
-    type: 'rectangle'
-  },
-  // 非必需 展示数据值标签
-  showValueText: true
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <column-chart :data="columnChartData2" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Column-Chart</div>
-        <highlight-code>
-&lt;column-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  y: {
-    grid: true,
-    gridLineType: 'dashed',
-    gridLineDash: [2, 2],
-    num: 6
-  },
-  showColumnBG: true,
-  columnBGColor: 'rgba(100, 100, 100, 0.3)'
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <column-chart :data="columnChartData3" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Column-Chart</div>
-        <highlight-code>
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  data: [
-    {
-      data: [150, 290, 420, 200, 350, 219],
-      fillColor: '#247efc'
-    },
-    {
-      data: [
-        [35, 70, 40],
-        [74, 180, 45],
-        [37, 200, 145],
-        [35, 89, 30],
-        [65, 100, 48],
-        [55, 90, 70]
-      ],
-      fillColor: ['#ff2fdb', '#e3b4a2', '#fafb5d']
-    }
-  ]
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <column-chart :data="columnChartData4" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Column-Chart</div>
-        <highlight-code>
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data:{
-  data: [
-    {
-      data: [150, 290, 420, 200, 350, 219],
-      fillColor: ['#247efc', '#ff2fdb']
-    },
-    {
-      data: [130, 313, 392, 180, 400, 188],
-      fillColor: ['#00BAFF', '#3DE7C9']
-    }
-  ],
-  // 非必须 指定圆角柱
-  roundColumn: true,
-  // 非必须 指定柱间间隔
-  spaceBetween: true,
-  //  非必须 指定局部渐变
-  localGradient: true
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <column-chart :data="columnChartData5" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Column-Chart</div>
-        <highlight-code>
-&lt;column-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: [
-  {
-    data: [150, 290, 420, 200, 350, 219],
-    fillColor: ['#247efc', '#ff2fdb'],
-    // 非必须 指定左边梯形柱 该属性在单柱数据生效 且不能设置roundColumn
-    type: 'leftEchelon'
-  },
-  {
-    data: [130, 313, 392, 180, 400, 188],
-    fillColor: ['#00BAFF', '#3DE7C9'],
-    // 非必须 指定右边梯形柱
-    type: 'rightEchelon'
-  },
-  // 非必须 显示数值
-  showValueText: true,
-  // 非必须 设置全局数据值标签颜色
-  valueTextColor: '#bbb'
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <column-chart :data="columnChartData6" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Column-Chart</div>
-        <highlight-code>
-&lt;column-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  data: [
-    ...
-    {
-      ...
-      type: 'polyline',
-      againstAxis: true,
-      lineColor: '#ff2fdb',
-      pointColor: '#3de7c9'
-    }
-  ],
-  x: {
-    offset: 40,
-    // 旋转角度
-    rotate: 20
-  },
-  y: {
-    tagAfter: 'ml'
-  },
-  ay: {
-    afterTag: '°C'
-  }
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <column-chart :data="columnChartData7" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Column-Chart</div>
-        <highlight-code>
-&lt;column-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  data: [
-    {
-      data: [330, 290, 330, 400, 330, 290, 330],
-      fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)']
-    },
-    {
-      data: [260, 265, 280, 450, 280, 265, 260],
-      type: 'smoothline',
-      lineType: 'dashed',
-      againstAxis: true,
-      lineColor: '#3de7c9',
-      fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)']
-    }
-  ]
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <column-chart :data="columnChartData8" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Column-Chart</div>
-        <highlight-code>
-&lt;column-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  x: {
-    unit: '辆',
-    grid: true,
-    gridLineType: 'dashed',
-    gridLineDash: [2, 2]
-  },
-  y: {
-    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-  },
-  // 非必须 水平图
-  horizon: true
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <column-chart :data="columnChartData9" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Column-Chart</div>
-        <highlight-code>
-&lt;column-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  x: {
-    noAxisLine: true,
-    noAxisTag: true,
-    offset: 10
-  },
-  y: {
-    noAxisLine: true,
-    noAxisTag: true,
-    offset: 1
-  },
-  showValueText: true,
-  // 非必须 设置数值文字颜色
-  valueTextColor: '#fff',
-  // 非必须 设置数值文字相对偏移量
-  valueTextOffset: [0, 15]
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <div id="polyline-chart" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ColumnChartDemo',
-  data () {
-    return {
-      columnChartData1: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: ['#247efc', '#ff2fdb'],
-            valueTextColor: 'inherit'
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          unit: '辆'
-        },
-        labelLine: {
-          color: '#2b7bfb',
-          data: ['车流量'],
-          type: 'rectangle'
-        },
-        showValueText: true
-      },
-
-      columnChartData2: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: ['#247efc', '#ff2fdb']
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          unit: '辆',
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          num: 6
-        },
-        labelLine: {
-          color: '#2b7bfb',
-          data: ['车流量'],
-          type: 'rectangle'
-        },
-        showColumnBG: true,
-        columnBGColor: 'rgba(100, 100, 100, 0.3)'
-      },
-
-      columnChartData3: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: '#247efc'
-          },
-          {
-            data: [
-              [35, 70, 40],
-              [74, 180, 45],
-              [37, 200, 145],
-              [35, 89, 30],
-              [65, 100, 48],
-              [55, 90, 70]
-            ],
-            fillColor: ['#ff2fdb', '#e3b4a2', '#fafb5d']
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          unit: '万元',
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          min: 0
-        },
-        labelLine: {
-          color: ['#247efc', '#ff2fdb', '#e3b4a2', '#fafb5d'],
-          data: ['玩具', '食品', '服装', '电器'],
-          type: 'rectangle'
-        },
-        showColumnBG: true,
-        columnBGColor: 'rgba(100, 100, 100, 0.3)'
-      },
-
-      columnChartData4: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: ['#247efc', '#ff2fdb']
-          },
-          {
-            data: [130, 313, 392, 180, 400, 188],
-            fillColor: ['#00BAFF', '#3DE7C9']
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          unit: '辆'
-        },
-        labelLine: {
-          color: ['#ff2fdb', '#3DE7C9'],
-          data: ['同期', '环期'],
-          type: 'rectangle'
-        },
-        roundColumn: true,
-        spaceBetween: true,
-        localGradient: true
-      },
-
-      columnChartData5: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: ['#247efc', '#ff2fdb'],
-            type: 'leftEchelon'
-          },
-          {
-            data: [130, 313, 392, 180, 400, 188],
-            fillColor: ['#00BAFF', '#3DE7C9'],
-            type: 'rightEchelon'
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          unit: '辆',
-          num: 7
-        },
-        labelLine: {
-          color: ['#ff2fdb', '#3DE7C9'],
-          data: ['同期', '环期'],
-          type: 'rectangle'
-        },
-        showValueText: true,
-        spaceBetween: true,
-        valueTextColor: '#bbb'
-      },
-
-      columnChartData6: {
-        data: [
-          {
-            data: [175, 125, 90, 130, 45, 65, 65, 47, 50, 52, 45, 37],
-            fillColor: ['#247efc', '#ff2fdb']
-          },
-          {
-            data: [210, 142, 128, 142, 63, 72, 68, 57, 54, 60, 49, 42],
-            fillColor: ['#00BAFF', '#3DE7C9']
-          },
-          {
-            data: [23, 18, 16, 14, 10, 8, 6, 6, 6, 6, 6, 5],
-            type: 'polyline',
-            againstAxis: true,
-            lineColor: '#ff2fdb',
-            pointColor: '#3de7c9'
-          }
-        ],
-        x: {
-          data: [
-            '一月份', '二月份',
-            '三月份', '四月份',
-            '五月份', '六月份',
-            '七月份', '八月份',
-            '九月份', '十月份',
-            '十一月份', '十二月份'
-          ],
-          offset: 40,
-          rotate: 20
-        },
-        y: {
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          min: 0,
-          max: 250,
-          num: 6,
-          tagAfter: 'ml'
-        },
-        ay: {
-          min: 0,
-          max: 25,
-          num: 6,
-          tagAfter: '°C'
-        },
-        labelLine: {
-          color: ['#ff2fdb', '#3DE7C9'],
-          data: ['同期', '环期'],
-          type: 'rectangle'
-        },
-        roundColumn: true,
-        localGradient: true,
-        spaceBetween: true
-      },
-
-      columnChartData7: {
-        data: [
-          {
-            data: [330, 290, 330, 400, 330, 290, 330],
-            fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)']
-          },
-          {
-            data: [260, 265, 280, 450, 280, 265, 260],
-            type: 'smoothline',
-            lineType: 'dashed',
-            againstAxis: true,
-            lineColor: '#3de7c9',
-            fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)']
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳', '漯河']
-        },
-        y: {
-          unit: '辆',
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2],
-          num: 6,
-          min: 0,
-          max: 500
-        },
-        labelLine: {
-          color: '#2b7bfb',
-          data: ['车流量'],
-          type: 'rectangle'
-        },
-        ay: {
-          num: 6,
-          min: 100,
-          max: 500
-        }
-      },
-
-      columnChartData8: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: ['#247efc', '#ff2fdb'],
-            type: 'leftEchelon'
-          },
-          {
-            data: [130, 313, 392, 180, 400, 188],
-            fillColor: ['#00BAFF', '#3DE7C9'],
-            type: 'rightEchelon'
-          }
-        ],
-        x: {
-          unit: '辆',
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2]
-        },
-        y: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        labelLine: {
-          color: '#2b7bfb',
-          data: ['车流量'],
-          type: 'rectangle'
-        },
-        horizon: true,
-        showColumnBG: true,
-        localGradient: true,
-        spaceBetween: true
-      },
-
-      columnChartData9: {
-        data: [
-          {
-            data: [150, 290, 420, 200, 350, 219],
-            fillColor: ['#247efc', '#ff2fdb']
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
-          noAxisLine: true,
-          noAxisTag: true,
-          offset: 10
-        },
-        y: {
-          noAxisLine: true,
-          noAxisTag: true,
-          offset: 1
-        },
-        labelLine: {
-          color: '#2b7bfb',
-          data: ['车流量'],
-          type: 'rectangle'
-        },
-        showColumnBG: true,
-        showValueText: true,
-        valueTextColor: '#fff',
-        valueTextOffset: [0, 15]
-      },
-
-      colors: ''
-    }
-  }
-}
-</script>
-
-<style lang="less">
-
-</style>

src/views/demo/chart/pointChartDemo.vue

@@ -1,219 +0,0 @@
-<template>
-  <div>
-    <border-box-7 class="chart-item">
-      <point-chart :data="pointChartData1" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Point-Chart</div>
-        <highlight-code>
-&lt;point-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      data: [
-        '', '',
-        [280, 265, 240, 200, 180],...
-      ]
-    },
-    {
-      data: [
-        '', '', '', '', '',
-        '', '', '', '', '',
-        [357, 222, 82, 355],...
-      ]
-    }
-  ],
-  x: {
-    data: [ '', '',
-      '西峡', '', '', '周口', '', '',
-      '南阳', '', '', '驻马店', '', '',
-      '郑州', '', '', '洛阳', '', ''
-    ],
-    grid: true,
-    gridLineType: 'dashed',
-    gridLineDash: [2, 2]
-  },
-  y: {
-    min: 0,
-    num: 6,
-    max: 500
-  }
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <point-chart :data="pointChartData2" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Point-Chart</div>
-        <highlight-code>
-&lt;point-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  data: [
-    {
-      data: ...,
-      // 非必须 设置该项 点内部自动透明
-      // 如果设置了fillColor 其应该为16进制色 否则无法进行透明计算
-      opacity: 0.5
-    },
-    {
-      data: ...,
-      // 非必须 设置局部点半径
-      radius: 5,
-      // 非必须 设置边线颜色
-      edgeColor: '#ff5ca9',
-      // 非必须 设置点内部填充色
-      fillColor: 'rgba(0, 186, 255, 0.5)'
-    }
-  ],
-  // 非必须 设置全局点半径
-  radius: 4
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <div id="radar-chart" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PointChartDemo',
-  data () {
-    return {
-      pointChartData1: {
-        data: [
-          {
-            data: [
-              '', '',
-              [280, 265, 240, 200, 180],
-              [320, 200, 190, 255, 260],
-              [330, 222, 190, 255, 270],
-              [325, 260, 220, 190, 255],
-              [300, 245, 215, 255, 270],
-              [280, 250, 190, 255, 270]
-            ]
-          },
-          {
-            data: [
-              '', '',
-              '', '',
-              '', '',
-              '', '',
-              '', '',
-              [357, 222, 82, 355],
-              [56, 25, 156],
-              [70, 251, 425, 300, 278, 315],
-              [79, 52, 40, 250, 160],
-              [70, 251, 425, 300, 278, 315],
-              [79, 52, 40, 180, 240],
-              [79, 52, 40],
-              [60, 56, 56],
-              '', ''
-            ]
-          }
-        ],
-        x: {
-          data: [ '', '',
-            '西峡', '', '',
-            '周口', '', '',
-            '南阳', '', '',
-            '驻马店', '', '',
-            '郑州', '', '',
-            '洛阳', '', ''
-          ],
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2]
-        },
-        y: {
-          min: 0,
-          num: 6,
-          max: 500
-        },
-        labelLine: {
-          data: ['同期', '环期'],
-          type: 'rectangle'
-        }
-      },
-
-      pointChartData2: {
-        data: [
-          {
-            data: [
-              '', '',
-              [280, 265, 240, 200, 180],
-              [320, 200, 190, 255, 260],
-              [330, 222, 190, 255, 270],
-              [325, 260, 220, 190, 255],
-              [300, 245, 215, 255, 270],
-              [280, 250, 190, 255, 270]
-            ],
-            opacity: 0.5
-          },
-          {
-            data: [
-              '', '',
-              '', '',
-              '', '',
-              '', '',
-              '', '',
-              [357, 222, 82, 355],
-              [56, 25, 156],
-              [70, 251, 425, 300, 278, 315],
-              [79, 52, 40, 250, 160],
-              [70, 251, 425, 300, 278, 315],
-              [79, 52, 40, 180, 240],
-              [79, 52, 40],
-              [60, 56, 56],
-              '', ''
-            ],
-            radius: 5,
-            edgeColor: '#ff5ca9',
-            fillColor: 'rgba(0, 186, 255, 0.5)'
-          }
-        ],
-        x: {
-          data: [ '', '',
-            '西峡', '', '',
-            '周口', '', '',
-            '南阳', '', '',
-            '驻马店', '', '',
-            '郑州', '', '',
-            '洛阳', '', ''
-          ],
-          grid: true,
-          gridLineType: 'dashed',
-          gridLineDash: [2, 2]
-        },
-        y: {
-          min: 0,
-          num: 6,
-          max: 500
-        },
-        labelLine: {
-          data: ['同期', '环期'],
-          type: 'rectangle'
-        },
-        radius: 4
-      },
-
-      colors: ''
-    }
-  }
-}
-</script>
-
-<style lang="less">
-
-</style>

src/views/demo/chart/polylineChartDemo.vue

@@ -1,228 +0,0 @@
-<template>
-  <div>
-    <border-box-7 class="chart-item" :reverse="true">
-      <polyline-chart :data="polylineChartData1" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Polyline-chart</div>
-
-        <highlight-code>
-&lt;polyline-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 折线图与柱状图折线部分相似
-data: [
-  {
-    data: [32, 30, 55, 24, 33, 25],
-    lineColor: '#3de7c9'
-  }
-],
-x: {
-  data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-},
-showValueText: true,
-// 非必需 数值展示位置偏移量
-valueTextOffset: [10, -5]
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <polyline-chart :data="polylineChartData2" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Polyline-chart</div>
-
-        <highlight-code>
-&lt;polyline-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      data: [
-        99.81, 99.42, 99.56, 99.23, 99.62,
-        99.36, 99.56, '', 99.81, 99.56, ...
-      ],
-      lineType: 'dashed',
-      lineDash: [2, 2],
-      lineColor: '#277dfb',
-      pointColor: '#3de7c9',
-      fillColor: ['rgba(40, 125, 252, 0.3)', 'rgba(40, 125, 252, 0)']
-    },
-    {
-      data: [
-        97.81, 97.42, 97.56, 97.23, 97.62,
-        97.36, 97.56, '', 97.81, 97.56, ...
-      ],
-      fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
-      type: 'smoothline'
-    }
-  ],
-  x: {
-    data: [
-      '10/01', '', '10/03', '', '10/05', '',
-      '10/07', '', '10/09', '', '10/11', '', ...
-    ]
-  },
-  y: {
-    min: 96,
-    max: 100,
-    // 数据精度 数据最大最小差值较小时 建议设置精度
-    fixed: 2,
-    num: 10,
-    unit: '%'
-  }
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item" :reverse="true">
-      <polyline-chart :data="polylineChartData3" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Polyline-chart</div>
-
-        <highlight-code>
-&lt;polyline-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      data: [2, 2.5, 3, 6, 3, 2.5, 2],
-      fillColor: ['rgba(255, 38, 214, 0.5)', 'rgba(40, 82, 255, 0.1)']
-    },
-    {
-      data: [3, 2, 4, 5, 4, 2, 3],
-      type: 'smoothline'
-    }
-  ],
-  x: {
-    data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
-  },
-  // 非必需 不贴合坐标轴绘制
-  boundaryGap: true
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <div id="point-chart" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PolylineChartDemo',
-  data () {
-    return {
-      polylineChartData1: {
-        data: [
-          {
-            data: [32, 30, 55, 24, 33, 25],
-            lineColor: '#3de7c9'
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-          min: 0,
-          max: 100
-        },
-        labelLine: {
-          data: ['车流量'],
-          color: ['#3de7c9'],
-          type: 'rectangle'
-        },
-        showValueText: true,
-        valueTextOffset: [10, -5]
-      },
-
-      polylineChartData2: {
-        data: [
-          {
-            data: [
-              99.81, 99.42, 99.56, 99.23, 99.62,
-              99.36, 99.56, '', 99.81, 99.56,
-              99.42, 99.56, '', '', 99.36,
-              99.42, '', 99.56, '', '',
-              99.56, 99.23, 99.62
-            ],
-            lineType: 'dashed',
-            lineDash: [2, 2],
-            lineColor: '#277dfb',
-            pointColor: '#3de7c9',
-            fillColor: ['rgba(40, 125, 252, 0.3)', 'rgba(40, 125, 252, 0)']
-          },
-          {
-            data: [
-              97.81, 97.42, 97.56, 97.23, 97.62,
-              97.36, 97.56, '', 97.81, 97.56,
-              97.42, 97.56, '', '', 97.36,
-              97.42, '', 97.56, '', '',
-              97.56, 97.23, 97.62
-            ],
-            fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
-            type: 'smoothline'
-          }
-        ],
-        x: {
-          data: [
-            '10/01', '', '10/03', '', '10/05', '',
-            '10/07', '', '10/09', '', '10/11', '',
-            '10/13', '', '10/15', '', '10/17', '',
-            '10/19', '', '10/21', '', '10/23'
-          ]
-        },
-        y: {
-          min: 96,
-          max: 100,
-          fixed: 2,
-          num: 10,
-          unit: '%'
-        },
-        labelLine: {
-          data: ['同期', '环期'],
-          color: ['#275afe', '#3de7c9'],
-          type: 'rectangle'
-        }
-      },
-
-      polylineChartData3: {
-        data: [
-          {
-            data: [2, 2.5, 3, 6, 3, 2.5, 2],
-            fillColor: ['rgba(255, 38, 214, 0.5)', 'rgba(40, 82, 255, 0.1)']
-          },
-          {
-            data: [3, 2, 4, 5, 4, 2, 3],
-            type: 'smoothline'
-          }
-        ],
-        x: {
-          data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
-        },
-        labelLine: {
-          data: ['同期', '环期'],
-          color: ['#ff2db8', '#3de7c9'],
-          type: 'rectangle'
-        },
-        color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
-        boundaryGap: true
-      },
-
-      colors: ''
-    }
-  }
-}
-</script>
-
-<style lang="less">
-
-</style>

src/views/demo/chart/radarChartDemo.vue

@@ -1,251 +0,0 @@
-<template>
-  <div>
-    <border-box-7 class="chart-item">
-      <radar-chart :data="radarChartData1" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Radar-Chart</div>
-        <highlight-code>
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      data: [450, 50, 450, 50, 450, 50] // 必须
-    },
-    {
-      data: [50, 450, 50, 450, 50, 450]
-    }, ...
-  ],
-  label: {
-    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'] // 必须
-  },
-  // 非必须 不配置该项则不绘制底部label
-  labelLine: {
-    data: ['同期', '环期']
-  }
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <radar-chart :data="radarChartData2" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Radar-Chart</div>
-        <highlight-code>
-&lt;radar-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      data: [450, 50, 450, 50, 450, 50],
-      dashed: true // 非必须 为真时绘制虚线
-    },
-    {
-      data: [50, 450, 50, 450, 50, 450],
-      lineColor: '#9cf4df', // 非必须 可配置改数据线条颜色
-      fillColor: 'rgba(238, 233, 108, 0.5)' // 非必须 可配置改数据填充颜色
-    }
-  ],
-  label: {
-    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
-    color: 'colors', // 非必须 可配置文字颜色
-    fontSize: 10 // 非必须 可配置文字大小
-  },
-  labelLine: ['同期', '环期'],
-  rayLineType: 'dashed', // 非必须 设置径向射线为虚线
-  rayLineColor: 'colors', // 非必须 设置径向射线颜色
-  ringNum: 5, // 非必填 设置环线个数
-  ringType: 'polyline', // 非必须 设置环线为折线
-  ringFillType: 'cover', // 非必须 设置环线填充颜色类型为cover
-  ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'], // 非必须 设置环线填充色
-  ringLineType: 'line', // 非必须 设置环线线条为实线
-  ringLineColor: 'rgba(156, 244, 233, 0.2)', // 非必须 设置环线线条颜色
-  rayLineOffset: Math.PI * -1.5, // 非必须 设置雷达图旋转偏移
-  radius: 0.8, // 非必须 设置雷达图最大环线半径
-  max: 550 // 非必须 设置雷达图数据最大值
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <radar-chart :data="radarChartData3" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Radar-Chart</div>
-        <highlight-code>
-&lt;radar-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  data: [
-    {
-      data: [....],
-      // 非必须 设置该列数据值标签颜色为继承
-      valueTextColor: 'inherit'
-    }
-  ],
-  ringFillColor: ['rgba(61, 231, 201, 0.1)'],
-  ringFillType: 'mulCover', // 非必须 设置环线填充颜色类型为mulCover
-  showValueText: true
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <radar-chart :data="radarChartData4" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Radar-Chart</div>
-        <highlight-code>
-&lt;radar-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  ringFillColor: ['rgba(61, 231, 201, 0.1)'],
-  ringFillType: 'ring', // 非必须 设置环线填充颜色类型为ring
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'RadarChartDemo',
-  data () {
-    return {
-      radarChartData1: {
-        data: [
-          {
-            data: [450, 50, 450, 50, 450, 50]
-          },
-          {
-            data: [50, 450, 50, 450, 50, 450]
-          }
-        ],
-        label: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        labelLine: {
-          data: ['同期', '环期']
-        }
-      },
-
-      radarChartData2: {
-        data: [
-          {
-            data: [450, 50, 450, 50, 450, 50],
-            dashed: true
-          },
-          {
-            data: [50, 450, 50, 450, 50, 450],
-            lineColor: '#9cf4df',
-            fillColor: 'rgba(238, 233, 108, 0.5)'
-          }
-        ],
-        label: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
-          color: 'colors',
-          fontSize: 10
-        },
-        labelLine: {
-          data: ['同期', '环期']
-        },
-        rayLineType: 'dashed',
-        rayLineColor: 'colors',
-        ringNum: 5,
-        ringType: 'polyline',
-        ringFillType: 'cover',
-        ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'],
-        ringLineType: 'line',
-        ringLineColor: 'rgba(156, 244, 233, 0.2)',
-        rayLineOffset: Math.PI * -1.5,
-        radius: 0.8,
-        max: 550
-      },
-
-      radarChartData3: {
-        data: [
-          {
-            data: [450, 50, 450, 50, 450, 50],
-            valueTextColor: 'inherit'
-          },
-          {
-            data: [50, 450, 50, 450, 50, 450],
-            valueTextColor: 'inherit'
-          }
-        ],
-        label: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
-          color: 'colors',
-          fontSize: 10
-        },
-        labelLine: {
-          data: ['同期', '环期']
-        },
-        rayLineType: 'dashed',
-        rayLineColor: 'colors',
-        ringNum: 5,
-        ringType: 'polyline',
-        ringFillType: 'mulCover',
-        ringFillColor: ['rgba(61, 231, 201, 0.1)'],
-        ringLineType: 'line',
-        ringLineColor: 'rgba(156, 244, 233, 0.2)',
-        rayLineOffset: Math.PI * -1.5,
-        radius: 0.8,
-        max: 550,
-        showValueText: true
-      },
-
-      radarChartData4: {
-        data: [
-          {
-            data: [450, 50, 450, 50, 450, 50]
-          },
-          {
-            data: [50, 450, 50, 450, 50, 450]
-          }
-        ],
-        label: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
-          color: 'colors',
-          fontSize: 10
-        },
-        labelLine: {
-          data: ['同期', '环期']
-        },
-        rayLineType: 'dashed',
-        rayLineColor: 'colors',
-        ringNum: 5,
-        ringType: 'polyline',
-        ringFillType: 'ring',
-        ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'],
-        ringLineType: 'line',
-        ringLineColor: 'rgba(156, 244, 233, 0.2)',
-        rayLineOffset: Math.PI * -1.5,
-        radius: 0.8,
-        max: 550
-      },
-
-      colors: ''
-    }
-  }
-}
-</script>
-
-<style lang="less">
-
-</style>

src/views/demo/decoration.vue

@@ -1,152 +0,0 @@
-<template>
-  <div id="decoration">
-    <border-box-7 class="decoration-container">
-      <decoration-1 class="decoration d1 center" />
-
-      <div class="title">Decoration-1</div>
-      <highlight-code>
-&lt;decoration-1 /&gt;
-      </highlight-code>
-    </border-box-7>
-
-    <border-box-7 class="decoration-container">
-      <decoration-2 class="decoration d2 center" />
-      <div class="title">Decoration-2</div>
-      <highlight-code>
-&lt;decoration-2 /&gt;
-      </highlight-code>
-    </border-box-7>
-
-    <border-box-7 class="decoration-container">
-      <decoration-2 class="decoration d2r center" :reverse="true" />
-      <div class="title">Decoration-2(reverse)</div>
-      <highlight-code>
-&lt;decoration-2 :reverse="true" /&gt;
-      </highlight-code>
-    </border-box-7>
-
-    <border-box-7 class="decoration-container">
-      <decoration-3 class="decoration d3 center" />
-      <div class="title">Decoration-3</div>
-      <highlight-code>
-&lt;decoration-3 /&gt;
-      </highlight-code>
-    </border-box-7>
-
-    <border-box-7 class="decoration-container">
-      <decoration-4 class="decoration d4 center" />
-      <div class="title">Decoration-4</div>
-      <highlight-code>
-&lt;decoration-4 /&gt;
-      </highlight-code>
-    </border-box-7>
-
-    <border-box-7 class="decoration-container">
-      <decoration-4 class="decoration d4r center" :reverse="true" />
-      <div class="title">Decoration-4(reverse)</div>
-      <highlight-code>
-&lt;decoration-4 :reverse="true" /&gt;
-      </highlight-code>
-    </border-box-7>
-
-    <border-box-7 class="decoration-container">
-      <decoration-5 class="decoration d4r center" />
-      <div class="title">Decoration-5</div>
-      <highlight-code>
-&lt;decoration-5 /&gt;
-      </highlight-code>
-    </border-box-7>
-
-    <border-box-7 class="decoration-container">
-      <decoration-6 class="decoration d4r center" />
-      <div class="title">Decoration-6</div>
-      <highlight-code>
-&lt;decoration-6 /&gt;
-      </highlight-code>
-    </border-box-7>
-
-    <border-box-7 class="decoration-container">
-      <decoration-7 class="decoration d4r center">Decoration</decoration-7>
-      <div class="title">Decoration-7</div>
-      <highlight-code>
-&lt;decoration-7&gt;Decoration&lt;dtn-7 /&gt;
-      </highlight-code>
-    </border-box-7>
-
-    <border-box-7 class="decoration-container">
-      <loading class="decoration center" />
-      <div class="title">Loading</div>
-      <highlight-code>
-&lt;loading /&gt;
-      </highlight-code>
-    </border-box-7>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'DecorationDemo'
-}
-</script>
-
-<style lang="less">
-#decoration {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  padding-bottom: 100px;
-
-  .decoration-container {
-    position: relative;
-    width: 300px;
-    height: 300px;
-    margin: 0 20px;
-    margin-bottom: 20px;
-    text-align: center;
-    font-weight: bold;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .title {
-      text-indent: 0;
-    }
-  }
-
-  .decoration {
-    position: absolute;
-    transform: translate(-50%, -50%);
-  }
-
-  .center {
-    top: 50%;
-    left: 50%;
-  }
-
-  .d1 {
-    width: 200px;
-  }
-
-  .d2 {
-    width: 300px;
-  }
-
-  .d2r {
-    height: 300px;
-  }
-
-  .d3 {
-    width: 200px;
-  }
-
-  .d4 {
-    height: 300px;
-  }
-
-  .d4r {
-    width: 300px;
-  }
-}
-</style>

src/views/demo/document.vue

@@ -1,53 +0,0 @@
-<template>
-  <div id="datav-document">
-    <div class="document">
-      <div class="title">介绍</div>
-
-      <div class="text-info">本组件库基于Vue, 用构建大屏数据展示(图表类)</div>
-      <div class="text-info">类似于echarts, 但是消耗资源更小, 更轻量, 易于使用</div>
-
-      <div class="title">使用</div>
-
-      <div class="text-info">你需要将DataV文件夹复制至你的项目内</div>
-      <div class="text-info">并在main.js中引入使用</div>
-
-      <highlight-code>
-// main.js
-import dataV from './DataV/index.js'
-
-Vue.use(dataV)
-
-// 可以直接在Views文件夹下的dataView页面直接编写页面
-// dataView页面已做全屏缩放处理 routerPath: #/datav/view
-      </highlight-code>
-
-      <div class="text-info">组件具体用法见示例</div>
-      <div class="text-info"><a href="https://github.com/jiaming743/DataV" target="_BLANK">GitHub</a></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'DatavDocument'
-}
-</script>
-
-<style lang="less">
-#datav-document {
-  font-size: 15px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-
-  a {
-    color: #0084ff;
-
-    &:hover,
-    &:active,
-    &:visited {
-      color: #0084ff;
-    }
-  }
-}
-</style>

src/views/demo/index.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="demo" ref="demo">
-    <div class="menu-bar">
-      <div :class="`menu-item ${activeIndex === index && 'active'}`"
-        v-for="(item, index) in menuData"
-        :key="item.title"
-        @click="$router.push({ name: item.routerName }) & (activeIndex = index)">
-        {{ item.title }}
-      </div>
-    </div>
-
-    <div class="router-container">
-      <router-view />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Demo',
-  data () {
-    return {
-      activeIndex: 0,
-
-      menuData: [
-        {
-          title: 'Document',
-          routerName: 'document'
-        },
-        {
-          title: 'Border-Box',
-          routerName: 'borderBox'
-        },
-        {
-          title: 'Decoration',
-          routerName: 'decoration'
-        },
-        {
-          title: 'Chart',
-          routerName: 'chart'
-        },
-        {
-          title: 'Other',
-          routerName: 'other'
-        },
-        {
-          title: 'Show',
-          routerName: 'show'
-        }
-      ]
-    }
-  },
-  methods: {
-    scaleScreen () {
-      const { $refs } = this
-
-      const demoDom = $refs['demo']
-
-      const { height } = screen
-      const bdWidth = document.body.clientWidth
-      const bdHeight = document.body.clientHeight
-
-      if (bdWidth < 1500) {
-        const scale = bdWidth / 1500
-        demoDom.style.transform = `scale(${scale})`
-        demoDom.style.height = bdHeight * (height / bdHeight) * (1 / scale) + 'px'
-      }
-    },
-    bindReSizeEventHandler () {
-      const { debounce, scaleScreen } = this
-
-      if (!debounce) return
-
-      window.addEventListener('resize', debounce(100, scaleScreen))
-    },
-    initActiveIndex () {
-      const { $route: { name }, menuData } = this
-
-      this.activeIndex = menuData.findIndex(({ routerName }) => routerName === name)
-    }
-  },
-  created () {
-    const { initActiveIndex } = this
-
-    initActiveIndex()
-  },
-  mounted () {
-    const { scaleScreen, bindReSizeEventHandler } = this
-
-    scaleScreen()
-
-    bindReSizeEventHandler()
-  }
-}
-</script>
-
-<style lang="less">
-.demo {
-  width: 100%;
-  height: 100%;
-  background-image: url('../../assets/img/bg.png');
-  background-size: 100%;
-  color: #fff;
-  min-width: 1500px;
-  transform-origin: left top;
-
-  .menu-bar {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 40px;
-    line-height: 40px;
-    font-weight: bold;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    margin: 10px 0px;
-  }
-
-  .active {
-    border-bottom: 3px solid #0084ff;
-  }
-
-  .menu-item {
-    width: 120px;
-    text-align: center;
-    margin: 0px 20px;
-    cursor: pointer;
-    z-index: 9;
-
-    &:hover {
-      border-bottom: 3px solid #0084ff;
-    }
-
-    &:active {
-      color: #0084ff;
-    }
-  }
-
-  .router-container {
-    width: 100%;
-    height: 100%;
-    overflow: scroll;
-    padding: 70px 100px 0px 100px;
-    box-sizing: border-box;
-  }
-}
-</style>

src/views/demo/other.vue

@@ -1,295 +0,0 @@
-<template>
-  <div id="other">
-    <border-box-7 class="other-item">
-      <div class="component">
-        <scroll-board :index="true" :data="scrollBoardData1" :columnWidth="[50, 50, 50]" :textAlign="['center', 'center']" />
-      </div>
-
-      <div class="config-info">
-        <div class="title">Water-Level-Pond</div>
-
-        <highlight-code>
-&lt;scroll-board :data="data" :index="true" :columnWidth="columnWidth" :textAlign="textAlign" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: { // data内容可以是html标签 内容由v-html渲染
-  data: [ // 必须 每行数据的数组长度应保持一致
-    ['张三', '男', '这里是地址'],
-    ['李四', '女', '这里是地址'],
-    ['王五', '男', '这里是地址'],
-    ['赵六', '女', '这里是地址'],
-    ['钱七', '男', '这里是地址'],
-    ['孙八', '女', '这里是地址'],
-    ['杨九', '男', '这里是地址'],
-    ['吴十', '女', '这里是地址']
-  ]
-}
-// 非必须 设置每一栏的宽度 允许插入空位 空位均分宽度
-columnWidth: [50, 50, 50]
-// 非必须 设置每一栏的对齐方式 允许插入空位 默认居左
-textAlign: ['center', 'center']
-// index 非必须 属性为真时 自动添加序号
-// rowNum 非必须 可以设置展示行数
-// oddBG 非必须 可以设置奇数行背景色
-// evenBG 非必须 可以设置偶数行背景色
-// titleBG 非必须 可设置表头背景色
-// carousel 非必须 设置为page 滚动时整页滚动
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="other-item">
-      <div class="component">
-        <scroll-board :data="scrollBoardData2" carousel="page" :columnWidth="[50, 50]" :textAlign="['center', 'center']" />
-      </div>
-
-      <div class="config-info">
-        <div class="title">Water-Level-Pond</div>
-
-        <highlight-code>
-&lt;scroll-board :data="data" carousel="page" :columnWidth="columnWidth" :textAlign="textAlign" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    ['张三', '男', '这里是地址'],
-    ['李四', '女', '这里是地址'],
-    ['王五', '男', '这里是地址'],
-    ['赵六', '女', '这里是地址'],
-    ['钱七', '男', '这里是地址'],
-    ['孙八', '女', '这里是地址'],
-    ['杨九', '男', '这里是地址'],
-    ['吴十', '女', '这里是地址']
-  ],
-  // 非必须 添加此项自动生成表头
-  title: ['姓名', '性别', '地址']
-}
-columnWidth: [50, 50]
-textAlign: ['center', 'center']
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="other-item">
-      <div class="component">
-        <water-level-pond :level="[60, 40]" />
-      </div>
-
-      <div class="config-info">
-        <div class="title">Water-Level-Pond</div>
-
-        <highlight-code>
-&lt;water-level-pond :level="[60, 40]" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// level必须为数组
-// 可绑定colors属性 非必须 未配置该项自动使用默认色
-// 当colors属性为数组时 波浪自动应用渐变色
-// noGradient为true时可关闭波浪渐变色效果
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="other-item">
-      <div class="component">
-        <water-level-pond :level="[60, 40]" type="rect" :waveNum="2" :waveHeight="0.3" />
-      </div>
-
-      <div class="config-info">
-        <div class="title">Water-Level-Pond</div>
-
-        <highlight-code>
-&lt;water-level-pond :level="[60, 40]" type="rect" :waveNum="2" :waveHeight="0.3" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 矩形样式
-// waveNum 可设置波峰个数
-// waveHeight 可设置波峰高度
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="other-item">
-      <div class="component">
-        <water-level-pond :level="[60, 40]" type="roundRect" borderColor="rgba(45, 219, 216, 0.5)" />
-      </div>
-
-      <div class="config-info">
-        <div class="title">Water-Level-Pond</div>
-
-        <highlight-code>
-&lt;water-level-pond :level="[60, 40]" type="roundRect" borderColor="rgba(45, 219, 216, 0.5)" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 圆角矩形样式
-// 可特殊设置边框颜色 文字与边框颜色同步
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="other-item">
-      <div class="component">
-        <percent-pond :percent="66" />
-      </div>
-
-      <div class="config-info">
-        <div class="title">Percent-Pond</div>
-
-        <highlight-code>
-&lt;percent-pond :percent="66" /&gt;
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="other-item">
-      <div class="component">
-        <percent-arc :percent="66" :ringLineWidth="10" :arcLineWidth="20" arcType="round">66</percent-arc>
-      </div>
-
-      <div class="config-info">
-        <div class="title">Percent-Arc</div>
-
-        <highlight-code>
-&lt;percent-arc :percent="66" :ringLineWidth="10" :arcLineWidth="20" arcType="round"&gt;66&lt;percent-arc/&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 内置slot 可以置入任意元素
-// percent 必须 设置弧度程度
-// arcType 非必须 设置是否为圆角弧形 round | butt
-// raidus 非必须 设置环半径
-// ringLineWidth 非必须 设置环线宽度
-// arcLineWidth 非必须 设置弧线宽度
-// ringColor 非必须 设置环线颜色 只能设置一种颜色
-// arcColor 非必须 设置弧线颜色 可以设置多种 多种自动渐变
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="other-item">
-      <div class="component">
-        <percent-arc :percent="66" ringColor="#c7166f" :arcColor="['#2755fe', '#ff12cb']">66</percent-arc>
-      </div>
-
-      <div class="config-info">
-        <div class="title">Percent-Arc</div>
-
-        <highlight-code>
-&lt;percent-arc :percent="66" ringColor="#c7166f" :arcColor="['#2755fe', '#ff12cb']"&gt;66&lt;percent-arc/&gt;
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="other-item">
-      <div class="component">
-        <number-show :number="1399" />
-      </div>
-
-      <div class="config-info">
-        <div class="title">Number-Show</div>
-
-        <highlight-code>
-&lt;number-show :number="1399" /&gt;
-        </highlight-code>
-      </div>
-    </border-box-7>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Other',
-  data () {
-    return {
-      scrollBoardData1: {
-        data: [
-          ['张三', '男', '这里是地址这里是地址这里是地址这里是地址'],
-          ['李四', '女', '这里是地址这里是地址这里是地址这里是地址'],
-          ['王五', '男', '这里是地址这里是地址这里是地址这里是地址'],
-          ['赵六', '女', '这里是地址这里是地址这里是地址这里是地址'],
-          ['钱七', '男', '这里是地址这里是地址这里是地址这里是地址'],
-          ['孙八', '女', '这里是地址这里是地址这里是地址这里是地址'],
-          ['杨九', '男', '这里是地址这里是地址这里是地址这里是地址'],
-          ['吴十', '女', '这里是地址这里是地址这里是地址这里是地址']
-        ]
-      },
-      scrollBoardData2: {
-        data: [
-          ['张三', '男', '这里是地址这里是地址这里是地址这里是地址'],
-          ['李四', '女', '这里是地址这里是地址这里是地址这里是地址'],
-          ['王五', '男', '这里是地址这里是地址这里是地址这里是地址'],
-          ['赵六', '女', '这里是地址这里是地址这里是地址这里是地址'],
-          ['钱七', '男', '这里是地址这里是地址这里是地址这里是地址'],
-          ['孙八', '女', '这里是地址这里是地址这里是地址这里是地址'],
-          ['杨九', '男', '这里是地址这里是地址这里是地址这里是地址'],
-          ['吴十', '女', '这里是地址这里是地址这里是地址这里是地址']
-        ],
-        title: ['姓名', '性别', '地址']
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-#other {
-  display: flex;
-  flex-direction: column;
-
-  .other-item {
-    width: 80%;
-    margin-left: 20%;
-    min-height: 300px;
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-
-  .component {
-    width: 400px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
-  .config-info {
-    padding: 0px 30px;
-    display: flex;
-    flex-direction: column;
-
-    .highlight-code {
-      margin: -30px 0px;
-    }
-  }
-
-  .scroll-board {
-    width: 350px;
-    height: 200px;
-  }
-
-  .water-level-pond {
-    width: 150px;
-    height: 200px;
-  }
-
-  .percent-pond {
-    width: 300px;
-    height: 80px;
-  }
-
-  .percent-arc {
-    width: 200px;
-    height: 200px;
-    font-size: 50px;
-    color: aqua;
-  }
-}
-</style>

src/views/demo/show.vue

@@ -1,56 +0,0 @@
-<template>
-  <div id="show">
-    <border-box-7 class="show-item" v-for="show in showData" :key="show.title">
-      <a :href="show.href" target="_BLANK">{{ show.title }}</a>
-    </border-box-7>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Show',
-  data () {
-    return {
-      showData: [
-        {
-          title: '运维管理台',
-          href: 'http://datav.jiaminghi.com/demo/manage-desk'
-        },
-        {
-          title: '运维电子档案',
-          href: 'http://datav.jiaminghi.com/demo/electronic-file'
-        }
-      ]
-    }
-  }
-}
-</script>
-
-<style lang="less">
-#show {
-
-  .show-item {
-    width: 60%;
-    height: 300px;
-    margin-left: 20%;
-    margin-bottom: 20px;
-    text-align: center;
-    font-size: 100px;
-    line-height: 300px;
-  }
-
-  a {
-    position: relative;
-    color: #fff;
-    text-decoration: none;
-    text-shadow: 0 0 10px gray;
-    z-index: 9;
-
-    &:hover,
-    &:active,
-    &:visited {
-      color: #fff;
-    }
-  }
-}
-</style>

src/views/manageDesk/index.vue

@@ -1,688 +0,0 @@
-<template>
-  <div id="manage-desk">
-    <div class="header">
-      <div class="left">技术支持:<a :href="technicalSupport" target="_BLANK">{{ technicalSupport }}</a></div>
-      <div class="middle">{{ topMiddleTitle }}</div>
-      <border-box-2 class="right">
-        设备档案馆
-      </border-box-2>
-    </div>
-
-    <border-box-1 class="content">
-      <div class="top">
-        <div class="top-left">
-          <div class="top-left-title-1">
-            当月维修任务量
-            <decoration-3 />
-          </div>
-
-          <div class="top-left-title-2">
-            <decoration-3 />
-            运维人均工作量
-          </div>
-
-          <border-box-5 class="top-left-box-1">
-            <div class="tlb-text">
-              <div>{{ chart1Data.monthSum }}</div>
-              <div class="small-text">{{ chart1Data.lastMonthSum }}</div>
-              <div class="small-text">{{ chart1Data.lastYearMonthSum }}</div>
-            </div>
-          </border-box-5>
-
-          <border-box-5 class="top-left-box-2" :reverse="true">
-            <div class="tlb-text">
-              <div>{{ chart1Data.personDayAvg }}</div>
-              <div class="small-text">{{ chart1Data.personLastMonthDayAvg }}</div>
-              <div class="small-text">{{ chart1Data.personLastYearMonthDayAvg }}</div>
-            </div>
-          </border-box-5>
-        </div>
-
-        <div class="top-right">
-          <polyline-chart :data="chart2Data">
-            <div class="title-item">
-              设备完好率月趋势
-              <decoration-3 />
-            </div>
-          </polyline-chart>
-
-          <polyline-chart :data="chart3Data">
-            <div class="title-item">
-              设备故障月趋势
-              <decoration-3 />
-            </div>
-          </polyline-chart>
-        </div>
-      </div>
-
-      <div class="bottom">
-        <border-box-6 class="bottom-left">
-          <decoration-4 class="bottom-left-decoration-1" />
-          <decoration-4 class="bottom-left-decoration-2" />
-
-          <div class="bottom-left-item">
-            <div class="bli-title">机电设备完好率</div>
-            <div class="bli-value left-value">{{ chart4Data.deviceNormalPercent }}</div>
-            <arc-ring-chart class="bli-chart" :data="chart4Data.data" />
-          </div>
-          <div class="bottom-left-item">
-            <div class="bli-title">任务维修平均用时</div>
-            <div class="bli-value right-value">{{ chart5Data.avgTime}}</div>
-            <concentric-arc-chart class="bli-chart" :data="chart5Data.data" />
-          </div>
-        </border-box-6>
-
-        <div class="bottom-right">
-          <border-box-6 class="bottom-right-item">
-            <div class="title-item">
-              <img src="./img/1.png" />人员贡献排行榜
-            </div>
-
-            <scroll-board :data="chart6Data" />
-          </border-box-6>
-
-          <border-box-6 class="bottom-right-item">
-            <div class="title-item">
-              <img src="./img/2.png" />故障设备排行榜
-            </div>
-
-            <scroll-board :data="chart7Data" />
-          </border-box-6>
-
-          <border-box-6 class="bottom-right-item">
-            <div class="title-item">
-              <img src="./img/3.png" />常见故障排行榜
-            </div>
-
-            <scroll-board :data="bottomRightScrollBorad3Data" />
-          </border-box-6>
-
-          <border-box-6 class="bottom-right-item">
-            <div class="title-item">
-              <img src="./img/4.png" />故障位置排行榜
-            </div>
-
-            <scroll-board :data="chart9Data" />
-          </border-box-6>
-        </div>
-      </div>
-    </border-box-1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ManageDesk',
-  data () {
-    return {
-      technicalSupport: 'https://github.com/jiaming743/DataV',
-      topMiddleTitle: 'Demo-机电运维管理台',
-
-      // 上部左边卡片数据
-      chart1Data: {
-        monthSum: 0,
-        lastMonthSum: 81,
-        lastYearMonthSum: 0,
-        personDayAvg: 0.1,
-        personLastMonthDayAvg: 0.3,
-        personLastYearMonthDayAvg: 0
-      },
-
-      // 上部右边第一个图表数据
-      chart2Data: {
-        data: [
-          {
-            data: [
-              99.81, 99.42, 99.56, 99.23, 99.62,
-              99.36, 99.56, '', 99.81, 99.56,
-              99.42, 99.56, '', '', 99.36,
-              99.42, '', 99.56, '', '',
-              99.56, 99.23, 99.62
-            ],
-            fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
-            pointColor: '#00db95',
-            type: 'smoothline'
-          }
-        ],
-        color: ['#00baff'],
-        x: {
-          data: [
-            '10/01', '', '10/03', '', '10/05', '',
-            '10/07', '', '10/09', '', '10/11', '',
-            '10/13', '', '10/15', '', '10/17', '',
-            '10/19', '', '10/21', '', '10/23'
-          ]
-        },
-        y: {
-          min: 96,
-          max: 100,
-          fixed: 2,
-          num: 10,
-          unit: '%'
-        },
-        labelLine: ['设备完好率']
-      },
-
-      // 上部右边第二个图表数据
-      chart3Data: {
-        data: [
-          {
-            data: [2, 3, 6, 5, 4, 5, 2],
-            type: 'column',
-            columnColor:['rgba(0, 186, 255, 0.5)', 'rgba(0, 186, 255, 0.1)']
-          },
-          {
-            data: [1, 2, 4, 4, 5, 4, 1],
-            type: 'smoothline',
-            dashed: true,
-            fillColor:['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
-          },
-          {
-            data: [0.5, 1, 3, 3, 4, 3, 0.5],
-            fillColor:['rgba(254, 217, 78, 0.5)', 'rgba(254, 217, 78, 0.1)']
-          },
-          {
-            data: [2, 3, 6, 5, 6, 5, 2]
-          }
-        ],
-        x: {
-          data: [
-            '', '10/07',
-            '', '10/14',
-            '', '10/21', ''
-          ]
-        },
-        y: {
-          max: 8,
-          min: 0,
-          unit: '单位'
-        },
-        labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
-        color: ['#00baff', '#3de7c9', '#f5d94e', '#ff5ca9'],
-        boundaryGap: true
-      },
-
-      // 底部左边第一个图表数据
-      chart4Data: {
-        data: {
-          data: [
-            {
-              value: 19,
-              title: '监控系统'
-            },
-            {
-              value: 16,
-              title: '收费系统'
-            },
-            {
-              value: 24,
-              title: '通信系统'
-            },
-            {
-              value: 14,
-              title: '供配电系统'
-            },
-            {
-              value: 27,
-              title: '其他'
-            }
-          ],
-          color: ['#00c0ff', '#3de7c9', '#fff']
-        },
-        deviceNormalPercent: 99.01
-      },
-
-      // 底部左边第二个图表数据
-      chart5Data: {
-        data: {
-          data: [
-            {
-              value: 0.38,
-              title: '8小时以内'
-            },
-            {
-              value: 0.57,
-              title: '24小时以内'
-            },
-            {
-              value: 0.7,
-              title: '48小时以内'
-            },
-            {
-              value: 0.78,
-              title: '72小时以内'
-            },
-            {
-              value: 0.22,
-              title: '大于72小时'
-            }
-          ],
-          color: ['#00c0ff', '#3de7c9'],
-          arcArea: [0.3, 0.7],
-          arcGap: 5,
-          fontSize: 12
-        },
-        avgTime: 55.1
-      },
-
-      // 底部右边第一个滚动榜单数据
-      chart6Data: {
-        data: [
-          {
-            title: '赵亚伟',
-            info: '月累计排除故障: 3起'
-          },
-          {
-            title: '刘川',
-            info: '月累计排除故障: 3起'
-          },
-          {
-            title: '方扛',
-            info: '月累计排除故障: 3起'
-          },
-          {
-            title: '孙鹏飞',
-            info: '月累计排除故障: 3起'
-          },
-          {
-            title: '仲文豪',
-            info: '月累计排除故障: 2起'
-          },
-          {
-            title: '李东洋',
-            info: '月累计排除故障: 2起'
-          },
-          {
-            title: '贾果果',
-            info: '月累计排除故障: 1起'
-          },
-          {
-            title: '魏振正',
-            info: '月累计排除故障: 1起'
-          }
-        ],
-        showItemNum: 5
-      },
-
-      // 底部右边第二个滚动榜单数据
-      chart7Data: {
-        data: [
-          {
-            title: '液晶显示器',
-            info: '月累计: 2起'
-          },
-          {
-            title: '车牌识别仪',
-            info: '月累计: 2起'
-          },
-          {
-            title: '自动栏杆机',
-            info: '月累计: 2起'
-          },
-          {
-            title: '称重仪表',
-            info: '月累计: 2起'
-          },
-          {
-            title: '收费键盘',
-            info: '月累计: 2起'
-          }
-        ],
-        showItemNum: 5
-      },
-
-      // 底部右边第三个滚动榜单数据
-      bottomRightScrollBorad3Data: {
-        data: [
-          {
-            title: '栏杆机不能抬起',
-            info: '月累计: 5起'
-          },
-          {
-            title: '栏杆机落杆',
-            info: '月累计: 3起'
-          },
-          {
-            title: '光端机故障',
-            info: '月累计: 2起'
-          },
-          {
-            title: '票据打印机',
-            info: '月累计: 2起'
-          },
-          {
-            title: '视频无图像',
-            info: '月累计: 2起'
-          },
-          {
-            title: '视频花屏',
-            info: '月累计: 1起'
-          },
-          {
-            title: '车牌识别仪',
-            info: '月累计: 1起'
-          }
-        ],
-        showItemNum: 5
-      },
-
-      // 底部右边第四个滚动榜单数据
-      chart9Data: {
-        data: [
-          {
-            title: '收费广场',
-            info: '发生故障: 3起'
-          },
-          {
-            title: '外场道路',
-            info: '发生故障: 3起'
-          },
-          {
-            title: '运维分中心',
-            info: '发生故障: 3起'
-          },
-          {
-            title: '服务区',
-            info: '发生故障: 3起'
-          },
-          {
-            title: '其他',
-            info: '发生故障: 2起'
-          }
-        ],
-        showItemNum: 4
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-#manage-desk {
-  width: 100%;
-  height: 100%;
-  color: #fff;
-
-  .header {
-    position: relative;
-    height: 80px;
-
-    .left, .middle, .right {
-      position: absolute;
-    }
-
-    .left {
-      left: 35px;
-      bottom: 0px;
-      font-size: 20px;
-      color: rgba(1, 134, 187, 0.91);
-
-      a {
-
-        &:hover,
-        &:active,
-        &:visited {
-          color: rgba(1, 134, 187, 0.91);
-        }
-      }
-    }
-
-    .middle {
-      font-size: 33px;
-      left: 50%;
-      bottom: 0px;
-      transform: translateX(-50%);
-    }
-
-    .right {
-      width: 140px;
-      font-size: 18px;
-      right: 130px;
-      bottom: -20px;
-      text-align: center;
-    }
-  }
-
-  .content {
-    height: calc(~"100% - 80px");
-    display: flex;
-    flex-direction: column;
-  }
-
-  .top {
-    width: 100%;
-    height: 35%;
-    margin-top: 20px;
-    margin-bottom: 60px;
-    display: flex;
-    flex-direction: row;
-  }
-
-  .bottom {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-  }
-
-  .top-left, .bottom-left {
-    width: 32%;
-    height: 100%;
-  }
-
-  .top-left {
-    position: relative;
-
-    .top-left-title-1, .top-left-title-2 {
-      position: absolute;
-      font-size: 20px;
-      width: 170px;
-    }
-
-    .top-left-title-1 {
-      left: 51%;
-      text-align: right;
-      top: 20px;
-    }
-
-    .top-left-title-2 {
-      right: 51%;
-      text-align: left;
-      bottom: 20px;
-    }
-
-    .border-box-5 {
-      position: absolute;
-      width: 48%;
-      height: 60%;
-    }
-
-    .tlb-text {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-
-      :nth-child(1) {
-        color: #00c0ff;
-        font-size: 48px;
-        font-weight: bold;
-
-        &::after {
-          font-size: 30px;
-          font-weight: bold;
-          color: #fff;
-          margin-left: 10px;
-        }
-      }
-
-      .small-text {
-        font-size: 16px;
-        margin: 10px 0px;
-
-        &::before {
-          margin-right: 40px;
-        }
-      }
-
-      :nth-child(2) {
-
-        &::before {
-          content: '同期';
-        }
-      }
-
-      :nth-child(3) {
-
-        &::before {
-          content: '环期';
-        }
-      }
-    }
-
-    .top-left-box-1 {
-      top: 0px;
-      left: 0px;
-
-      .tlb-text {
-        left: 40px;
-      }
-
-      .tlb-text :nth-child(1)::after {
-        content: '件'
-      }
-    }
-
-    .top-left-box-2 {
-      bottom: 0px;
-      right: 0px;
-
-      .tlb-text {
-        right: 40px;
-      }
-
-      .tlb-text :nth-child(1)::after {
-        content: '件 / 日'
-      }
-    }
-  }
-
-  .top-right, .bottom-right {
-    flex: 1;
-    margin-left: 30px;
-  }
-
-  .top-right {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-
-    .polyline-chart {
-      width: 40%;
-    }
-
-    .title-item {
-      position: absolute;
-      right: 0px;
-      width: 180px;
-      font-size: 20px;
-      text-align: right;
-    }
-  }
-
-  .bottom-left {
-    position: relative;
-    display: flex;
-
-    .bottom-left-decoration-1, .bottom-left-decoration-2 {
-      position: absolute;
-      height: 42%;
-      left: 50%;
-      margin-left: -3px;
-    }
-
-    .bottom-left-decoration-1 {
-      top: 8%;
-      transform: rotate(180deg);
-    }
-
-    .bottom-left-decoration-2 {
-      bottom: 8%;
-    }
-  }
-
-  .bottom-left-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-
-    .bli-title {
-      height: 80px;
-      font-size: 20px;
-      line-height: 80px;
-    }
-
-    .bli-value {
-      height: 80px;
-      line-height: 80px;
-      font-size: 48px;
-      color: rgb(0, 192, 255);
-      font-weight: bold;
-
-      &::after {
-        color: #fff;
-        font-size: 30px;
-        font-weight: normal;
-      }
-
-      &.left-value {
-        &::after {
-          content: '%'
-        }
-      }
-
-      &.right-value {
-        &::after {
-          content: '小时'
-        }
-      }
-    }
-
-    .bli-chart {
-      height: 50%;
-    }
-  }
-
-  .bottom-right {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .bottom-right-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    margin: 0 -5px;
-    padding: 20px 25px;
-
-    .title-item {
-      height: 50px;
-      line-height: 50px;
-      margin-bottom: 20px;
-      font-size: 20px;
-
-      img {
-        height: 40px;
-        width: 40px;
-        vertical-align: middle;
-        margin-left: 20px;
-        margin-right: 5px;
-      }
-    }
-
-    .scroll-board {
-    }
-  }
-}
-</style>

vue.config.js

@@ -1,16 +0,0 @@
-module.exports = {
-  devServer: {
-    port: 6661,
-    // proxy: {
-    //   '/rest': {
-    //     // target: 'http://yd.jdyw.prod.hndfsj.net',
-    //     target: 'http://192.168.10.122:38088',    //mashuai
-    //     // target: 'http://192.168.10.125:38080',    //qianshuo
-    //     pathRewrite: {
-    //       '^/rest': '/rest'
-    //     }
-    //   }
-    // }
-  },
-  baseUrl: './'
-}