some modify

.svn/entries

@@ -0,0 +1 @@
+12

.svn/format

@@ -0,0 +1 @@
+12

src/assets/style/index.less

@@ -10,9 +10,6 @@ html, body{
 }
 
 body {
-  background-size: 100%;
-  background-image: url('../img/bg.png');
-  background-repeat: repeat;
   color: #fff;
 }
 

src/components/arcRingChart/idnex.vue

@@ -1,334 +0,0 @@
-<template>
-  <div class="arc-ring-chart">
-    <loading v-if="!data" />
-
-    <div class="label-line" v-else>
-      <div class="label-item" v-for="(label, i) in data.data" :key="label.title">
-        <div :style="`background-color: ${data.color[i % data.color.length]};`"></div>
-        <div>{{ label.title }}</div>
-      </div>
-    </div>
-
-    <canvas :ref="ref" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ArcRingChart',
-  props: ['data'],
-  data () {
-    return {
-      ref: `concentric-arc-chart-${(new Date()).getTime()}`,
-      canvasDom: '',
-      canvasWH: [0, 0],
-      ctx: '',
-
-      arcOriginPos: [],
-
-      defaultDecorationCircleRadius: 0.55,
-      defaultArcRadiusArea: [0.3, 0.4],
-      defaultArcWidthArea: [2, 10],
-      defaultLabelFontSize: 12,
-
-      decorationRadius: '',
-
-      radianOffset: Math.PI / -2,
-
-      totalValue: 0,
-
-      arcRadius: [],
-      arcRadian: [],
-      arcWidth: [],
-
-      labelLinePoints: []
-    }
-  },
-  watch: {
-    data (d) {
-      const { draw } = this
-
-      d && draw()
-    }
-  },
-  methods: {
-    init () {
-      const { $nextTick, initCanvas, calcArcConfig, data, draw } = this
-
-      $nextTick(e => {
-        initCanvas()
-
-        calcArcConfig()
-
-        data && draw()
-      })
-    },
-    initCanvas () {
-      const { $refs, ref, labelRef, canvasWH } = this
-
-      const canvas = this.canvasDom = $refs[ref]
-
-      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')
-    },
-    calcArcConfig () {
-      const { canvasWH, arcOriginPos } = this
-
-      arcOriginPos[0] = canvasWH[0] / 2
-      arcOriginPos[1] = canvasWH[1] / 2
-    },
-    draw () {
-      const { ctx, canvasWH, drawDecorationCircle } = this
-
-      ctx.clearRect(0, 0, ...canvasWH)
-
-      drawDecorationCircle()
-
-      const { calcArcRadius, calcArcRadian, calcArcWidth, drawArc } = this
-
-      calcArcRadius()
-
-      calcArcRadian()
-
-      calcArcWidth()
-
-      drawArc()
-
-      const { calcLableLinePoints, drawLabelLine, drawLabelText } = this
-
-      calcLableLinePoints()
-
-      drawLabelLine()
-
-      drawLabelText()
-    },
-    drawDecorationCircle () {
-      const { ctx, data: { decorationCircleRadius }, defaultDecorationCircleRadius, arcOriginPos } = this
-
-      const radius = this.decorationRadius = Math.min(...arcOriginPos) * (decorationCircleRadius || defaultDecorationCircleRadius)
-
-      ctx.beginPath()
-
-      ctx.strokeStyle = 'rgba(250, 250, 250, 0.2)'
-
-      ctx.lineWidth = 4
-
-      ctx.arc(...arcOriginPos, radius, 0, Math.PI * 2)
-
-      ctx.stroke()
-
-      ctx.beginPath()
-
-      ctx.lineWidth = 1
-
-      ctx.arc(...arcOriginPos, radius - 7, 0, Math.PI * 2)
-
-      ctx.closePath()
-
-      ctx.stroke()
-    },
-    calcArcRadius () {
-      const { data: { data, arcRadiusArea }, defaultArcRadiusArea, arcOriginPos, randomExtend } = this
-
-      const fullRadius = Math.min(...arcOriginPos)
-
-      const currentArcRaidusArea = arcRadiusArea || defaultArcRadiusArea
-
-      const maxRadius = fullRadius * Math.max(...currentArcRaidusArea)
-      const minRadius = fullRadius * Math.min(...currentArcRaidusArea)
-
-      this.arcRadius = data.map(t => randomExtend(minRadius, maxRadius))
-    },
-    calcArcRadian () {
-      const { data: { data }, multipleSum, radianOffset } = this
-
-      const valueSum = this.totalValue = multipleSum(...data.map(({ value }) => value))
-
-      let radian = radianOffset
-
-      const fullRadian = Math.PI * 2
-
-      this.arcRadian = data.map(({ value }) => {
-        const currentRadian = value / valueSum * fullRadian
-
-        return [radian, (radian += currentRadian)]
-      })
-    },
-    calcArcWidth () {
-      const { data: { data, 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))
-    },
-    drawArc () {
-      const { ctx, arcRadius, arcRadian, arcWidth, data: { color }, arcOriginPos } = this
-
-      const colorNum = color.length
-
-      arcRadius.forEach((radius, i) => {
-        ctx.beginPath()
-
-        ctx.arc(...arcOriginPos, radius, ...arcRadian[i])
-
-        ctx.strokeStyle = color[i % colorNum]
-
-        ctx.lineWidth = arcWidth[i]
-
-        ctx.stroke()
-      })
-    },
-    calcLableLinePoints () {
-      const { arcRadian, arcRadius, arcOriginPos: [x, y] } = this
-
-      const { sin, cos } = Math
-
-      let [leftlabelLineNum, rightLabelLineNum] = [0, 0]
-
-      const arcMiddlePoints = arcRadian.map((radian, i) => {
-        const middleRadian = (radian[1] - radian[0]) / 2 + radian[0]
-
-        const point = [x + cos(middleRadian) * arcRadius[i], y + sin(middleRadian) * arcRadius[i]]
-
-        point[0] > x && rightLabelLineNum++
-        point[0] < x && leftlabelLineNum++
-
-        return point
-      })
-
-      const { getYPos, decorationRadius } = this
-
-      const labelLineYArea = [y - decorationRadius + 10, y + decorationRadius - 10]
-
-      const leftYPos = getYPos(labelLineYArea, leftlabelLineNum)
-      const rightYPos = getYPos(labelLineYArea, rightLabelLineNum)
-
-      const offsetX = decorationRadius - 10
-
-      const leftlabelLineEndX = x - offsetX
-      const rightLableLineEndX = x + offsetX
-
-      this.labelLinePoints = arcMiddlePoints.map(([px, py]) => {
-        if (px > x) {
-          const yPos = rightYPos.shift()
-
-          return [
-            [px, py],
-            [px + 5, yPos],
-            [rightLableLineEndX, yPos]
-          ]
-        } else {
-          const ypos = leftYPos.pop()
-
-          return [
-            [px, py],
-            [px - 5, ypos],
-            [leftlabelLineEndX, ypos]
-          ]
-        }
-      })
-    },
-    getYPos (area, num) {
-      let gap = 0
-
-      const minus = area[1] - area[0]
-
-      if (num === 1) {
-        return [area[0] + gap]
-      } else if (num === 2) {
-        const offset = minus * 0.1
-
-        return [area[0] + offset, area[1] - offset]
-      } else {
-        gap = minus / (num - 1)
-
-        return new Array(num).fill(0).map((t, i) => area[0] + i * gap)
-      }
-    },
-    drawLabelLine () {
-      const { ctx, labelLinePoints, canvas: { drawPolyline }, data: { color } } = this
-
-      const colorNum = color.length
-
-      labelLinePoints.forEach((polyline, i) => drawPolyline(ctx, polyline, 2, color[i % colorNum]))
-    },
-    drawLabelText () {
-      const { ctx, labelLinePoints, data: { data, labelFontSize }, totalValue, defaultLabelFontSize, arcOriginPos: [x] } = this
-
-      ctx.font = `${labelFontSize || defaultLabelFontSize}px Arial`
-
-      ctx.fillStyle = '#fff'
-
-      data.forEach(({ value, title }, i) => {
-        const currentPercent = Math.trunc(value / totalValue * 100) + '%'
-
-        const textPos = labelLinePoints[i][2]
-
-        const isLeft = textPos[0] < x
-
-        ctx.textAlign = isLeft ? 'end' : 'start'
-
-        ctx.textBaseline = 'bottom'
-
-        ctx.fillText(currentPercent, ...textPos)
-
-        ctx.textBaseline = 'top'
-
-        ctx.fillText(title, ...textPos)
-      })
-    }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
-  }
-}
-</script>
-
-<style lang="less">
-.arc-ring-chart {
-  position: relative;
-
-  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>

src/components/ringChart/index.vue

@@ -119,6 +119,10 @@ export default {
       this.ringLineWidth = ringRadius * 0.3
     },
     draw () {
+      const { ctx, canvasWH } = this
+
+      ctx.clearRect(0, 0, ...canvasWH)
+
       const { caclArcData, data: { active }, drawActive, drwaStatic } = this
 
       caclArcData()
@@ -134,19 +138,19 @@ export default {
 
       const full = 2 * Math.PI
 
+      const aveAngle = full / data.length
+
       let currentPercent = offsetAngle
 
       this.arcData = []
 
       data.forEach(({ value }) => {
-        const currentAngle = value / totalValue * full + currentPercent
+        const valueAngle = totalValue === 0 ? aveAngle : value / totalValue * full
 
         this.arcData.push([
           currentPercent,
-          currentAngle
+          currentPercent += valueAngle
         ])
-
-        currentPercent = currentAngle
       })
     },
     getTotalValue () {
@@ -232,7 +236,11 @@ export default {
     doPercentAnimation () {
       const { totalValue, percent, activeIndex, data: { data }, doPercentAnimation } = this
 
-      const currentPercent = Math.trunc(data[activeIndex].value / totalValue * 100)
+      if (!totalValue) return
+
+      let currentPercent = Math.trunc(data[activeIndex].value / totalValue * 100)
+
+      currentPercent === 0 && (currentPercent = 1)
 
       if (currentPercent === percent) return
 
@@ -252,10 +260,6 @@ export default {
       }, 2000)
     },
     drwaStatic () {
-      const { ctx, canvasWH } = this
-
-      ctx.clearRect(0, 0, ...canvasWH)
-
       const { drawStaticRing, calcAroundLineData, drawAroundLine, calcAroundTextData, drawAroundText } = this
 
       drawStaticRing()
@@ -276,19 +280,21 @@ export default {
       drawRing()
     },
     calcAroundLineData () {
-      const { arcData, ringRadius, ringLineWidth, ringOriginPos: [x, y] } = this
+      const { arcData, ringRadius, ringLineWidth, ringOriginPos: [x, y], data: { data }, canvas, totalValue } = this
 
-      const { sin, cos } = Math
+      const { getCircleRadianPoint } = canvas
 
       const radian = arcData.map(([a, b]) => (a + (b - a) / 2))
 
       const radius = ringRadius + ringLineWidth / 2
 
-      const aroundLineData = radian.map(r => [x + cos(r) * radius, y + sin(r) * radius])
+      const aroundLineData = radian.map(r => getCircleRadianPoint(x, y, radius, r))
 
       const lineLength = 35
 
-      this.aroundLineData = aroundLineData.map(([bx, by]) => {
+      this.aroundLineData = aroundLineData.map(([bx, by], i) => {
+        if (!data[i].value && totalValue) return [false, false]
+
         const lineEndXPos = (bx > x ? bx + lineLength : bx - lineLength)
 
         return [
@@ -302,42 +308,49 @@ export default {
 
       const colorNum = color.length
 
-      aroundLineData.forEach(([lineBegin, lineEnd], i) => drawLine(ctx, lineBegin, lineEnd, 1, color[i % colorNum]))
+      aroundLineData.forEach(([lineBegin, lineEnd], i) =>
+        lineBegin !== false &&
+        drawLine(ctx, lineBegin, lineEnd, 1, color[i % colorNum]))
     },
     calcAroundTextData () {
-      const { ctx, data: { data }, totalValue, aroundLineData } = this
+      const { data: { data }, totalValue } = this
 
-      const { ringOriginPos: [x], aroundTextFont } = this
+      const aroundTextData = this.aroundTextData = []
-
-      ctx.font = aroundTextFont
-
-      this.aroundTextData = []
 
       data.forEach(({ value, title }, i) => {
-        const percent = Math.trunc(value / totalValue * 100) + '%'
+        if (!value && totalValue) return aroundTextData.push([false, false])
 
-        const percentWidth = ctx.measureText(percent).width
+        let percent = value / totalValue * 100
-        const titleWidth = ctx.measureText(title).width
 
-        const lineEndXPos = aroundLineData[i][1][0]
+        percent < 1 ? (percent = percent.toFixed(2)) : (percent = Math.trunc(percent))
-        const lineEndYPos = aroundLineData[i][1][1]
 
-        const leftTrue = lineEndXPos < x
+        percent += '%'
 
-        this.aroundTextData.push(
+        !totalValue && (percent = '0%')
-          [percent, (leftTrue ? lineEndXPos - percentWidth : lineEndXPos), lineEndYPos],
+
-          [title, (leftTrue ? lineEndXPos - titleWidth : lineEndXPos), lineEndYPos + 15]
+        aroundTextData.push([percent, title])
-        )
       })
     },
     drawAroundText () {
-      const { ctx, aroundTextData, aroundTextFont } = this
+      const { ctx, aroundTextData, aroundTextFont, aroundLineData, ringOriginPos: [x] } = this
 
       ctx.font = aroundTextFont
       ctx.fillStyle = '#fff'
 
-      aroundTextData.forEach(item => {
+      aroundTextData.forEach(([percent, title], i) => {
-        ctx.fillText(...item)
+        if (percent === false) return
+
+        const currentPos = aroundLineData[i][1]
+
+        ctx.textAlign = 'start'
+
+        currentPos[0] < x && (ctx.textAlign = 'end')
+
+        ctx.textBaseline = 'bottom'
+        ctx.fillText(percent, ...currentPos)
+
+        ctx.textBaseline = 'top'
+        ctx.fillText(title, ...currentPos)
       })
     },
     reDraw () {

src/views/demo/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="demo">
+    <div class="menu-bar">
+      <div @click="status = 'borderBox'">Border-Box</div>
+      <div @click="status = 'decoration'">Decoration</div>
+      <div @click="status = 'chart'">Charts</div>
+      <div @click="status = 'other'">Other</div>
+    </div>
+
+    <border-box-demo v-if="status === 'borderBox'" />
+    <decoration-demo v-if="status === 'decoration'" />
+    <chart-demo v-if="status === 'chart'" />
+  </div>
+</template>
+
+<script>
+import borderBoxDemo from './borderBoxDemo'
+import decorationDemo from './decorationDemo'
+import chartDemo from './chartDemo'
+
+export default {
+  name: 'Demo',
+  components: {
+    borderBoxDemo,
+    decorationDemo,
+    chartDemo
+  },
+  data () {
+    return {
+      status: 'borderBox'
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.demo {
+  width: 100%;
+  height: 100%;
+
+  .menu-bar {
+    height: 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: 10px 0px;
+
+    div {
+      width: 150px;
+      height: 100%;
+      text-align: center;
+      margin: 0px 20px;
+      line-height: 50px;
+      font-weight: bold;
+      box-sizing: border-box;
+      border: 2px solid #00baff;
+      cursor: pointer;
+
+      &:active {
+        color: #00baff;
+        border-color: #fff;
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -1,5 +1,15 @@
 module.exports = {
   devServer: {
-    port: 6661
+    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'
+        }
+      }
+    }
   }
 }