183 lines
4.2 KiB
Vue
183 lines
4.2 KiB
Vue
<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>
|