1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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
| <script lang="ts" setup>
| import type { EchartsUIType } from '@vben/plugins/echarts';
|
| import { onMounted, ref } from 'vue';
|
| import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
| defineOptions({ name: 'ExtendGraphDemoEchartsFunnel' });
|
| const chartRef = ref<EchartsUIType>();
| const { renderEcharts } = useEcharts(chartRef);
|
| const options: any = {
| title: {
| text: '漏斗图',
| subtext: '签约演示图',
| },
| tooltip: {
| trigger: 'item',
| formatter: '{a} <br/>{b} : {c}%',
| },
| legend: {
| data: ['初次接触', '兴趣激发', '会见决策者', '确定需求', '产品演示', '提交建议书', '口头同意', '商定合同', '签约'],
| },
| series: [
| {
| name: '预期',
| type: 'funnel',
| left: '10%',
| width: '80%',
| label: {
| formatter: '{b}-预期',
| },
| emphasis: {
| position: 'inside',
| formatter: '{b}预期: {c}%',
| },
| labelLine: {
| show: false,
| },
| itemStyle: {
| opacity: 0.7,
| },
| data: [
| { value: 100, name: '初次接触' },
| { value: 85, name: '兴趣激发' },
| { value: 76, name: '会见决策者' },
| { value: 65, name: '确定需求' },
| { value: 54, name: '产品演示' },
| { value: 48, name: '提交建议书' },
| { value: 38, name: '口头同意' },
| { value: 27, name: '商定合同' },
| { value: 10, name: '签约' },
| ],
| },
| {
| name: '实际',
| type: 'funnel',
| left: '10%',
| width: '80%',
| maxSize: '80%',
| label: {
| position: 'inside',
| formatter: '{c}%',
| color: '#fff',
| },
| emphasis: {
| position: 'inside',
| formatter: '{b}-实际: {c}%',
| },
| itemStyle: {
| opacity: 0.5,
| borderColor: '#fff',
| borderWidth: 2,
| },
| data: [
| { value: 90, name: '初次接触' },
| { value: 79, name: '兴趣激发' },
| { value: 69, name: '会见决策者' },
| { value: 57, name: '确定需求' },
| { value: 48, name: '产品演示' },
| { value: 39, name: '提交建议书' },
| { value: 30, name: '口头同意' },
| { value: 21, name: '商定合同' },
| { value: 10, name: '签约' },
| ],
| },
| ],
| };
|
| onMounted(() => {
| renderEcharts(options);
| });
| </script>
| <template>
| <div class="jnpf-content-wrapper">
| <div class="jnpf-content-wrapper-center bg-white px-[10px] pt-[40px]">
| <EchartsUI ref="chartRef" height="500px" />
| </div>
| </div>
| </template>
|
|
