ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v 1.1.0

This commit is contained in:
jiaming743 2019-01-16 16:56:11 +08:00
parent e2e51986cb
commit 9de66342ce
99 changed files with 1102 additions and 11649 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.browserslistrc
View File

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

5
.editorconfig
View File

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

17
.eslintrc.js
View File

@ -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'
}
}

32
README.md
View File

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

5
babel.config.js
View File

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

171
src/components/arcRingChart/index.vue → components/arcRingChart/index.vue
View File

@ -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="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 class="canvas-container">
<canvas :ref="ref" />
</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 () {
const { $nextTick, initCanvas, calcArcConfig, data, draw } = this
async init () {
const { initCanvas, initColors, checkData, draw } = this
$nextTick(e => {
initCanvas()
await initCanvas()
calcArcConfig()
initColors()
data && draw()
})
checkData() && draw()
},
initCanvas () {
const { $refs, ref, labelRef, canvasWH } = this
checkData () {
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
canvasWH[1] = canvas.clientHeight
this.status = true
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
return true
},
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 () {
const { ctx, data: { decorationCircleRadius }, defaultDecorationCircleRadius, arcOriginPos } = this
calcLabelLineData () {
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 && (data[i].value || !totalValue) && leftlabelLineNum++
point[0] > x && (series[i].value || !totalValue) && rightLabelLineNum++
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>

0
src/components/borderBox1/img/border.gif → components/borderBox1/img/border.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 93 KiB

22
src/components/borderBox1/index.vue → components/borderBox1/index.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="border-box-1">
<img class="flash-left-top" src="./img/border.gif">
<img class="flash-right-top" src="./img/border.gif">
<img class="flash-left-bottom" src="./img/border.gif">
<img class="flash-right-bottom" src="./img/border.gif">
<div class="dv-border-box-1">
<img class="dv-flash-left-top" src="./img/border.gif">
<img class="dv-flash-right-top" src="./img/border.gif">
<img class="dv-flash-left-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);

63
components/borderBox2/index.vue Normal file
View File

@ -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>

59
components/borderBox3/index.vue Normal file
View File

@ -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>

128
components/borderBox4/index.vue Normal file
View File

@ -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>

75
components/borderBox5/index.vue Normal file
View File

@ -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>

30
src/components/borderBox6/index.vue → components/borderBox6/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="border-box-6" :ref="ref">
<svg class="svg-container">
<div class="dv-border-box-6" :ref="ref">
<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()}`,
width: 0,
height: 0
ref: `border-box-6-${(new Date()).getTime()}`
}
},
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;

66
components/borderBox7/index.vue Normal file
View File

@ -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>

35
src/components/capsuleChart/index.vue → components/capsuleChart/index.vue
View File

@ -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;

79
src/components/columnChart/index.vue → components/columnChart/index.vue
View File

@ -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) {
const { draw } = this
data () {
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 }) => {
if (!(data[0] instanceof Array)) return { data, againstAxis }
const dealAfterData = deepClone(series).map(({ value, 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) => {
switch (series.type) {
series.forEach((valueSeries, i) => {
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]) {

91
src/components/concentricArcChart/index.vue → components/concentricArcChart/index.vue
View File

@ -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],
ctx: '',
status: false,
arcOriginPos: [],
@ -30,49 +35,37 @@ export default {
}
},
watch: {
data (d) {
const { draw } = this
data () {
const { checkData, draw } = this
d && draw()
checkData() && draw()
}
},
methods: {
init () {
const { $nextTick, initCanvas, calcArcConfig, data, draw } = this
async init () {
const { initCanvas, initColors, checkData, draw } = this
$nextTick(e => {
initCanvas()
await initCanvas()
calcArcConfig()
initColors()
data && draw()
})
checkData() && draw()
},
initCanvas () {
const { $refs, ref, labelRef, canvasWH } = this
checkData () {
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
canvasWH[1] = canvas.clientHeight
this.status = true
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
return true
},
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%;

0
src/components/decoration1/img/decoration.gif → components/decoration1/img/decoration.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

0
src/components/decoration1/index.vue → components/decoration1/index.vue
View File

0
src/components/decoration2/index.vue → components/decoration2/index.vue
View File

0
src/components/decoration3/img/decoration.gif → components/decoration3/img/decoration.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 86 KiB

0
src/components/decoration3/index.vue → components/decoration3/index.vue
View File

7
src/components/decoration4/index.vue → components/decoration4/index.vue
View File

@ -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%;

0
src/components/decoration5/img/decoration.gif → components/decoration5/img/decoration.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

4
src/components/decoration5/index.vue → components/decoration5/index.vue
View File

@ -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%;

0
src/components/decoration6/img/decoration.gif → components/decoration6/img/decoration.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 242 KiB

After

Width:  |  Height:  |  Size: 242 KiB

0
src/components/decoration6/index.vue → components/decoration6/index.vue
View File

0
src/components/decoration7/img/decoration.png → components/decoration7/img/decoration.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 496 B

After

Width:  |  Height:  |  Size: 496 B

0
src/components/decoration7/index.vue → components/decoration7/index.vue
View File

0
src/components/forSlot/index.vue → components/forSlot/index.vue
View File

26
src/views/datavEntrance/index.vue → components/fullScreenContainer/index.vue
View File

@ -1,14 +1,12 @@
<template>
<div id="datav-entrance">
<div class="datav-container" ref="data-root">
<router-view />
</div>
<div id="dv-full-screen-container" ref="full-screen-container">
<slot></slot>
</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 {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
#dv-full-screen-container {
position: fixed;
top: 0px;
left: 0px;
overflow: hidden;
background-size: 100%;
background-image: url('../../assets/img/bg.png');
.datav-container {
transform-origin: left top;
}
transform-origin: left top;
z-index: 999;
}
</style>

2
src/components/index.js → components/index.js
View File

@ -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)
}

6
src/components/labelLine/index.vue → components/labelLine/index.vue
View File

@ -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

0
src/components/loading/img/loading.png → components/loading/img/loading.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

0
src/components/loading/index.vue → components/loading/index.vue
View File

0
src/components/numberShow/index.vue → components/numberShow/index.vue
View File

0
src/components/percentArc/index.vue → components/percentArc/index.vue
View File

0
src/components/percentPond/index.vue → components/percentPond/index.vue
View File

38
src/components/pointChart/index.vue → components/pointChart/index.vue
View File

@ -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

63
src/components/polylineChart/index.vue → components/polylineChart/index.vue
View File

@ -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 maxValueIndex = data.findIndex(v => v === maxValue)
const maxValue = Math.max(...filterNull(value))
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]) {

67
src/components/radarChart/index.vue → components/radarChart/index.vue
View File

@ -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 }) =>
td.map(value =>
Number.isFinite(value)
? value / maxValue * radius : false))
const valueRadius = series.map(({ value }) =>
value.map(v =>
Number.isFinite(v)
? 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 fillColor = data[i].fillColor
const lineColor = series[i].lineColor
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) => {

183
src/components/ringChart/index.vue → components/ringChart/index.vue
View File

@ -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">
<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>
<label-line :label="dealAfterLabelLine" :colors="drawColors" />
</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],
ctx: '',
status: false,
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
reDraw()
checkData() && reDraw()
},
activeIndex () {
const { doPercentAnimation, doLabelTextAnimation } = this
@ -82,46 +75,41 @@ export default {
}
},
methods: {
init () {
const { $nextTick, initCanvas, calcRingConfig, data, draw } = this
async init () {
const { initCanvas, initColors, calcRingConfig, checkData, draw } = this
$nextTick(e => {
initCanvas()
await initCanvas()
calcRingConfig()
initColors()
data && draw()
})
},
initCanvas () {
const { $refs, ref, labelRef, canvasWH } = this
calcRingConfig()
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')
checkData() && draw()
},
calcRingConfig () {
const { canvasWH, ringOriginPos } = this
ringOriginPos[0] = canvasWH[0] / 2
ringOriginPos[1] = (canvasWH[1] - 30) / 2
const { canvasWH } = this
const ringRadius = this.ringRadius = Math.min(...canvasWH) * 0.6 / 2
this.ringLineWidth = ringRadius * 0.3
},
draw () {
const { ctx, canvasWH } = this
checkData () {
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>

38
src/components/scrollBoard/index.vue → components/scrollBoard/index.vue
View File

@ -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) {
const { init } = this
data () {
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;

72
src/components/waterLevelPond/index.vue → components/waterLevelPond/index.vue
View File

@ -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"
:y="arcOriginPos[1] + 8">
:x="centerPos[0] + 8"
:y="centerPos[1] + 8">
{{ (level && Math.max(...level)) || 0 }}%
</text>
<ellipse v-if="!type || type === 'circle'"
:cx="arcOriginPos[0] + 8"
:cy="arcOriginPos[1] + 8"
:cx="centerPos[0] + 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],
ctx: '',
status: false,
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 () {
const { $nextTick, initCanvas, calcOriginPos, level, draw } = this
async init () {
const { initCanvas, checkData, draw } = this
$nextTick(e => {
initCanvas()
await initCanvas()
calcOriginPos()
level && draw()
})
checkData() && draw()
},
initCanvas () {
const { $refs, ref, labelRef, canvasWH } = this
checkData () {
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
canvasWH[1] = canvas.clientHeight
this.status = true
canvas.setAttribute('width', canvasWH[0])
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
return true
},
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 () {

1
config/index.js Normal file
View File

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

8
index.js Normal file
View File

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

169
src/mixins/axisMixin.js → mixins/axisMixin.js
View File

@ -1,18 +1,38 @@
export default {
data () {
return {
defaultAxisLineColor: '#666',
defaultGridLineColor: '#666',
defaultTagColor: '#666',
defaultGridLineType: 'line',
defaultGridLineDash: [5, 5],
defaultXAxisOffset: 30,
defaultAxisLineTagGap: 5,
// config able
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 } = {}) {
if (data) return data
calcValueAxisTag ([vmax, vmin], { max, min, num, fixed, tags } = {}) {
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
const trueGridLineDash = trueGridLineType === 'dashed' ? (gridLineDash || defaultGridLineDash) : [10, 0]
let trueGridLineDash = gridLineDash
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)

70
mixins/borderBoxMixin.js Normal file
View File

@ -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()
}
}

2
src/mixins/canvasMixin.js → mixins/canvasMixin.js
View File

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

7
src/mixins/colorsMixin.js → mixins/colorsMixin.js
View File

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

28
package.json
View File

@ -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"
}
}

0
src/plugins/canvasExtend.js → plugins/canvasExtend.js
View File

2
src/plugins/colorExtend.js → plugins/colorExtend.js
View File

@ -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 = []

3
src/plugins/index.js → plugins/index.js
View File

@ -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)
}

15
src/plugins/methodsExtend.js → plugins/methodsExtend.js
View File

@ -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
}

5
postcss.config.js
View File

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

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 66 KiB

17
public/index.html
View File

@ -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>

30
src/App.vue
View File

@ -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>

BIN
src/assets/font/code.ttf
View File

Binary file not shown.

BIN
src/assets/img/bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 855 KiB

12
src/assets/style/class.less
View File

@ -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;
}

4
src/assets/style/font.less
View File

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

18
src/assets/style/index.less
View File

@ -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;
}

52
src/auxiliary/highlightCode/index.vue
View File

@ -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>

8
src/auxiliary/index.js
View File

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

42
src/auxiliary/sideNav/index.vue
View File

@ -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>

BIN
src/components/borderBox2/img/border.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 549 B

20
src/components/borderBox2/index.vue
View File

@ -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>

BIN
src/components/borderBox3/img/border.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

20
src/components/borderBox3/index.vue
View File

@ -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>

142
src/components/borderBox4/index.vue
View File

@ -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>

89
src/components/borderBox5/index.vue
View File

@ -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>

80
src/components/borderBox7/index.vue
View File

@ -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>

8
src/config/color.js
View File

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

24
src/main.js
View File

@ -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')

73
src/plugins/axiosExtend.js
View File

@ -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')
}

44
src/router/demo.js
View File

@ -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
}
]

55
src/router/index.js
View File

@ -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' }
}
]
})

36
src/views/dataView/index.vue
View File

@ -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>

96
src/views/demo/borderBox.vue
View File

@ -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>

415
src/views/demo/chart.vue
View File

@ -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>

149
src/views/demo/chart/attention.vue
View File

@ -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>

614
src/views/demo/chart/columnChartDemo.vue
View File

@ -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>

219
src/views/demo/chart/pointChartDemo.vue
View File

@ -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>

228
src/views/demo/chart/polylineChartDemo.vue
View File

@ -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>

251
src/views/demo/chart/radarChartDemo.vue
View File

@ -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>

152
src/views/demo/decoration.vue
View File

@ -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>

53
src/views/demo/document.vue
View File

@ -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>

149
src/views/demo/index.vue
View File

@ -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>

295
src/views/demo/other.vue
View File

@ -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>

56
src/views/demo/show.vue
View File

@ -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>

BIN
src/views/manageDesk/img/1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/views/manageDesk/img/2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/views/manageDesk/img/3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/views/manageDesk/img/4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.7 KiB

688
src/views/manageDesk/index.vue
View File

@ -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>

16
vue.config.js
View File

@ -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: './'
}

6899
yarn.lock
View File

File diff suppressed because it is too large Load Diff