wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

格式化代码

Browse Source
This commit is contained in:
不做码农
2022-04-21 21:58:50 +08:00
parent ebbb109c75
commit fd33cd5f85
8 changed files with 395 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboard/LineChart.vue
+47 -48
View File
@@ -1,9 +1,9 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts';
import * as echarts from 'echarts'
// import resize from './mixins/resize'
export default {
@@ -11,28 +11,28 @@ export default {
props: {
className: {
type: String,
default: 'chart'
default: 'chart',
},
width: {
type: String,
default: '100%'
default: '100%',
},
height: {
type: String,
default: '350px'
default: '350px',
},
autoResize: {
type: Boolean,
default: true
default: true,
},
chartData: {
type: Object,
required: true
}
required: true,
},
},
data() {
return {
chart: null
chart: null,
}
},
watch: {
@@ -40,8 +40,8 @@ export default {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
},
},
mounted() {
this.$nextTick(() => {
@@ -66,69 +66,68 @@ export default {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false,
axisTick: {
show: false
}
show: false,
},
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 30,
containLabel: true
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
type: 'cross',
},
padding: [5, 10]
padding: [5, 10],
},
yAxis: {
axisTick: {
show: false
}
show: false,
},
},
legend: {
data: ['expected', 'actual']
data: ['expected', 'actual'],
},
series: [{
name: 'expected', itemStyle: {
normal: {
series: [
{
name: 'expected',
itemStyle: {
color: '#FF005A',
lineStyle: {
color: '#FF005A',
width: 2
}
}
width: 2,
},
},
smooth: true,
type: 'line',
data: expectedData,
animationDuration: 2800,
animationEasing: 'cubicInOut',
},
smooth: true,
type: 'line',
data: expectedData,
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: 'actual',
smooth: true,
type: 'line',
itemStyle: {
normal: {
{
name: 'actual',
smooth: true,
type: 'line',
itemStyle: {
color: '#3888fa',
areaStyle: {
color: '#f3f8ff',
},
lineStyle: {
color: '#3888fa',
width: 2
width: 2,
},
areaStyle: {
color: '#f3f8ff'
}
}
},
data: actualData,
animationDuration: 2800,
animationEasing: 'quadraticOut',
},
data: actualData,
animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
],
})
}
}
},
},
}
</script>
src/views/dashboard/RaddarChart.vue
+41 -40
View File
@@ -1,9 +1,9 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts';
import * as echarts from 'echarts'
// import resize from './mixins/resize'
const animationDuration = 3000
@@ -13,20 +13,20 @@ export default {
props: {
className: {
type: String,
default: 'chart'
default: 'chart',
},
width: {
type: String,
default: '100%'
default: '100%',
},
height: {
type: String,
default: '300px'
}
default: '300px',
},
},
data() {
return {
chart: null
chart: null,
}
},
mounted() {
@@ -48,9 +48,10 @@ export default {
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
},
radar: {
radius: '66%',
@@ -63,8 +64,8 @@ export default {
shadowBlur: 45,
shadowColor: 'rgba(0,0,0,.5)',
shadowOffsetX: 0,
shadowOffsetY: 15
}
shadowOffsetY: 15,
},
},
indicator: [
{ name: 'Sales', max: 10000 },
@@ -72,44 +73,44 @@ export default {
{ name: 'Information Techology', max: 20000 },
{ name: 'Customer Support', max: 20000 },
{ name: 'Development', max: 20000 },
{ name: 'Marketing', max: 20000 }
]
{ name: 'Marketing', max: 20000 },
],
},
legend: {
left: 'center',
bottom: '10',
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending'],
},
series: [{
type: 'radar',
symbolSize: 0,
areaStyle: {
normal: {
series: [
{
type: 'radar',
symbolSize: 0,
areaStyle: {
shadowBlur: 13,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1
}
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,
},
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>