日期可切换
This commit is contained in:
helloDy
parent
7d62da003f
commit
6b165840b6
187
src/pages/quality/components/monthBar.vue
Normal file
187
src/pages/quality/components/monthBar.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="card" style="border-bottom-right-radius: 20%">
|
||||
<p class="chartTitle">D产线</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
</div>
|
||||
<div id="monthPie" class="bar"></div>
|
||||
</div>
|
||||
<div class="card" style="border-bottom-left-radius: 20%">
|
||||
<p class="chartTitle">E产线</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
</div>
|
||||
<div id="monthCircle" class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.pieChart()
|
||||
},
|
||||
methods: {
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
initChart () {
|
||||
echarts.init(document.getElementById('monthPie')).setOption(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
top: '15%',
|
||||
right: '10%'
|
||||
},
|
||||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
center: ['35%', '43%'],
|
||||
type: 'pie',
|
||||
radius: '75%',
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 123, name: '擦划伤' },
|
||||
{ value: 122, name: '脏污' },
|
||||
{ value: 67, name: '崩边' },
|
||||
{ value: 42, name: '气泡' },
|
||||
{ value: 12, name: '凹凸物' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
},
|
||||
pieChart () {
|
||||
echarts.init(document.getElementById('monthCircle')).setOption(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
top: '15%',
|
||||
right: '10%'
|
||||
},
|
||||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
center: ['35%', '43%'],
|
||||
type: 'pie',
|
||||
radius: ['50%', '75%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 123, name: '擦划伤' },
|
||||
{ value: 122, name: '脏污' },
|
||||
{ value: 67, name: '崩边' },
|
||||
{ value: 42, name: '气泡' },
|
||||
{ value: 12, name: '凹凸物' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.135rem;
|
||||
|
||||
.card{
|
||||
width: 3.4rem;
|
||||
height: 63vh;
|
||||
background-color: white;
|
||||
border-radius: 5%;
|
||||
text-align: center;
|
||||
color: #276BFF;
|
||||
font-size: 0.16rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.8;
|
||||
|
||||
.chartTitle{
|
||||
margin: 5vh auto 0.5vh 0.25rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.imgcss{
|
||||
display: flex;
|
||||
width: 0.8rem;
|
||||
height: 0.8vh;
|
||||
margin-left: 0.25rem;
|
||||
|
||||
.img-left{
|
||||
width: 0.1rem;
|
||||
background-color: #276BFF;
|
||||
}
|
||||
|
||||
.img-right{
|
||||
width: 0.64rem;
|
||||
margin-left: 0.01rem;
|
||||
// background-color: #276BFF;
|
||||
background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar{
|
||||
width: 3.4rem;
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
src/pages/quality/components/monthPie.vue
Normal file
187
src/pages/quality/components/monthPie.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="card" style="border-bottom-right-radius: 20%">
|
||||
<p class="chartTitle">B产线</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
</div>
|
||||
<div id="monthB" class="bar"></div>
|
||||
</div>
|
||||
<div class="card" style="border-bottom-left-radius: 20%">
|
||||
<p class="chartTitle">C产线</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
</div>
|
||||
<div id="monthC" class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.pieChart1()
|
||||
this.pieChart2()
|
||||
},
|
||||
methods: {
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
pieChart1 () {
|
||||
echarts.init(document.getElementById('monthB')).setOption(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
top: '15%',
|
||||
right: '10%'
|
||||
},
|
||||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
center: ['35%', '43%'],
|
||||
type: 'pie',
|
||||
radius: '75%',
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 123, name: '擦划伤' },
|
||||
{ value: 122, name: '脏污' },
|
||||
{ value: 67, name: '崩边' },
|
||||
{ value: 42, name: '气泡' },
|
||||
{ value: 12, name: '凹凸物' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
},
|
||||
pieChart2 () {
|
||||
echarts.init(document.getElementById('monthC')).setOption(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
top: '15%',
|
||||
right: '10%'
|
||||
},
|
||||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
center: ['35%', '43%'],
|
||||
type: 'pie',
|
||||
radius: '75%',
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 123, name: '擦划伤' },
|
||||
{ value: 122, name: '脏污' },
|
||||
{ value: 67, name: '崩边' },
|
||||
{ value: 42, name: '气泡' },
|
||||
{ value: 12, name: '凹凸物' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.135rem;
|
||||
|
||||
.card{
|
||||
width: 3.4rem;
|
||||
height: 63vh;
|
||||
background-color: white;
|
||||
border-radius: 5%;
|
||||
text-align: center;
|
||||
color: #276BFF;
|
||||
font-size: 0.16rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.8;
|
||||
|
||||
.chartTitle{
|
||||
margin: 5vh auto 0.5vh 0.25rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.imgcss{
|
||||
display: flex;
|
||||
width: 0.8rem;
|
||||
height: 0.8vh;
|
||||
margin-left: 0.25rem;
|
||||
|
||||
.img-left{
|
||||
width: 0.1rem;
|
||||
background-color: #276BFF;
|
||||
}
|
||||
|
||||
.img-right{
|
||||
width: 0.64rem;
|
||||
margin-left: 0.01rem;
|
||||
// background-color: #276BFF;
|
||||
background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar{
|
||||
width: 3.4rem;
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
182
src/pages/quality/components/monthPies.vue
Normal file
182
src/pages/quality/components/monthPies.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="card" style="border-bottom-right-radius: 20%">
|
||||
<p class="chartTitle">A产线</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
</div>
|
||||
<div id="monthA" class="bar"></div>
|
||||
</div>
|
||||
<div class="card" style="border-bottom-left-radius: 20%">
|
||||
<p class="chartTitle">缺陷总量排名</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
</div>
|
||||
<div id="monthAll" class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChart()
|
||||
this.pieChart()
|
||||
},
|
||||
methods: {
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
initChart () {
|
||||
this.chart = echarts.init(document.getElementById('monthAll'))
|
||||
this.chart.setOption(
|
||||
{
|
||||
grid: {
|
||||
left: 50,
|
||||
top: 23
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40
|
||||
},
|
||||
data: ['擦划伤', '脏污', '崩边', '气泡', '凹凸物']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [518, 400, 289, 123, 24],
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
barWidth: '35%',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40']
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: 'rgba(220, 220, 220, 0.4)'
|
||||
}
|
||||
}]
|
||||
}
|
||||
)
|
||||
},
|
||||
pieChart () {
|
||||
echarts.init(document.getElementById('monthA')).setOption(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
top: '15%',
|
||||
right: '10%'
|
||||
},
|
||||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
center: ['35%', '43%'],
|
||||
type: 'pie',
|
||||
radius: '75%',
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 123, name: '擦划伤' },
|
||||
{ value: 122, name: '脏污' },
|
||||
{ value: 67, name: '崩边' },
|
||||
{ value: 42, name: '气泡' },
|
||||
{ value: 12, name: '凹凸物' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.135rem;
|
||||
|
||||
.card{
|
||||
width: 3.4rem;
|
||||
height: 63vh;
|
||||
background-color: white;
|
||||
border-radius: 5%;
|
||||
text-align: center;
|
||||
color: #276BFF;
|
||||
font-size: 0.16rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.8;
|
||||
|
||||
.chartTitle{
|
||||
margin: 5vh auto 0.5vh 0.25rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.imgcss{
|
||||
display: flex;
|
||||
width: 0.8rem;
|
||||
height: 0.8vh;
|
||||
margin-left: 0.25rem;
|
||||
|
||||
.img-left{
|
||||
width: 0.1rem;
|
||||
background-color: #276BFF;
|
||||
}
|
||||
|
||||
.img-right{
|
||||
width: 0.64rem;
|
||||
margin-left: 0.01rem;
|
||||
// background-color: #276BFF;
|
||||
background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar{
|
||||
width: 3.4rem;
|
||||
height: 60vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="card" style="border-bottom-right-radius: 20%">
|
||||
<p class="chartTitle">A产线</p>
|
||||
<p class="chartTitle">D产线</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
@ -9,7 +9,7 @@
|
||||
<div id="bar" class="bar"></div>
|
||||
</div>
|
||||
<div class="card" style="border-bottom-left-radius: 20%">
|
||||
<p class="chartTitle">B产线</p>
|
||||
<p class="chartTitle">E产线</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
@ -102,7 +102,7 @@ export default {
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
center: ['35%', '45%'],
|
||||
center: ['35%', '43%'],
|
||||
type: 'pie',
|
||||
radius: ['50%', '75%'],
|
||||
avoidLabelOverlap: false,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="card" style="border-bottom-right-radius: 20%">
|
||||
<p class="chartTitle">C产线</p>
|
||||
<p class="chartTitle">B产线</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
@ -9,7 +9,7 @@
|
||||
<div id="pie1" class="bar"></div>
|
||||
</div>
|
||||
<div class="card" style="border-bottom-left-radius: 20%">
|
||||
<p class="chartTitle">D产线</p>
|
||||
<p class="chartTitle">C产线</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="card" style="border-bottom-right-radius: 20%">
|
||||
<p class="chartTitle">E产线</p>
|
||||
<p class="chartTitle">A产线</p>
|
||||
<div class="imgcss">
|
||||
<div class="img-left"></div>
|
||||
<div class="img-right"></div>
|
||||
@ -69,11 +69,11 @@ export default {
|
||||
position: 'top'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// normal: {
|
||||
color: function (params) {
|
||||
var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40']
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
// }
|
||||
}
|
||||
},
|
||||
backgroundStyle: {
|
||||
|
||||
@ -21,134 +21,47 @@
|
||||
<p style="font-size: 0.142rem;">23.12</p>
|
||||
</div>
|
||||
<div class="date">
|
||||
<p class="day">日</p>
|
||||
<p class="month">月</p>
|
||||
<p :class="chooseDate ? 'day' : 'month'" @click="changeDate(1)">日</p>
|
||||
<p :class="chooseDate ? 'month' : 'day'" @click="changeDate(0)">月</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swipDiv">
|
||||
<div v-if="chooseDate" class="swipDiv">
|
||||
<van-swipe class="my-swipe" indicator-color="white">
|
||||
<van-swipe-item><swipe-bar></swipe-bar></van-swipe-item>
|
||||
<van-swipe-item><swipe-pie></swipe-pie></van-swipe-item>
|
||||
<van-swipe-item><swipe-pies></swipe-pies></van-swipe-item>
|
||||
<van-swipe-item><swipe-pie></swipe-pie></van-swipe-item>
|
||||
<van-swipe-item><swipe-bar></swipe-bar></van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
<div v-else class="swipDiv">
|
||||
<van-swipe class="my-swipe" indicator-color="white">
|
||||
<van-swipe-item><month-pies></month-pies></van-swipe-item>
|
||||
<van-swipe-item><month-pie></month-pie></van-swipe-item>
|
||||
<van-swipe-item><month-bar></month-bar></van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import SwipeBar from './components/swipeBar.vue'
|
||||
import SwipePie from './components/swipePie.vue'
|
||||
import SwipePies from './components/swipePies.vue'
|
||||
import MonthBar from './components/monthBar.vue'
|
||||
import MonthPie from './components/monthPie.vue'
|
||||
import MonthPies from './components/monthPies.vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
chart: null
|
||||
chart: null,
|
||||
chooseDate: 1
|
||||
}
|
||||
},
|
||||
components: { SwipeBar, SwipePie, SwipePies },
|
||||
mounted () {
|
||||
// this.initChart()
|
||||
// this.pieChart()
|
||||
},
|
||||
components: { SwipeBar, SwipePie, SwipePies, MonthBar, MonthPie, MonthPies },
|
||||
methods: {
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
initChart () {
|
||||
this.chart = echarts.init(document.getElementById('bar'))
|
||||
this.chart.setOption(
|
||||
{
|
||||
grid: {
|
||||
left: 50,
|
||||
top: 23
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40
|
||||
},
|
||||
data: ['擦划伤', '脏污', '崩边', '气泡', '凹凸物']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [518, 400, 289, 123, 24],
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
barWidth: '35%',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40']
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
}
|
||||
},
|
||||
backgroundStyle: {
|
||||
color: 'rgba(220, 220, 220, 0.4)'
|
||||
}
|
||||
}]
|
||||
}
|
||||
)
|
||||
},
|
||||
pieChart () {
|
||||
echarts.init(document.getElementById('pie')).setOption(
|
||||
{
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
icon: 'circle',
|
||||
top: '15%',
|
||||
right: '10%'
|
||||
},
|
||||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
center: ['35%', '45%'],
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 123, name: '擦划伤' },
|
||||
{ value: 122, name: '脏污' },
|
||||
{ value: 67, name: '崩边' },
|
||||
{ value: 42, name: '气泡' },
|
||||
{ value: 12, name: '凹凸物' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
changeDate (date) {
|
||||
this.chooseDate = date
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -199,7 +112,7 @@ export default {
|
||||
height: 8.4vh;
|
||||
width: 0.64rem;
|
||||
background-color: #4E9AFF;
|
||||
border-radius: 3px 0 0 3px;
|
||||
border-radius: 2px;
|
||||
border: #4E9AFF 1px solid;
|
||||
}
|
||||
|
||||
@ -208,7 +121,7 @@ export default {
|
||||
width: 0.64rem;
|
||||
background-color: #276BFF;
|
||||
border: #88ADFF 1px solid;
|
||||
border-radius: 0 3px 3px 0;
|
||||
border-radius: 2px;
|
||||
margin-left: -0.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user