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.
160 lines
3.5 KiB
160 lines
3.5 KiB
<template>
|
|
<el-card>
|
|
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import resize from '@/components/Charts/mixins/resize'
|
|
import { chart } from "@/api/user/user";
|
|
|
|
export default {
|
|
mixins: [resize],
|
|
props: {
|
|
select: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
className: {
|
|
type: String,
|
|
default: 'chart'
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: 'chart'
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '200px'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '200px'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
data: [],
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
this.getData().then(() => {
|
|
this.initChart()
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
async getData () {
|
|
try {
|
|
const { userAreas } = await chart(this.select)
|
|
this.data = userAreas;
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
},
|
|
initChart() {
|
|
this.chart = echarts.init(document.getElementById(this.id))
|
|
this.setOption()
|
|
},
|
|
setOption () {
|
|
this.chart.setOption({
|
|
title: {
|
|
text: "区域占比统计"
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
right: "right",
|
|
top: "6%",
|
|
icon: "circle",
|
|
formatter: name => {
|
|
let total = this.data.reduce((pre, cur) => pre + (isNaN(Number(cur.total??0)) ? 0 : Number(cur.total??0)), 0)
|
|
let arr = [
|
|
'{a|' + name + '}',
|
|
'{b|' + (Math.round(this.data.find(i => i.area === name)?.total??0 / total) * 100).toFixed(2) + '%}',
|
|
'{c|' + (this.data.find(i => i.area === name)?.total??0) + '}'
|
|
]
|
|
return arr.join(' ')
|
|
},
|
|
textStyle: {
|
|
padding: [0, 0, 0, 0],
|
|
rich: {
|
|
a: {
|
|
fontSize: 15,
|
|
width: 110
|
|
},
|
|
b: {
|
|
fontSize: 15,
|
|
width: 70,
|
|
color: '#c1c1c1'
|
|
},
|
|
c: {
|
|
fontSize: 15
|
|
}
|
|
}
|
|
}
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
mark: { show: true },
|
|
dataView: { show: true, readOnly: false },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true }
|
|
}
|
|
},
|
|
color:['#609ff8','#79c97e','#f5d564','#de5567', '#9062de','#73c9ca'],
|
|
series: [
|
|
{
|
|
name: '区域',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 30,
|
|
borderColor: '#fff',
|
|
borderWidth: 4
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 30,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: this.data.map(i => ({ value: i.total ?? 0, name: i.area ?? '-' })),
|
|
}
|
|
]
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
select: {
|
|
handler: function () {
|
|
this.getData().then(() => {
|
|
this.initChart()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|