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
| <!DOCTYPE html>
| <html lang="en">
|
| <head>
| <meta charset="UTF-8" />
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
| <title>类型分布</title>
| <script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
| <script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
| <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
| <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
| </link>
| <script src="/customer_list/ch/static/js/echarts.min.js"></script>
| </head>
|
| <body>
| <div class="w-full h-full bg-[#fff] px-10 py-0" id="unionPay">
| <div class="w-full h-[40px] flex items-center">银联缴费类型占比</div>
| <div class="w-full h-[370px]" id="UnionPayChart">
| </div>
| </div>
| </body>
| <script>
| const { createApp, onMounted, ref, reactive } = Vue;
| createApp({
| setup() {
| const initUnionPayEChart = () => {
| const chartDom = document.getElementById('UnionPayChart');
| const myChart = echarts.init(chartDom);
| var option = {
| dataset: {
| source: [
| ['score', 'amount', 'product'],
| [89.3, 58212, '票据打印冲正'],
| [57.1, 78254, '票据打印'],
| [74.4, 41032, '变更委托冲正'],
| [50.1, 12755, '变更委托'],
| [89.7, 20145, '取消委托'],
| [68.1, 79146, '委托'],
| [19.6, 91852, '缴费冲正'],
| [10.6, 101852, '缴费'],
| [32.7, 20112, '查询']
| ]
| },
| grid: { containLabel: true },
| xAxis: {
| // name: 'amount'
| },
| yAxis: { type: 'category' },
| // visualMap: {
| // orient: 'horizontal',
| // left: 'center',
| // min: 10,
| // max: 100,
| // text: ['High Score', 'Low Score'],
| // // Map the score column to color
| // dimension: 0,
| // inRange: {
| // color: ['#65B581', '#FFCE34', '#FD665F']
| // }
| // },
| series: [
| {
| type: 'bar',
| encode: {
| // Map the "amount" column to X axis.
| x: 'amount',
| // Map the "product" column to Y axis
| y: 'product'
| }
| }
| ]
| };
| option && myChart.setOption(option);
| }
| onMounted(() => {
| initUnionPayEChart();
| });
|
|
| },
| }).mount('#unionPay');
| </script>
|
| </html>
|
|
