From 0f58100c894a4d5d9f444a91251ec1f3ac9c0190 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 17 七月 2024 14:50:34 +0800
Subject: [PATCH] fix: 修改页面
---
customer_list/ch/ai_html/views/demo/html/UnionPay.html | 216 +++---
customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html | 341 +++++-----
customer_list/ch/ai_html/views/demo/html/CreditRateRank.html | 456 +++++++-------
src/views/project/ch/demo/CreditRateRank.html | 2
src/views/project/ch/demo/MonthlyLeaderBoard.html | 3
customer_list/ch/ai_html/views/demo/html/MonthlyPay.html | 25
customer_list/ch/ai_html/views/demo/html/Overview.html | 620 ++++++++++----------
src/views/project/ch/demo/MonthlyPay.html | 25
8 files changed, 858 insertions(+), 830 deletions(-)
diff --git a/customer_list/ch/ai_html/views/demo/html/CreditRateRank.html b/customer_list/ch/ai_html/views/demo/html/CreditRateRank.html
index 0363beb..70848fe 100644
--- a/customer_list/ch/ai_html/views/demo/html/CreditRateRank.html
+++ b/customer_list/ch/ai_html/views/demo/html/CreditRateRank.html
@@ -1,247 +1,249 @@
<!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>
- <script src="/ai_html/views/demo/js/index.full.js"></script>
- <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
- <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
- <script src="/ai_html/views/demo/js/echarts.min.js"></script>
- <style type="text/css">
- .item_title {
- height: 38px;
- line-height: 38px;
- width: 100%;
- color: #31abe3;
- text-align: center;
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .leader_left {
- width: 58px;
- height: 14px;
- background-image: url('/static/images/demo/leader_left.png');
- }
+<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>
+ <script src="/ai_html/views/demo/js/index.full.js"></script>
+ <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+ <script src="/ai_html/views/demo/js/echarts.min.js"></script>
+ <style type="text/css">
+ .item_title {
+ height: 38px;
+ line-height: 38px;
+ width: 100%;
+ color: #31abe3;
+ text-align: center;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
- .leader_right {
- width: 58px;
- height: 14px;
- background-image: url('/static/images/demo/leader_right.png');
- transform: rotate(180deg);
- }
- </style>
- </head>
+ .leader_left {
+ width: 58px;
+ height: 14px;
+ background-image: url('/static/images/demo/leader_left.png');
+ }
- <body>
- <div class="w-full h-full bg-[#f2f4f8]" id="creditRateRank">
- <div class="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
- <div class="bg-white">
- <div class="item_title">
- <div class="leader_left"></div>
- <span>涓婃湀缃戞牸鐢ㄦ埛淇＄敤璇勫垎鎺掕</span>
- <div class="leader_right"></div>
- </div>
- <div class="w-full h-full" v-for="(item, index) in state.creditRateRankList" :key="index">
- <div class="w-full h-10 flex justify-between items-center px-6 py-6">
- <span>{{item.Name}}</span>
- <span>{{item.Amount}}</span>
- <span>{{item.CompanyName}}</span>
- <span>{{item.NewRecord}}</span>
- </div>
+ .leader_right {
+ width: 58px;
+ height: 14px;
+ background-image: url('/static/images/demo/leader_right.png');
+ transform: rotate(180deg);
+ }
+ </style>
+</head>
+
+<body>
+ <div class="w-full h-full bg-[#f2f4f8]" id="creditRateRank">
+ <div class="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
+ <div class="bg-white">
+ <div class="item_title">
+ <div class="leader_left"></div>
+ <span>涓婃湀缃戞牸鐢ㄦ埛淇＄敤璇勫垎鎺掕</span>
+ <div class="leader_right"></div>
+ </div>
+ <div class="w-full h-full" v-for="(item, index) in state.creditRateRankList" :key="index">
+ <div class="w-full h-10 flex justify-between items-center px-6 py-6">
+ <span>{{item.Name}}</span>
+ <span>{{item.Amount}}</span>
+ <span>{{item.CompanyName}}</span>
+ <span>{{item.NewRecord}}</span>
</div>
</div>
- <div class="w-full h-full bg-white">
- <div class="item_title">
- <div class="leader_left"></div>
- <span>鐢ㄦ埛璇勫垎鍒嗗竷</span>
- <div class="leader_right"></div>
- </div>
- <div class="w-full h-[250px] mt-[10px]" id="CreditRateRank"></div>
- </div>
- <div class="w-full bg-white h-[320px]" id="CreditRatePieRank"></div>
</div>
+ <div class="w-full h-full bg-white">
+ <div class="item_title">
+ <div class="leader_left"></div>
+ <span>鐢ㄦ埛璇勫垎鍒嗗竷</span>
+ <div class="leader_right"></div>
+ </div>
+ <div class="w-full h-[250px] mt-[10px]" id="CreditRateRank"></div>
+ </div>
+ <div class="w-full bg-white h-[320px]" id="CreditRatePieRank"></div>
</div>
- </body>
- <script>
- const { createApp, onMounted, ref, reactive } = Vue;
- const creditRateRankRef = ref(null);
- const creditRatePieRankRef = ref(null);
- const App = createApp({
- setup() {
- let state = reactive({
- creditRateRankList: [
- {
- Name: '鍘﹂棬钀ヤ笟鎵�',
- Amount: '10000',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
+ </div>
+</body>
+<script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const creditRateRankRef = ref(null);
+ const creditRatePieRankRef = ref(null);
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ creditRateRankList: [
+ {
+ Name: '鍘﹂棬钀ヤ笟鎵�',
+ Amount: '10000',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '浜屼緵钀ヤ笟鎵�',
+ Amount: '4354363',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '鍚屽畨钀ヤ笟鎵�',
+ Amount: '435233',
+ NewRecord: '2022-01-01',
+ CompanyName: '鏉庡洓',
+ },
+ {
+ Name: '闆嗙編钀ヤ笟鎵�',
+ Amount: '54545',
+ NewRecord: '2023-01-01',
+ CompanyName: '鐜嬩簩',
+ },
+ {
+ Name: '缈旂編钀ヤ笟鎵�',
+ Amount: '577887',
+ NewRecord: '2024-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '娴锋钵钀ヤ笟鎵�',
+ Amount: '5478786',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ ],
+ });
+ const initCreditRateRankChart = () => {
+ var chartDom = document.getElementById('CreditRateRank');
+ var creditRateRankDom = echarts.init(chartDom);
+ creditRateRankRef.value = creditRateRankDom;
+ var dataCake = [
+ { value: 2562, name: '浼樿川', percentage: '15.86%' },
+ { value: 6000, name: '鑹ソ', percentage: '37.15%' },
+ { value: 2589, name: '涓�鑸�', percentage: '16.03%' },
+ { value: 4000, name: '杈冨樊', percentage: '24.77%' },
+ { value: 1000, name: '鎭跺姡', percentage: '6.19%' },
+ ];
+ var option = {
+ title: {
+ text: '鎬昏瘎鍒嗘暟',
+ subtext: '789897' + '\n浜�',
+ itemGap: 8,
+ left: '29.5%',
+ top: '40%',
+ textAlign: 'center',
+ textStyle: {
+ fontSize: 18,
+ color: '#454c5c',
+ align: 'center',
},
- {
- Name: '浜屼緵钀ヤ笟鎵�',
- Amount: '4354363',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
+ x: 'center',
+ y: 'center',
+ subtextStyle: {
+ fontFamily: '寰蒋闆呴粦',
+ fontSize: 16,
+ color: '#6c7a89',
},
- {
- Name: '鍚屽畨钀ヤ笟鎵�',
- Amount: '435233',
- NewRecord: '2022-01-01',
- CompanyName: '鏉庡洓',
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b} : {c} 浜� ({d}%)', //榧犳爣鏀句笂鍘� 灞曠ず鍐呭
+ },
+ legend: {
+ orient: 'vertical',
+ left: '60%', //鍥句緥璺濈宸︾殑璺濈
+ y: 'center', //鍥句緥涓婁笅灞呬腑
+ itemGap: 20,
+ formatter: function (name) {
+ let target, percentage;
+ for (let i = 0; i < dataCake.length; i++) {
+ if (dataCake[i].name === name) {
+ target = dataCake[i].value;
+ percentage = dataCake[i].percentage;
+ }
+ }
+ let arr = [name + ' ', ' ' + target + '浜� ', ' ' + percentage];
+ return arr.join(' ');
},
+ },
+ color: ['#e3935d', '#eecb5f', '#61a5e8', '#e16757', '#9570e4'], //浜斾釜鏁版嵁锛屼簲涓鑹�
+ series: [
{
- Name: '闆嗙編钀ヤ笟鎵�',
- Amount: '54545',
- NewRecord: '2023-01-01',
- CompanyName: '鐜嬩簩',
- },
- {
- Name: '缈旂編钀ヤ笟鎵�',
- Amount: '577887',
- NewRecord: '2024-01-01',
- CompanyName: '寮犱笁',
- },
- {
- Name: '娴锋钵钀ヤ笟鎵�',
- Amount: '5478786',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
+ name: '骞撮緞鍒嗗竷',
+ type: 'pie',
+ radius: ['40%', '60%'],
+ center: ['30%', '50%'],
+ avoidLabelOverlap: false,
+ data: dataCake,
+ // 璁剧疆鍊煎煙鐨勬爣绛�
+ label: {
+ // normal: {
+ // position: 'inner', // 璁剧疆鏍囩浣嶇疆锛岄粯璁ゅ湪楗肩姸鍥惧 鍙�夊�硷細'outer' 娄 'inner锛堥ゼ鐘跺浘涓婏級'
+ // formatter: '{b}',
+ // },
+ show: false,
+ position: 'center',
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ },
+ },
},
],
- });
- const initCreditRateRankChart = () => {
- var chartDom = document.getElementById('CreditRateRank');
- var creditRateRankDom = echarts.init(chartDom);
- creditRateRankRef.value = creditRateRankDom;
- var dataCake = [
- { value: 2562, name: '浼樿川', percentage: '15.86%' },
- { value: 6000, name: '鑹ソ', percentage: '37.15%' },
- { value: 2589, name: '涓�鑸�', percentage: '16.03%' },
- { value: 4000, name: '杈冨樊', percentage: '24.77%' },
- { value: 1000, name: '鎭跺姡', percentage: '6.19%' },
- ];
- var option = {
- title: {
- text: '鎬昏瘎鍒嗘暟',
- subtext: '789897' + '\n浜�',
- itemGap: 8,
- left: '29%',
- top: '40%',
- textAlign: 'center',
- textStyle: {
- fontSize: 18,
- color: '#454c5c',
- align: 'center',
- },
- x: 'center',
- y: 'center',
- subtextStyle: {
- fontFamily: '寰蒋闆呴粦',
- fontSize: 16,
- color: '#6c7a89',
- },
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b} : {c} 浜� ({d}%)', //榧犳爣鏀句笂鍘� 灞曠ず鍐呭
- },
- legend: {
- orient: 'vertical',
- left: '60%', //鍥句緥璺濈宸︾殑璺濈
- y: 'center', //鍥句緥涓婁笅灞呬腑
- itemGap: 20,
- formatter: function (name) {
- let target, percentage;
- for (let i = 0; i < dataCake.length; i++) {
- if (dataCake[i].name === name) {
- target = dataCake[i].value;
- percentage = dataCake[i].percentage;
- }
- }
- let arr = [name + ' ', ' ' + target + '浜� ', ' ' + percentage];
- return arr.join(' ');
- },
- },
- color: ['#e3935d', '#eecb5f', '#61a5e8', '#e16757', '#9570e4'], //浜斾釜鏁版嵁锛屼簲涓鑹�
- series: [
- {
- name: '骞撮緞鍒嗗竷',
- type: 'pie',
- radius: ['40%', '60%'],
- center: ['30%', '50%'],
- avoidLabelOverlap: false,
- data: dataCake,
- // 璁剧疆鍊煎煙鐨勬爣绛�
- label: {
- // normal: {
- // position: 'inner', // 璁剧疆鏍囩浣嶇疆锛岄粯璁ゅ湪楗肩姸鍥惧 鍙�夊�硷細'outer' 娄 'inner锛堥ゼ鐘跺浘涓婏級'
- // formatter: '{b}',
- // },
- show: false,
- position: 'center',
- },
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- },
- },
- },
- ],
- };
- option && creditRateRankDom.setOption(option);
};
- const initCreditRateRankBarChart = () => {
- const barXData = state.creditRateRankList.map((item) => item.Name);
- var chartDom = document.getElementById('CreditRatePieRank');
- var creditRatePieRankDom = echarts.init(chartDom);
- creditRatePieRankRef.value = creditRatePieRankDom;
- var option = {
- xAxis: {
- type: 'category',
- data: barXData,
- },
- yAxis: {
- name: '璇勫垎',
- type: 'value',
- },
- series: [
- {
- data: [120, 200, 150, 80, 70, 110],
- type: 'bar',
- showBackground: true,
- backgroundStyle: {
- color: 'rgba(180, 180, 180, 0.2)',
- },
- itemStyle: {
- color: '#eecb5f',
- },
+ option && creditRateRankDom.setOption(option);
+ };
+ const initCreditRateRankBarChart = () => {
+ const barXData = state.creditRateRankList.map((item) => item.Name);
+ var chartDom = document.getElementById('CreditRatePieRank');
+ var creditRatePieRankDom = echarts.init(chartDom);
+ creditRatePieRankRef.value = creditRatePieRankDom;
+ var option = {
+ xAxis: {
+ type: 'category',
+ data: barXData,
+ },
+ yAxis: {
+ name: '璇勫垎',
+ type: 'value',
+ },
+ series: [
+ {
+ data: [120, 200, 150, 80, 70, 110],
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(180, 180, 180, 0.2)',
},
- ],
- };
- option && creditRatePieRankDom.setOption(option);
+ itemStyle: {
+ color: '#eecb5f',
+ },
+ },
+ ],
};
- onMounted(() => {
- window.addEventListener('resize', () => {
- creditRateRankRef.value.resize();
- creditRatePieRankRef.value.resize();
- });
- // 椤甸潰鍔犺浇瀹屾垚鍚庡垵濮嬪寲鍥捐〃
- initCreditRateRankChart();
- initCreditRateRankBarChart();
+ option && creditRatePieRankDom.setOption(option);
+ };
+ onMounted(() => {
+ window.addEventListener('resize', () => {
+ creditRateRankRef.value.resize();
+ creditRatePieRankRef.value.resize();
});
+ // 椤甸潰鍔犺浇瀹屾垚鍚庡垵濮嬪寲鍥捐〃
+ initCreditRateRankChart();
+ initCreditRateRankBarChart();
+ });
- return { state };
- },
- });
- App.use(ElementPlus);
- App.mount('#creditRateRank');
- </script>
-</html>
+ return { state };
+ },
+ });
+ App.use(ElementPlus);
+ App.mount('#creditRateRank');
+</script>
+
+</html>
\ No newline at end of file
diff --git a/customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html b/customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html
index 32e84ae..74e124b 100644
--- a/customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html
+++ b/customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html
@@ -1,185 +1,190 @@
<!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>
- <script src="/ai_html/views/demo/js/index.full.js"></script>
- <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
- <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
- <script src="/ai_html/views/demo/js/echarts.min.js"></script>
- <style type="text/css">
- .item_title {
- height: 38px;
- line-height: 38px;
- width: 100%;
- color: #31abe3;
- text-align: center;
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .leader_left {
- width: 58px;
- height: 14px;
- background-image: url('/static/images/demo/leader_left.png');
- }
+<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>
+ <script src="/ai_html/views/demo/js/index.full.js"></script>
+ <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+ <script src="/ai_html/views/demo/js/echarts.min.js"></script>
+ <style type="text/css">
+ .item_title {
+ height: 38px;
+ line-height: 38px;
+ width: 100%;
+ color: #31abe3;
+ text-align: center;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
- .leader_right {
- width: 58px;
- height: 14px;
- background-image: url('/static/images/demo/leader_right.png');
- transform: rotate(180deg);
- }
+ .leader_left {
+ width: 58px;
+ height: 14px;
+ background-image: url('/static/images/demo/leader_left.png');
+ }
- .title-inner {
- font-weight: 900;
- letter-spacing: 2px;
- background-color: #31abe3;
- /* background: linear-gradient(92deg, #fff9 0%, #fff9 48.8525390625%, #fff9 100%); */
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- </style>
- </head>
+ .leader_right {
+ width: 58px;
+ height: 14px;
+ background-image: url('/static/images/demo/leader_right.png');
+ transform: rotate(180deg);
+ }
- <body>
- <div class="w-full h-full bg-[#f2f4f8]" id="leaderBoard">
- <div class="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
- <div class="bg-white">
- <div class="item_title">
- <div class="leader_left"></div>
- <span>鏈堝害缂磋垂閲戦鎺掕</span>
- <div class="leader_right"></div>
- </div>
- <el-table :data="state.leaderBoardList">
- <el-table-column prop="Name" label="钀ヤ笟鎵�" width="180"></el-table-column>
- <el-table-column prop="Amount" label="娴嬭杽鍙�" width="180"></el-table-column>
- <el-table-column prop="NewRecord" label="鏃堕棿"></el-table-column>
- <el-table-column prop="CompanyName" label="缃戞牸鍛�"></el-table-column>
- </el-table>
+ .title-inner {
+ font-weight: 900;
+ letter-spacing: 2px;
+ background-color: #31abe3;
+ /* background: linear-gradient(92deg, #fff9 0%, #fff9 48.8525390625%, #fff9 100%); */
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="w-full h-full bg-[#f2f4f8]" id="leaderBoard">
+ <div class="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
+ <div class="bg-white">
+ <div class="item_title">
+ <div class="leader_left"></div>
+ <span>鏈堝害缂磋垂閲戦鎺掕</span>
+ <div class="leader_right"></div>
</div>
-
- <div class="w-full bg-white h-[270px] mt-[10px]" id="leaderChart"></div>
- <div class="w-full bg-white h-[320px]" id="leaderBarChart"></div>
+ <el-table :data="state.leaderBoardList">
+ <el-table-column prop="Name" label="钀ヤ笟鎵�" width="180"></el-table-column>
+ <el-table-column prop="Amount" label="娴嬭杽鍙�" width="180"></el-table-column>
+ <el-table-column prop="NewRecord" label="鏃堕棿"></el-table-column>
+ <el-table-column prop="CompanyName" label="缃戞牸鍛�"></el-table-column>
+ </el-table>
</div>
+
+ <div class="w-full bg-white h-[270px] mt-[10px]" id="leaderChart"></div>
+ <div class="w-full bg-white h-[320px]" id="leaderBarChart"></div>
</div>
- </body>
- <script>
- const { createApp, onMounted, ref, reactive } = Vue;
- const App = createApp({
- setup() {
- let state = reactive({
- leaderBoardList: [
- {
- Name: '鍘﹂棬钀ヤ笟鎵�',
- Amount: '10000',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
+ </div>
+</body>
+<script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ leaderBoardList: [
+ {
+ Name: '鍘﹂棬钀ヤ笟鎵�',
+ Amount: '10000',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '浜屼緵钀ヤ笟鎵�',
+ Amount: '4354363',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '鍚屽畨钀ヤ笟鎵�',
+ Amount: '435233',
+ NewRecord: '2022-01-01',
+ CompanyName: '鏉庡洓',
+ },
+ {
+ Name: '闆嗙編钀ヤ笟鎵�',
+ Amount: '54545',
+ NewRecord: '2023-01-01',
+ CompanyName: '鐜嬩簩',
+ },
+ {
+ Name: '缈旂編钀ヤ笟鎵�',
+ Amount: '577887',
+ NewRecord: '2024-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '娴锋钵钀ヤ笟鎵�',
+ Amount: '5478786',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ ],
+ });
+ const initLeaderBoardChart = () => {
+ var chartDom = document.getElementById('leaderChart');
+ var leaderChartDom = echarts.init(chartDom);
+ var option = {
+ title: {
+ text: '杩�12鏈堢即璐归噾棰�',
+ textStyle: {
+ fontSize: 13,
},
+ },
+ xAxis: {
+ type: 'category',
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ },
+ yAxis: {
+ type: 'value',
+ },
+ dataZoom: {
+ type: 'inside',
+ },
+ series: [
{
- Name: '浜屼緵钀ヤ笟鎵�',
- Amount: '4354363',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
- },
- {
- Name: '鍚屽畨钀ヤ笟鎵�',
- Amount: '435233',
- NewRecord: '2022-01-01',
- CompanyName: '鏉庡洓',
- },
- {
- Name: '闆嗙編钀ヤ笟鎵�',
- Amount: '54545',
- NewRecord: '2023-01-01',
- CompanyName: '鐜嬩簩',
- },
- {
- Name: '缈旂編钀ヤ笟鎵�',
- Amount: '577887',
- NewRecord: '2024-01-01',
- CompanyName: '寮犱笁',
- },
- {
- Name: '娴锋钵钀ヤ笟鎵�',
- Amount: '5478786',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
+ data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147],
+ type: 'line',
},
],
- });
- const initLeaderBoardChart = () => {
- var chartDom = document.getElementById('leaderChart');
- var leaderChartDom = echarts.init(chartDom);
- var option = {
- title: {
- text: '杩�12鏈堢即璐归噾棰�',
- textStyle: {
- fontSize: 13,
- },
- },
- xAxis: {
- type: 'category',
- data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
- },
- yAxis: {
- type: 'value',
- },
- series: [
- {
- data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147],
- type: 'line',
- },
- ],
- };
-
- option && leaderChartDom.setOption(option);
};
- const initLeaderBoardBarChart = () => {
- const barXData = state.leaderBoardList.map((item) => item.Name);
- var chartDom = document.getElementById('leaderBarChart');
- var leaderBarChartDom = echarts.init(chartDom);
- var option = {
- xAxis: {
- type: 'category',
- data: barXData,
- },
- yAxis: {
- name: '璇勫垎',
- type: 'value',
- },
- series: [
- {
- data: [120, 200, 150, 80, 70, 110],
- type: 'bar',
- showBackground: true,
- backgroundStyle: {
- color: 'rgba(180, 180, 180, 0.2)',
- },
- itemStyle: {
- color: '#61a5e8',
- },
+
+ option && leaderChartDom.setOption(option);
+ };
+ const initLeaderBoardBarChart = () => {
+ const barXData = state.leaderBoardList.map((item) => item.Name);
+ var chartDom = document.getElementById('leaderBarChart');
+ var leaderBarChartDom = echarts.init(chartDom);
+ var option = {
+ xAxis: {
+ type: 'category',
+ data: barXData,
+ },
+ yAxis: {
+ name: '璇勫垎',
+ type: 'value',
+ },
+ series: [
+ {
+ data: [120, 200, 150, 80, 70, 110],
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(180, 180, 180, 0.2)',
},
- ],
- };
-
- option && leaderBarChartDom.setOption(option);
+ itemStyle: {
+ color: '#61a5e8',
+ },
+ },
+ ],
};
- onMounted(() => {
- initLeaderBoardChart();
- initLeaderBoardBarChart();
- });
- return { state };
- },
- });
- App.use(ElementPlus);
- App.mount('#leaderBoard');
- </script>
-</html>
+ option && leaderBarChartDom.setOption(option);
+ };
+ onMounted(() => {
+ initLeaderBoardChart();
+ initLeaderBoardBarChart();
+ });
+
+ return { state };
+ },
+ });
+ App.use(ElementPlus);
+ App.mount('#leaderBoard');
+</script>
+
+</html>
\ No newline at end of file
diff --git a/customer_list/ch/ai_html/views/demo/html/MonthlyPay.html b/customer_list/ch/ai_html/views/demo/html/MonthlyPay.html
index 6b33e02..6955854 100644
--- a/customer_list/ch/ai_html/views/demo/html/MonthlyPay.html
+++ b/customer_list/ch/ai_html/views/demo/html/MonthlyPay.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="en" >
+<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -36,8 +36,8 @@
let option = {
title: {
text: '缂磋垂鍗犳瘮',
- textStyle:{
- fontSize:13
+ textStyle: {
+ fontSize: 13
}
},
legend: {},
@@ -108,6 +108,9 @@
color: '#1B2232'
}
},
+ dataZoom: {
+ type: 'inside',
+ },
series: [{
name: '',
type: 'line',
@@ -127,8 +130,8 @@
var monthPayOption = {
title: {
text: '杩�12涓湀鐨勭即璐硅褰�',
- textStyle:{
- fontSize:13
+ textStyle: {
+ fontSize: 13
}
},
tooltip: {
@@ -149,7 +152,7 @@
}
},
grid: {
- top:'23%',
+ top: '23%',
left: '3%',
right: '4%',
bottom: '3%',
@@ -167,6 +170,9 @@
type: 'value'
}
],
+ dataZoom: {
+ type: 'inside',
+ },
series: [
{
name: '鍘﹂棬',
@@ -234,10 +240,13 @@
var monthPayAmountOption = {
title: {
text: '杩�12涓湀鐨勭即璐归噾棰�',
- textStyle:{
- fontSize:13
+ textStyle: {
+ fontSize: 13
}
},
+ dataZoom: {
+ type: 'inside',
+ },
tooltip: {},
legend: {},
xAxis: {
diff --git a/customer_list/ch/ai_html/views/demo/html/Overview.html b/customer_list/ch/ai_html/views/demo/html/Overview.html
index a6f8115..a1ee9d2 100644
--- a/customer_list/ch/ai_html/views/demo/html/Overview.html
+++ b/customer_list/ch/ai_html/views/demo/html/Overview.html
@@ -1,23 +1,24 @@
<!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/datav.umd.js"></script>
- <script src="/ai_html/views/demo/js/index.full.js"></script>
- <script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
- <script src="/ai_html/views/demo/js/echarts.min.js"></script>
- <link href="/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
- <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
- <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <div class="w-full h-full bg-[#f2f4f8]" id="overview">
- <!-- <div class="w-full h-[40px] flex items-center">骞村害缂磋垂鎯呭喌</div>
+<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/datav.umd.js"></script>
+ <script src="/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/ai_html/views/demo/js/echarts.min.js"></script>
+ <link href="/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
+ <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+ <div class="w-full h-full bg-[#f2f4f8]" id="overview">
+ <!-- <div class="w-full h-[40px] flex items-center">骞村害缂磋垂鎯呭喌</div>
<div class="h-full">
<div class="w-[310px] flex flex-wrap justify-between h-[220px]">
<div v-for="item in state.annualPayment" :key="item" class="w-[50%] h-[33%] flex items-center">
@@ -29,333 +30,330 @@
</div>
</div>
</div> -->
- <div class="screen-top-center">
- <div class="top-center-data">
- <div class="data-item" v-for="(item, index) in state.dataList">
- <p class="data-item-title">{{item.title}}</p>
- <p class="data-item-desc">{{item.value}}</p>
+ <div class="screen-top-center">
+ <div class="top-center-data">
+ <div class="data-item" v-for="(item, index) in state.dataList">
+ <p class="data-item-title">{{item.title}}</p>
+ <p class="data-item-desc">{{item.value}}</p>
+ </div>
+ </div>
+ <div class="top-center-chart">
+ <div class="chart-item">
+ <div class="screen-top-header flex flex-wrap justify-center items-center">
+ <div class="header-left flex-c">
+ <i class="iconfont icon-ico_shuju text-[#1c86ff]"></i>
+ </div>
+ <div class="header-right flex-l">
+ <span class="header-title">浠婃棩鍦板尯閿�閲忔帓琛�</span>
+ <Decoration3 class="dv-dec-3" />
+ </div>
+ </div>
+ <div class="max-w-[600px] h-full ml-[5px]">
+ <div v-for="(item,index) in state.rankList.data" :key="index" class="flex">
+ <div class="text-[16px] text-[#000] w-[70px]">{{item.name}}</div>
+
+ <el-progress :stroke-width="20" :percentage="item.value/100" class="mb-[15px] w-full"
+ :text-inside="true"></el-progress>
+ <div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{item.value}}</div>
+ </div>
</div>
</div>
- <div class="top-center-chart">
- <div class="chart-item">
- <div class="screen-top-header flex flex-wrap justify-center items-center">
- <div class="header-left flex-c">
- <i class="iconfont icon-ico_shuju text-[#1c86ff]"></i>
- </div>
- <div class="header-right flex-l">
- <span class="header-title">浠婃棩鍦板尯閿�閲忔帓琛�</span>
- <Decoration3 class="dv-dec-3" />
- </div>
+ <div class="chart-item">
+ <div class="screen-top-header flex-l">
+ <div class="header-left flex-c">
+ <i class="iconfont icon-shangchuan text-[#1c86ff]"></i>
</div>
- <div class="max-w-[600px] h-full ml-[5px]">
- <div v-for="(item,index) in state.rankList.data" :key="index" class="flex">
- <div class="text-[16px] text-[#000] w-[70px]">{{item.name}}</div>
-
- <el-progress
- :stroke-width="20"
- :percentage="item.value/100"
- class="mb-[15px] w-full"
- :text-inside="true"
- ></el-progress>
- <div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{item.value}}</div>
- </div>
+ <div class="header-right flex-l">
+ <span class="header-title">浠婃棩涓氱哗瀹屾垚搴�</span>
+ <Decoration3 class="dv-dec-3" />
</div>
</div>
- <div class="chart-item">
- <div class="screen-top-header flex-l">
- <div class="header-left flex-c">
- <i class="iconfont icon-shangchuan text-[#1c86ff]"></i>
- </div>
- <div class="header-right flex-l">
- <span class="header-title">浠婃棩涓氱哗瀹屾垚搴�</span>
- <Decoration3 class="dv-dec-3" />
- </div>
- </div>
- <div class="pond-section">
- <div id="pond" class="w-full h-[270px]"></div>
- </div>
+ <div class="pond-section">
+ <div id="pond" class="w-full h-[270px]"></div>
</div>
</div>
</div>
</div>
- </body>
- <script>
- const { createApp, onMounted, ref, reactive } = Vue;
- const { Decoration3 } = DataV;
- const demoOverViewChart = ref(null);
- const App = createApp({
- setup() {
- let state = reactive({
- annualPayment: [
+ </div>
+</body>
+<script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const { Decoration3 } = DataV;
+ const demoOverViewChart = ref(null);
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ annualPayment: [
+ {
+ ID: 1,
+ Name: '鏈勾缂磋垂',
+ Value: 8009987,
+ Unit: '绗�',
+ },
+ {
+ ID: 2,
+ Name: '缂磋垂閲戦',
+ Value: 7298.3,
+ Unit: '涓囧厓',
+ },
+ {
+ ID: 3,
+ Name: '鏈湀缂磋垂',
+ Value: 198,
+ Unit: '绗�',
+ },
+ {
+ ID: 4,
+ Name: '缂磋垂閲戦',
+ Value: 3,
+ Unit: '涓囧厓',
+ },
+ {
+ ID: 5,
+ Name: '鏈湀缂磋垂',
+ Value: 22,
+ Unit: '绗�',
+ },
+ {
+ ID: 6,
+ Name: '缂磋垂閲戦',
+ Value: 0.3,
+ Unit: '涓囧厓',
+ },
+ {
+ ID: 7,
+ Name: '浠婃棩瀹炴椂',
+ Value: 198,
+ Unit: '绗�',
+ },
+ {
+ ID: 8,
+ Name: '缂磋垂閲戦',
+ Value: 198,
+ Unit: '涓囧厓',
+ },
+ ],
+
+ dataList: [
+ {
+ title: '浠婃棩绱閿�閲�',
+ value: 755,
+ config: {
+ number: [755],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
+ },
+ },
+ {
+ title: '鏈懆绱閿�閲�',
+ value: 3288,
+ config: {
+ number: [3288],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
+ },
+ },
+ {
+ title: '鏈湀绱閿�閲�',
+ value: 14222,
+ config: {
+ number: [14222],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
+ },
+ },
+ {
+ title: '瀛ｅ害绱閿�閲�',
+ value: 41022,
+ config: {
+ number: [41022],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
+ },
+ },
+ {
+ title: '骞村害绱閿�閲�',
+ value: 176888,
+ config: {
+ number: [176888],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
+ },
+ },
+ {
+ title: '浠婃棩鐩爣閿�閲�',
+ value: 820,
+ config: {
+ number: [820],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24,
+ },
+ },
+ },
+ ],
+ completeObj: {
+ data: [45, 56],
+ shape: 'round',
+ },
+ rankList: {
+ data: [
{
- ID: 1,
- Name: '鏈勾缂磋垂',
- Value: 8009987,
- Unit: '绗�',
+ name: '姝︽眽甯�',
+ value: 1210,
},
{
- ID: 2,
- Name: '缂磋垂閲戦',
- Value: 7298.3,
- Unit: '涓囧厓',
+ name: '鍖椾含',
+ value: 1655,
},
{
- ID: 3,
- Name: '鏈湀缂磋垂',
- Value: 198,
- Unit: '绗�',
+ name: '涓婃捣',
+ value: 1788,
},
{
- ID: 4,
- Name: '缂磋垂閲戦',
- Value: 3,
- Unit: '涓囧厓',
+ name: '娣卞湷',
+ value: 2100,
},
{
- ID: 5,
- Name: '鏈湀缂磋垂',
- Value: 22,
- Unit: '绗�',
+ name: '骞垮窞',
+ value: 1577,
},
{
- ID: 6,
- Name: '缂磋垂閲戦',
- Value: 0.3,
- Unit: '涓囧厓',
+ name: '鎴愰兘',
+ value: 1625,
},
{
- ID: 7,
- Name: '浠婃棩瀹炴椂',
- Value: 198,
- Unit: '绗�',
+ name: '鍘﹂棬',
+ value: 857,
},
{
- ID: 8,
- Name: '缂磋垂閲戦',
- Value: 198,
- Unit: '涓囧厓',
+ name: '閮戝窞',
+ value: 1322,
},
],
-
- dataList: [
- {
- title: '浠婃棩绱閿�閲�',
- value: 755,
- config: {
- number: [755],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- },
- {
- title: '鏈懆绱閿�閲�',
- value: 3288,
- config: {
- number: [3288],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- },
- {
- title: '鏈湀绱閿�閲�',
- value: 14222,
- config: {
- number: [14222],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- },
- {
- title: '瀛ｅ害绱閿�閲�',
- value: 41022,
- config: {
- number: [41022],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- },
- {
- title: '骞村害绱閿�閲�',
- value: 176888,
- config: {
- number: [176888],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- },
- {
- title: '浠婃棩鐩爣閿�閲�',
- value: 820,
- config: {
- number: [820],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
- },
- ],
- completeObj: {
- data: [45, 56],
- shape: 'round',
- },
- rankList: {
- data: [
- {
- name: '姝︽眽甯�',
- value: 1210,
- },
- {
- name: '鍖椾含',
- value: 1655,
- },
- {
- name: '涓婃捣',
- value: 1788,
- },
- {
- name: '娣卞湷',
- value: 2100,
- },
- {
- name: '骞垮窞',
- value: 1577,
- },
- {
- name: '鎴愰兘',
- value: 1625,
- },
- {
- name: '鍘﹂棬',
- value: 857,
- },
- {
- name: '閮戝窞',
- value: 1322,
- },
- ],
- carousel: 'single',
- unit: '杈�',
- },
- intervalInstance: 0,
+ carousel: 'single',
+ unit: '杈�',
+ },
+ intervalInstance: 0,
+ });
+ const getOverViewList = () => {
+ const iconList = [
+ 'biaodan',
+ 'putong',
+ 'zhongduancanshuchaxun',
+ 'shidu',
+ 'fuwenbenkuang',
+ 'fuwenben',
+ 'jiliandongxuanzeqi',
+ 'jinridaiban',
+ 'gongju',
+ ];
+ state.annualPayment.forEach((annual, index) => {
+ annual.Icon = iconList[index];
+ annual.BgColor = randomHexColor();
});
- const getOverViewList = () => {
- const iconList = [
- 'biaodan',
- 'putong',
- 'zhongduancanshuchaxun',
- 'shidu',
- 'fuwenbenkuang',
- 'fuwenben',
- 'jiliandongxuanzeqi',
- 'jinridaiban',
- 'gongju',
- ];
- state.annualPayment.forEach((annual, index) => {
- annual.Icon = iconList[index];
- annual.BgColor = randomHexColor();
- });
- };
- //闅忔満鐢熸垚棰滆壊
- const randomHexColor = () => {
- return `#${Math.floor(Math.random() * 16777215)
- .toString(16)
- .padEnd(6, '0')}`;
- };
- onMounted(() => {
- // getOverViewList();
- window.addEventListener('resize', () => {
- demoOverViewChart.value.resize();
- });
- initOverViewEchart();
+ };
+ //闅忔満鐢熸垚棰滆壊
+ const randomHexColor = () => {
+ return `#${Math.floor(Math.random() * 16777215)
+ .toString(16)
+ .padEnd(6, '0')}`;
+ };
+ onMounted(() => {
+ // getOverViewList();
+ window.addEventListener('resize', () => {
+ demoOverViewChart.value.resize();
});
- const initOverViewEchart = () => {
- var chartDom = document.getElementById('pond');
- var myChart = echarts.init(chartDom);
- demoOverViewChart.value = myChart;
- var option = {
- tooltip: {
- trigger: 'item',
- },
- title: {
- // text: '76%',//涓绘爣棰樻枃鏈�
- subtext: '76%', //鍓爣棰樻枃鏈�
- left: 'center',
+ initOverViewEchart();
+ });
+ const initOverViewEchart = () => {
+ var chartDom = document.getElementById('pond');
+ var myChart = echarts.init(chartDom);
+ demoOverViewChart.value = myChart;
+ var option = {
+ tooltip: {
+ trigger: 'item',
+ },
+ title: {
+ // text: '76%',//涓绘爣棰樻枃鏈�
+ subtext: '76%', //鍓爣棰樻枃鏈�
+ left: 'center',
- top: '42%',
- textStyle: {
- fontSize: 38,
- color: '#454c5c',
- align: 'center',
- },
- subtextStyle: {
- fontFamily: '寰蒋闆呴粦',
- fontSize: 16,
- color: '#6c7a89',
- },
+ top: '42%',
+ textStyle: {
+ fontSize: 38,
+ color: '#454c5c',
+ align: 'center',
},
- series: [
- {
- name: 'Access From',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
+ subtextStyle: {
+ fontFamily: '寰蒋闆呴粦',
+ fontSize: 16,
+ color: '#6c7a89',
+ },
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center',
+ },
+ emphasis: {
label: {
- show: false,
- position: 'center',
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold',
},
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold',
- },
- },
- labelLine: {
- show: false,
- },
- data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' },
- { value: 484, name: 'Union Ads' },
- { value: 300, name: 'Video Ads' },
- ],
},
- ],
- };
-
- option && myChart.setOption(option);
+ labelLine: {
+ show: false,
+ },
+ data: [
+ { value: 1048, name: 'Search Engine' },
+ { value: 735, name: 'Direct' },
+ { value: 580, name: 'Email' },
+ { value: 484, name: 'Union Ads' },
+ { value: 300, name: 'Video Ads' },
+ ],
+ },
+ ],
};
- return { state };
- },
- });
+ option && myChart.setOption(option);
+ };
- App.component('Decoration3', Decoration3);
- App.use(ElementPlus);
- App.mount('#overview');
- </script>
-</html>
+ return { state };
+ },
+ });
+
+ App.component('Decoration3', Decoration3);
+ App.use(ElementPlus);
+ App.mount('#overview');
+</script>
+
+</html>
\ No newline at end of file
diff --git a/customer_list/ch/ai_html/views/demo/html/UnionPay.html b/customer_list/ch/ai_html/views/demo/html/UnionPay.html
index 84386b8..b4290f8 100644
--- a/customer_list/ch/ai_html/views/demo/html/UnionPay.html
+++ b/customer_list/ch/ai_html/views/demo/html/UnionPay.html
@@ -1,118 +1,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>
+<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 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: '浠婃棩閿�閲�',
+ <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: [
{
- number: 11122,
- text: '鏈懆閿�閲�',
- },
- {
- number: 36788,
- text: '鏈湀閿�閲�',
- },
- {
- number: 152234,
- text: '鏈搴﹂攢閲�',
+ type: 'bar',
+ encode: {
+ // Map the "amount" column to X axis.
+ x: 'amount',
+ // Map the "product" column to Y axis
+ y: 'product',
+ },
},
],
- 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>
+ option && myChart.setOption(option);
+ };
+ onMounted(() => {
+ initUnionPayEChart();
+ });
+ },
+ }).mount('#unionPay');
+</script>
+
+</html>
\ No newline at end of file
diff --git a/src/views/project/ch/demo/CreditRateRank.html b/src/views/project/ch/demo/CreditRateRank.html
index 2e539a3..9359c57 100644
--- a/src/views/project/ch/demo/CreditRateRank.html
+++ b/src/views/project/ch/demo/CreditRateRank.html
@@ -131,7 +131,7 @@
text: '鎬昏瘎鍒嗘暟',
subtext: '789897' + '\n浜�',
itemGap: 8,
- left: '29%',
+ left: '29.5%',
top: '40%',
textAlign: 'center',
textStyle: {
diff --git a/src/views/project/ch/demo/MonthlyLeaderBoard.html b/src/views/project/ch/demo/MonthlyLeaderBoard.html
index 795fd76..38e4b1f 100644
--- a/src/views/project/ch/demo/MonthlyLeaderBoard.html
+++ b/src/views/project/ch/demo/MonthlyLeaderBoard.html
@@ -131,6 +131,9 @@
yAxis: {
type: 'value',
},
+ dataZoom: {
+ type: 'inside',
+ },
series: [
{
data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147],
diff --git a/src/views/project/ch/demo/MonthlyPay.html b/src/views/project/ch/demo/MonthlyPay.html
index 4a3973f..aa1601e 100644
--- a/src/views/project/ch/demo/MonthlyPay.html
+++ b/src/views/project/ch/demo/MonthlyPay.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="en" >
+<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -36,8 +36,8 @@
let option = {
title: {
text: '缂磋垂鍗犳瘮',
- textStyle:{
- fontSize:13
+ textStyle: {
+ fontSize: 13
}
},
legend: {},
@@ -108,6 +108,9 @@
color: '#1B2232'
}
},
+ dataZoom: {
+ type: 'inside',
+ },
series: [{
name: '',
type: 'line',
@@ -127,8 +130,8 @@
var monthPayOption = {
title: {
text: '杩�12涓湀鐨勭即璐硅褰�',
- textStyle:{
- fontSize:13
+ textStyle: {
+ fontSize: 13
}
},
tooltip: {
@@ -149,7 +152,7 @@
}
},
grid: {
- top:'23%',
+ top: '23%',
left: '3%',
right: '4%',
bottom: '3%',
@@ -167,6 +170,9 @@
type: 'value'
}
],
+ dataZoom: {
+ type: 'inside',
+ },
series: [
{
name: '鍘﹂棬',
@@ -234,10 +240,13 @@
var monthPayAmountOption = {
title: {
text: '杩�12涓湀鐨勭即璐归噾棰�',
- textStyle:{
- fontSize:13
+ textStyle: {
+ fontSize: 13
}
},
+ dataZoom: {
+ type: 'inside',
+ },
tooltip: {},
legend: {},
xAxis: {
--
Gitblit v1.9.3