SliverHorn
4 years ago
9 changed files with 27 additions and 808 deletions
-
14server/api/v1/sys_auto_code.go
-
4server/model/sys_auto_code.go
-
2web/src/utils/request.js
-
120web/src/view/dashboard/component/RaddarChart.vue
-
391web/src/view/dashboard/component/Sunburst.vue
-
93web/src/view/dashboard/component/animition.vue
-
167web/src/view/dashboard/component/stackMap.vue
-
27web/src/view/dashboard/index.vue
-
17web/src/view/systemTools/autoCode/index.vue
@ -1,120 +0,0 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
require('echarts/theme/macarons') // echarts theme |
|||
|
|||
const animationDuration = 3000 |
|||
|
|||
export default { |
|||
name:'RaddarChart', |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '300px' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initChart() |
|||
/* this.__resizeHandler = debounce(() => { |
|||
if (this.chart) { |
|||
this.chart.resize() |
|||
} |
|||
}, 100) |
|||
window.addEventListener('resize', this.__resizeHandler)*/ |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
// window.removeEventListener('resize', this.__resizeHandler) |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'light') |
|||
|
|||
this.chart.setOption({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { // 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|||
} |
|||
}, |
|||
radar: { |
|||
radius: '66%', |
|||
center: ['50%', '42%'], |
|||
splitNumber: 8, |
|||
splitArea: { |
|||
areaStyle: { |
|||
color: 'rgba(255,192,203,.3)', |
|||
opacity: 1, |
|||
shadowBlur: 45, |
|||
shadowColor: 'rgba(0,0,0,.5)', |
|||
shadowOffsetX: 0, |
|||
shadowOffsetY: 15 |
|||
} |
|||
}, |
|||
indicator: [ |
|||
{ name: 'Sales', max: 10000 }, |
|||
{ name: 'Administration', max: 20000 }, |
|||
{ name: 'Information Techology', max: 20000 }, |
|||
{ name: 'Customer Support', max: 20000 }, |
|||
{ name: 'Development', max: 20000 }, |
|||
{ name: 'Marketing', max: 20000 } |
|||
] |
|||
}, |
|||
legend: { |
|||
left: 'center', |
|||
bottom: '10', |
|||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending'] |
|||
}, |
|||
series: [{ |
|||
type: 'radar', |
|||
symbolSize: 0, |
|||
areaStyle: { |
|||
normal: { |
|||
shadowBlur: 13, |
|||
shadowColor: 'rgba(0,0,0,.2)', |
|||
shadowOffsetX: 0, |
|||
shadowOffsetY: 10, |
|||
opacity: 1 |
|||
} |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: [5000, 7000, 12000, 11000, 15000, 14000], |
|||
name: 'Allocated Budget' |
|||
}, |
|||
{ |
|||
value: [4000, 9000, 15000, 15000, 13000, 11000], |
|||
name: 'Expected Spending' |
|||
}, |
|||
{ |
|||
value: [5500, 11000, 12000, 15000, 12000, 12000], |
|||
name: 'Actual Spending' |
|||
} |
|||
], |
|||
animationDuration: animationDuration |
|||
}] |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,391 +0,0 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
require('echarts/theme/macarons') // echarts theme |
|||
|
|||
const animationDuration = 3000 |
|||
|
|||
export default { |
|||
name: "Sunburst", |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '300px' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
datas:[ |
|||
{ |
|||
name: 'Flora', |
|||
itemStyle: { |
|||
color: '#da0d68' |
|||
}, |
|||
children: [{ |
|||
name: 'Black Tea', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#975e6d' |
|||
} |
|||
}, { |
|||
name: 'Floral', |
|||
itemStyle: { |
|||
color: '#e0719c' |
|||
}, |
|||
children: [{ |
|||
name: 'Chamomile', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#f99e1c' |
|||
} |
|||
}, { |
|||
name: 'Rose', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#ef5a78' |
|||
} |
|||
}, { |
|||
name: 'Jasmine', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#f7f1bd' |
|||
} |
|||
}] |
|||
}] |
|||
}, |
|||
{ |
|||
name: 'Fruity', |
|||
itemStyle: { |
|||
color: '#da1d23' |
|||
}, |
|||
children: [{ |
|||
name: 'Berry', |
|||
itemStyle: { |
|||
color: '#dd4c51' |
|||
}, |
|||
children: [{ |
|||
name: 'Blackberry', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#3e0317' |
|||
} |
|||
}, { |
|||
name: 'Raspberry', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#e62969' |
|||
} |
|||
}, { |
|||
name: 'Blueberry', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#6569b0' |
|||
} |
|||
}, { |
|||
name: 'Strawberry', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#ef2d36' |
|||
} |
|||
}] |
|||
}, { |
|||
name: 'Dried Fruit', |
|||
itemStyle: { |
|||
color: '#c94a44' |
|||
}, |
|||
children: [{ |
|||
name: 'Raisin', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#b53b54' |
|||
} |
|||
}, { |
|||
name: 'Prune', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#a5446f' |
|||
} |
|||
}] |
|||
}, { |
|||
name: 'Other Fruit', |
|||
itemStyle: { |
|||
color: '#dd4c51' |
|||
}, |
|||
children: [{ |
|||
name: 'Coconut', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#f2684b' |
|||
} |
|||
}, { |
|||
name: 'Cherry', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#e73451' |
|||
} |
|||
}, { |
|||
name: 'Pomegranate', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#e65656' |
|||
} |
|||
}, { |
|||
name: 'Pineapple', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#f89a1c' |
|||
} |
|||
}, { |
|||
name: 'Grape', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#aeb92c' |
|||
} |
|||
}, { |
|||
name: 'Apple', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#4eb849' |
|||
} |
|||
}, { |
|||
name: 'Peach', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#f68a5c' |
|||
} |
|||
}, { |
|||
name: 'Pear', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#baa635' |
|||
} |
|||
}] |
|||
}, { |
|||
name: 'Citrus Fruit', |
|||
itemStyle: { |
|||
color: '#f7a128' |
|||
}, |
|||
children: [{ |
|||
name: 'Grapefruit', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#f26355' |
|||
} |
|||
}, { |
|||
name: 'Orange', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#e2631e' |
|||
} |
|||
}, { |
|||
name: 'Lemon', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#fde404' |
|||
} |
|||
}, { |
|||
name: 'Lime', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#7eb138' |
|||
} |
|||
}] |
|||
}] |
|||
}, |
|||
{ |
|||
name: 'Other', |
|||
itemStyle: { |
|||
color: '#0aa3b5' |
|||
}, |
|||
children: [{ |
|||
name: 'Papery/Musty', |
|||
itemStyle: { |
|||
color: '#9db2b7' |
|||
}, |
|||
children: [{ |
|||
name: 'Stale', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#8b8c90' |
|||
} |
|||
}, { |
|||
name: 'Cardboard', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#beb276' |
|||
} |
|||
}, { |
|||
name: 'Papery', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#fefef4' |
|||
} |
|||
}, { |
|||
name: 'Woody', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#744e03' |
|||
} |
|||
}, { |
|||
name: 'Moldy/Damp', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#a3a36f' |
|||
} |
|||
}, { |
|||
name: 'Musty/Dusty', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#c9b583' |
|||
} |
|||
}, { |
|||
name: 'Musty/Earthy', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#978847' |
|||
} |
|||
}, { |
|||
name: 'Animalic', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#9d977f' |
|||
} |
|||
}, { |
|||
name: 'Meaty Brothy', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#cc7b6a' |
|||
} |
|||
}, { |
|||
name: 'Phenolic', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#db646a' |
|||
} |
|||
}] |
|||
}, { |
|||
name: 'Chemical', |
|||
itemStyle: { |
|||
color: '#76c0cb' |
|||
}, |
|||
children: [{ |
|||
name: 'Bitter', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#80a89d' |
|||
} |
|||
}, { |
|||
name: 'Salty', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#def2fd' |
|||
} |
|||
}, { |
|||
name: 'Medicinal', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#7a9bae' |
|||
} |
|||
}, { |
|||
name: 'Petroleum', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#039fb8' |
|||
} |
|||
}, { |
|||
name: 'Skunky', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#5e777b' |
|||
} |
|||
}, { |
|||
name: 'Rubber', |
|||
value: 1, |
|||
itemStyle: { |
|||
color: '#120c0c' |
|||
} |
|||
}] |
|||
}] |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initChart() |
|||
/* this.__resizeHandler = debounce(() => { |
|||
if (this.chart) { |
|||
this.chart.resize() |
|||
} |
|||
}, 100) |
|||
window.addEventListener('resize', this.__resizeHandler)*/ |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
// window.removeEventListener('resize', this.__resizeHandler) |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'macarons') |
|||
|
|||
this.chart.setOption({ |
|||
|
|||
series: { |
|||
type: 'sunburst', |
|||
highlightPolicy: 'ancestor', |
|||
data: this.datas, |
|||
radius: [0, '95%'], |
|||
sort: null, |
|||
levels: [{}, { |
|||
r0: '15%', |
|||
r: '35%', |
|||
itemStyle: { |
|||
borderWidth: 2 |
|||
}, |
|||
label: { |
|||
rotate: 'tangential' |
|||
} |
|||
}, { |
|||
r0: '35%', |
|||
r: '70%', |
|||
label: { |
|||
align: 'right' |
|||
} |
|||
}, { |
|||
r0: '70%', |
|||
r: '72%', |
|||
label: { |
|||
position: 'outside', |
|||
padding: 3, |
|||
silent: false |
|||
}, |
|||
itemStyle: { |
|||
borderWidth: 3 |
|||
} |
|||
}] |
|||
}, |
|||
animationDuration: animationDuration |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -1,93 +0,0 @@ |
|||
<template> |
|||
<div class="container"> |
|||
<ul class="moon"> |
|||
<li class="crater"></li> |
|||
<li class="crater"></li> |
|||
<li class="crater"></li> |
|||
</ul> |
|||
<ul class="mountain-range"> |
|||
<li class="mountain"></li> |
|||
<li class="mountain"></li> |
|||
<li class="mountain"></li> |
|||
<li class="mountain"></li> |
|||
<li class="mountain"></li> |
|||
<li class="mountain"></li> |
|||
<li class="mountain"></li> |
|||
<li class="mountain"></li> |
|||
<li class="mountain"></li> |
|||
<li class="mountain"></li> |
|||
<li class="mountain"></li> |
|||
</ul> |
|||
<div class="mountain-range-mask"></div> |
|||
<ul class="forest"> |
|||
<li class="hill"></li> |
|||
<li class="hill"></li> |
|||
<li class="hill"></li> |
|||
</ul> |
|||
<ul class="sparkles"> |
|||
<li class="sparkle one"></li> |
|||
<li class="sparkle one"></li> |
|||
<li class="sparkle one"></li> |
|||
<li class="sparkle one"></li> |
|||
<li class="sparkle two"></li> |
|||
<li class="sparkle two"></li> |
|||
<li class="sparkle two"></li> |
|||
<li class="sparkle two"></li> |
|||
<li class="sparkle three"></li> |
|||
<li class="sparkle three"></li> |
|||
<li class="sparkle three"></li> |
|||
<li class="sparkle three"></li> |
|||
<li class="sparkle four"></li> |
|||
<li class="sparkle four"></li> |
|||
<li class="sparkle four"></li> |
|||
<li class="sparkle four"></li> |
|||
<li class="sparkle five"></li> |
|||
<li class="sparkle five"></li> |
|||
<li class="sparkle five"></li> |
|||
<li class="sparkle five"></li> |
|||
<li class="sparkle six"></li> |
|||
<li class="sparkle six"></li> |
|||
<li class="sparkle six"></li> |
|||
<li class="sparkle six"></li> |
|||
<li class="sparkle seven"></li> |
|||
<li class="sparkle seven"></li> |
|||
<li class="sparkle seven"></li> |
|||
<li class="sparkle seven"></li> |
|||
<li class="sparkle eight"></li> |
|||
<li class="sparkle eight"></li> |
|||
<li class="sparkle eight"></li> |
|||
<li class="sparkle eight"></li> |
|||
</ul> |
|||
<div class="grass"> |
|||
<div class="pokemon"> |
|||
<div class="poke" id="bulbasaur"> |
|||
<div class="ear"></div> |
|||
<div class="ear"></div> |
|||
<div class="head"></div> |
|||
<div class="leg"></div> |
|||
<div class="bulba-body"></div> |
|||
<div class="bulbs"> |
|||
<div class="bulb"></div> |
|||
</div> |
|||
</div> |
|||
<div class="poke" id="pikachu"> |
|||
<div class="ear"></div> |
|||
<div class="ear"></div> |
|||
<div class="hand"></div> |
|||
<div class="pika-body"></div> |
|||
<div class="head"></div> |
|||
<div class="pika-tail"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'Animition' |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
@import '@/style/animition.scss'; |
|||
|
|||
</style> |
|||
@ -1,167 +0,0 @@ |
|||
<template> |
|||
<div :class="className" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
require('echarts/theme/macarons') // echarts theme |
|||
|
|||
const animationDuration = 3000 |
|||
|
|||
export default { |
|||
name: "stackMap", |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '300px' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initChart() |
|||
/* this.__resizeHandler = debounce(() => { |
|||
if (this.chart) { |
|||
this.chart.resize() |
|||
} |
|||
}, 100) |
|||
window.addEventListener('resize', this.__resizeHandler)*/ |
|||
}, |
|||
beforeDestroy() { |
|||
if (!this.chart) { |
|||
return |
|||
} |
|||
// window.removeEventListener('resize', this.__resizeHandler) |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
this.chart = echarts.init(this.$el, 'light') |
|||
|
|||
this.chart.setOption({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { // 坐标轴指示器，坐标轴触发有效 |
|||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|||
} |
|||
}, |
|||
legend: { |
|||
data: ['Javascript', 'Java', 'Python', 'Ruby', 'PHP'] |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'value', |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgb(192,192,192)', //更改坐标轴文字颜色 |
|||
fontSize : 12 //更改坐标轴文字大小 |
|||
} |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLine:{ |
|||
lineStyle:{ |
|||
color:'rgb(192,192,192)' //更改坐标轴颜色 |
|||
} |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgb(192,192,192)', //更改坐标轴文字颜色 |
|||
fontSize: 12 //更改坐标轴文字大小 |
|||
} |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: 'rgb(192,192,192)' //更改坐标轴颜色 |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'Javascript', |
|||
type: 'bar', |
|||
stack: '总量', |
|||
label: { |
|||
show: true, |
|||
position: 'insideRight' |
|||
}, |
|||
data: [320, 302, 301, 334, 390, 330, 320] |
|||
}, |
|||
{ |
|||
name: 'Java', |
|||
type: 'bar', |
|||
stack: '总量', |
|||
label: { |
|||
show: true, |
|||
position: 'insideRight' |
|||
}, |
|||
data: [120, 132, 101, 134, 90, 230, 210] |
|||
}, |
|||
{ |
|||
name: 'Python', |
|||
type: 'bar', |
|||
stack: '总量', |
|||
label: { |
|||
show: true, |
|||
position: 'insideRight' |
|||
}, |
|||
data: [220, 182, 191, 234, 290, 330, 310] |
|||
}, |
|||
{ |
|||
name: 'Ruby', |
|||
type: 'bar', |
|||
stack: '总量', |
|||
label: { |
|||
show: true, |
|||
position: 'insideRight' |
|||
}, |
|||
data: [150, 212, 201, 154, 190, 330, 410] |
|||
}, |
|||
{ |
|||
name: 'PHP', |
|||
type: 'bar', |
|||
stack: '总量', |
|||
label: { |
|||
show: true, |
|||
position: 'insideRight' |
|||
}, |
|||
data: [820, 832, 901, 934, 1290, 1330, 1320] |
|||
} |
|||
], |
|||
animationDuration: animationDuration |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue