103 lines
2.0 KiB
Vue
103 lines
2.0 KiB
Vue
<template>
|
|
<div class="chart-container">
|
|
<div ref="chart" style="width: 100%; height: 400px;"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
|
|
export default {
|
|
name: 'CustomerRegion',
|
|
props: {
|
|
customerData: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null
|
|
}
|
|
},
|
|
watch: {
|
|
customerData: {
|
|
deep: true,
|
|
handler(val) {
|
|
if (val) {
|
|
this.initChart()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initChart()
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
if (!this.$refs.chart) return
|
|
this.chart = echarts.init(this.$refs.chart)
|
|
const option = {
|
|
title: {
|
|
text: '客户区域分布',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 10,
|
|
data: this.customerData.map(item => item.region)
|
|
},
|
|
series: [
|
|
{
|
|
name: '客户数量',
|
|
type: 'pie',
|
|
radius: ['50%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '30',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: this.customerData.map(item => ({
|
|
name: item.region,
|
|
value: item.customerCount
|
|
}))
|
|
}
|
|
]
|
|
}
|
|
this.chart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-container {
|
|
background-color: #ffffff;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |