vben
authored
|
1
|
<template>
|
vben
authored
|
2
|
<div ref="chartRef" :style="{ height, width }"></div>
|
vben
authored
|
3
4
5
6
|
</template>
<script lang="ts">
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
|
Vben
authored
|
7
|
import { useECharts } from '/@/hooks/web/useECharts';
|
vben
authored
|
8
9
10
11
12
13
14
15
16
|
export default defineComponent({
props: {
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
|
nebv
authored
|
17
|
default: 'calc(100vh - 78px)',
|
vben
authored
|
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
},
},
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
const yAxisData = [
'原因1',
'原因2',
'原因3',
'原因4',
'原因5',
'原因6',
'原因7',
'原因8',
'原因9',
'原因10',
];
onMounted(() => {
setOptions({
backgroundColor: '#0f375f',
title: [
{
text: '各渠道投诉占比',
|
vben
authored
|
42
43
44
45
46
47
|
left: '2%',
top: '1%',
textStyle: {
color: '#fff',
fontSize: 14,
},
|
vben
authored
|
48
49
50
|
},
{
text: '投诉原因TOP10',
|
vben
authored
|
51
52
53
54
55
56
|
left: '40%',
top: '1%',
textStyle: {
color: '#fff',
fontSize: 14,
},
|
vben
authored
|
57
58
59
|
},
{
text: '各级别投诉占比',
|
vben
authored
|
60
61
62
63
64
65
|
left: '2%',
top: '50%',
textStyle: {
color: '#fff',
fontSize: 14,
},
|
vben
authored
|
66
67
|
},
],
|
vben
authored
|
68
|
grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
|
vben
authored
|
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
tooltip: {
formatter: '{b} ({c})',
},
xAxis: [
{
gridIndex: 0,
axisTick: { show: false },
axisLabel: { show: false },
splitLine: { show: false },
axisLine: { show: false },
},
],
yAxis: [
{
gridIndex: 0,
interval: 0,
data: yAxisData.reverse(),
axisTick: { show: false },
axisLabel: { show: true },
splitLine: { show: false },
axisLine: { show: true, lineStyle: { color: '#6173a3' } },
},
],
series: [
{
name: '各渠道投诉占比',
type: 'pie',
radius: '30%',
center: ['22%', '25%'],
data: [
{ value: 335, name: '客服电话' },
{ value: 310, name: '奥迪官网' },
{ value: 234, name: '媒体曝光' },
{ value: 135, name: '质检总局' },
{ value: 105, name: '其他' },
],
|
vben
authored
|
105
106
107
108
109
|
labelLine: { show: false },
label: {
show: true,
formatter: '{b} \n ({d}%)',
color: '#B1B9D3',
|
vben
authored
|
110
111
112
113
114
115
116
|
},
},
{
name: '各级别投诉占比',
type: 'pie',
radius: '30%',
center: ['22%', '75%'],
|
vben
authored
|
117
|
labelLine: { show: false },
|
vben
authored
|
118
119
120
121
122
123
|
data: [
{ value: 335, name: 'A级' },
{ value: 310, name: 'B级' },
{ value: 234, name: 'C级' },
{ value: 135, name: 'D级' },
],
|
vben
authored
|
124
125
126
127
|
label: {
show: true,
formatter: '{b} \n ({d}%)',
color: '#B1B9D3',
|
vben
authored
|
128
129
130
131
132
133
134
135
|
},
},
{
name: '投诉原因TOP10',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: '45%',
|
vben
authored
|
136
137
|
itemStyle: { color: '#86c9f4' },
label: { show: true, position: 'right', color: '#9EA7C4' },
|
vben
authored
|
138
139
140
141
142
143
144
145
146
|
data: dataAll.sort(),
},
],
});
});
return { chartRef };
},
});
</script>
|