Pie.vue 4.1 KB

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