123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- <template>
- <div ref="chartRef" :style="{ height, width }"></div>
- </template>
- <script lang="ts">
- import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
- import { useECharts } from '/@/hooks/web/useECharts';
- export default defineComponent({
- props: {
- width: {
- type: String as PropType<string>,
- default: '100%',
- },
- height: {
- type: String as PropType<string>,
- default: 'calc(100vh - 78px)',
- },
- },
- 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: '各渠道投诉占比',
- left: '2%',
- top: '1%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- },
- },
- {
- text: '投诉原因TOP10',
- left: '40%',
- top: '1%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- },
- },
- {
- text: '各级别投诉占比',
- left: '2%',
- top: '50%',
- textStyle: {
- color: '#fff',
- fontSize: 14,
- },
- },
- ],
- grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
- 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: '其他' },
- ],
- labelLine: { show: false },
- label: {
- show: true,
- formatter: '{b} \n ({d}%)',
- color: '#B1B9D3',
- },
- },
- {
- name: '各级别投诉占比',
- type: 'pie',
- radius: '30%',
- center: ['22%', '75%'],
- labelLine: { show: false },
- data: [
- { value: 335, name: 'A级' },
- { value: 310, name: 'B级' },
- { value: 234, name: 'C级' },
- { value: 135, name: 'D级' },
- ],
- label: {
- show: true,
- formatter: '{b} \n ({d}%)',
- color: '#B1B9D3',
- },
- },
- {
- name: '投诉原因TOP10',
- type: 'bar',
- xAxisIndex: 0,
- yAxisIndex: 0,
- barWidth: '45%',
- itemStyle: { color: '#86c9f4' },
- label: { show: true, position: 'right', color: '#9EA7C4' },
- data: dataAll.sort(),
- },
- ],
- });
- });
- return { chartRef };
- },
- });
- </script>
|