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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| <!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="/ai_html/views/demo/js/tailwind.js"></script>
| <script src="/ai_html/views/demo/js/vue.global.js"></script>
| <script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
| <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
| <script src="/ai_html/views/demo/js/echarts.min.js"></script>
| </head>
|
| <body>
| <div class="w-full h-full bg-[#f2f4f8]" id="unionPay">
| <div class="w-full h-[40px] space-x-2 bg-[rgb(242,244,248)] flex justify-between items-center px-[10px]">
| <div class="data-item" v-for="(item, index) in state.dataList" :key="index">
| <div class="data-item-top flex-l">
| <i class="iconfont" :class="'icon-'+[state.iconFontArr[index]]"></i>
| </div>
| <div class="data-item-bottom flex-c">
| <span class="data-item-title"> {{ item.text }} </span>
| <span class="data-item-unit">(辆)</span>
| </div>
| </div>
| </div>
| <div class="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
| <div class="w-full h-[370px] bg-[#fff]" id="UnionPayChart"></div>
| </div>
| </div>
| </body>
| <script>
| const { createApp, onMounted, ref, reactive } = Vue;
| createApp({
| setup() {
| const state = reactive({
| dataList: [
| {
| number: 3250,
| text: '今日销量',
| },
| {
| number: 11122,
| text: '本周销量',
| },
| {
| number: 36788,
| text: '本月销量',
| },
| {
| number: 152234,
| text: '本季度销量',
| },
| ],
| iconFontArr: ['diagnose', 'monitoring', 'cloudupload', 'clouddownload'],
| });
| const initUnionPayEChart = () => {
| const chartDom = document.getElementById('UnionPayChart');
| const myChart = echarts.init(chartDom);
| var option = {
| title: {
| text: '银联缴费类型占比',
| textStyle: {
| fontSize: 13,
| },
| },
| 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>
|
|
