You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.3 KiB
96 lines
2.3 KiB
<template>
|
|
<div id="rose-chart">
|
|
<div class="rose-chart-title">累计计量产量分布(吨)</div>
|
|
<dv-charts :option="option" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'RoseChart',
|
|
data () {
|
|
return {
|
|
option: {}
|
|
}
|
|
},
|
|
methods: {
|
|
createData () {
|
|
const { randomExtend } = this
|
|
|
|
this.option = {
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '50%',
|
|
roseSort: false,
|
|
data: [
|
|
{ name: '上料', value: randomExtend(40, 70) },
|
|
{ name: '抛丸', value: randomExtend(20, 30) },
|
|
{ name: '理料', value: randomExtend(10, 50) },
|
|
{ name: '划线', value: randomExtend(5, 20) },
|
|
{ name: '切割', value: randomExtend(40, 50) },
|
|
{ name: '坡口', value: randomExtend(20, 30) },
|
|
{ name: '打磨', value: randomExtend(5, 10) },
|
|
{ name: '曲加工', value: randomExtend(20, 35) },
|
|
{ name: '预配盘', value: randomExtend(5, 10) }
|
|
],
|
|
insideLabel: {
|
|
show: false
|
|
},
|
|
outsideLabel: {
|
|
formatter: '{name} {percent}%',
|
|
labelLineEndLength: 20,
|
|
style: {
|
|
fill: '#fff'
|
|
},
|
|
labelLineStyle: {
|
|
stroke: '#fff'
|
|
}
|
|
},
|
|
roseType: true
|
|
}
|
|
],
|
|
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
|
|
}
|
|
},
|
|
randomExtend (minNum, maxNum) {
|
|
if (arguments.length === 1) {
|
|
return parseInt(Math.random() * minNum + 1, 10)
|
|
} else {
|
|
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
const { createData } = this
|
|
|
|
createData()
|
|
|
|
setInterval(createData, 30000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
#rose-chart {
|
|
width: 30%;
|
|
height: 100%;
|
|
background-color: rgba(6, 30, 93, 0.5);
|
|
border-top: 2px solid rgba(1, 153, 209, .5);
|
|
box-sizing: border-box;
|
|
|
|
.rose-chart-title {
|
|
height: 50px;
|
|
font-weight: bold;
|
|
text-indent: 20px;
|
|
font-size: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.dv-charts-container {
|
|
height: calc(~"100% - 50px");
|
|
}
|
|
}
|
|
</style>
|