<template>
<div class="echarts1">
<div class="echarts2" ref="echarts">
</div>
<div class="echarts3">
<div class="echarts3item">
<span class="l">省外</span>
<span class="r">20.9%</span>
</div>
<div class="echarts3item">
<span class="l">省内</span>
<span class="r">8.4%</span>
</div>
<div class="echarts3item">
<span class="l">入境</span>
<span class="r">9.1%</span>
</div>
</div>
</div>
</template>
<script>
import { FontChart } from '../../utils/utils'
import { getDeclareNum } from '@/api/api/zixun'
export default {
name: 'echarts1',
components: {},
props: {
id: {
type: String,
default () {
return ''
}
}
},
data () {
return {
status: '',
xdata1: [],
xdata2: [],
ydata: []
}
},
watch: {},
mounted () {
this.drawLine()
},
methods: {
getData () {
var that = this
getDeclareNum().then(
(response) => {
console.log(response)
that.xdata1 = []
that.xdata2 = []
that.xdata1.push(response.result.a.sessionNum)
that.xdata1.push(response.result.b.sessionNum)
that.xdata1.push(response.result.c.sessionNum)
that.xdata1.push(response.result.d.sessionNum)
that.xdata2.push(response.result.a.priceSum)
that.xdata2.push(response.result.b.priceSum)
that.xdata2.push(response.result.c.priceSum)
that.xdata2.push(response.result.d.priceSum)
this.drawLine()
}
)
},
drawLine () {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
function Pie () {
let dataArr = []
for (var i = 0; i < 150; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.2)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 10,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
})
}
}
return dataArr
}
const dataList = [
{
value: 75,
show: true,
name: '省外',
itemStyle: {
normal: {
color: 'rgba(7, 225, 131, 1)',
borderWidth: 2,
borderColor: '#0633CA'
}
}
},
{
value: 63,
show: true,
name: '省内',
itemStyle: {
normal: {
color: 'rgba(103, 223, 255, 1)',
borderWidth: 2,
borderColor: '#0633CA'
}
},
},
{
value: 43,
show: true,
name: '入境',
itemStyle: {
normal: {
color: 'rgba(0, 192, 255, 1)',
borderWidth: 2,
borderColor: '#0633CA'
}
}
},
]
var option = {
series: [
{
name: '入住',
type: 'pie',
radius: ['85%', '95%'],
center: ['50%', '50%'],
hoverAnimation: false,
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false
}
},
labelLine: {
show: false
},
data: dataList
},
{
type: 'pie',
zlevel: 0,
silent: true,
center: ['50%', '50%'],
radius: ['99%', '100%'],
z: 10,
itemStyle: {
normal: {
areaColor: 'rgba(137, 137, 137, .3)',
borderColor: '#4053CC',
},
emphasis: {
label: {
show: false
},
areaColor: 'rgba(255, 255, 255, .1)',
}
},
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie()
},
{
type: 'pie',
zlevel: 0,
silent: true,
center: ['50%', '50%'],
radius: ['69%', '70%'],
z: 10,
itemStyle: {
normal: {
areaColor: 'rgba(137, 137, 137, .3)',
borderColor: '#4053CC',
},
emphasis: {
label: {
show: false
},
areaColor: 'rgba(255, 255, 255, .1)',
}
},
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: Pie()
},
{
type: 'pie',
name: '饼状背景',
radius: ['0%', '50%'],
center: ['50%', '50%'],
startAngle: 110,
hoverAnimation: false,
itemStyle: {
normal: {
color: new that.$echarts.graphic.RadialGradient(.5, .5, .8, [{
offset: 0,
color: 'rgba(255,255,255,0.05)'
},
{
offset: 0.5,
color: 'rgba(255,255,255,0.2)'
},
{
offset: 1,
color: 'rgba(255,255,255,0.1)'
}
], false),
}
},
tooltip: {
show: false,
},
label: {
show: false
},
data: [50]
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
}
}
</script>
<style lang="scss" scoped>
.echarts1 {
position: relative;
width: 60%;
height: calc(100% - 50px);
margin-top: 0px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
.echarts2 {
position: relative;
width: 50%;
height: calc(100% - 20px);
margin-top: -20px;
}
.wcl {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 14px;
font-family: PingFang;
font-weight: 500;
color: #FFFFFF;
margin-bottom: -10px;
}
.echarts3 {
width: 50%;
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
.echarts3item {
width: 80%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
margin-bottom: 5px;
margin-top: 5px;
span.l {
width: 86px;
height: 20px;
border: 1px solid #5B6BD2;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 13px;
text-indent: 10px;
font-family: PingFang;
font-weight: 500;
color: #FFFFFF;
}
span.r {
width: 75px;
height: 20px;
background: #07E183;
padding-right: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #FFFFFF;
}
}
.echarts3item:nth-child(2) {
span.r {
background: rgba(103, 223, 255, 1);
}
}
.echarts3item:nth-child(3) {
span.r {
background: rgba(0, 192, 255, 1);
}
}
}
</style>
