From 4300e2394a205f3afbf4a3528db851e5636041d9 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期五, 19 七月 2024 14:24:25 +0800
Subject: [PATCH] fix: 修改页面路径
---
customer_list/ch/ai_html/views/demo/html/Overview.html | 270 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 168 insertions(+), 102 deletions(-)
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 a1ee9d2..4fdd48e 100644
--- a/customer_list/ch/ai_html/views/demo/html/Overview.html
+++ b/customer_list/ch/ai_html/views/demo/html/Overview.html
@@ -11,30 +11,35 @@
<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>
+ <!-- <script src="/ai_html/lib/common.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" />
+ <style>
+ .el-dialog__header {
+ margin-right: 0;
+ padding: 8px 10px;
+ background: #528abe
+ }
+
+ .el-dialog__title {
+ color: #fff;
+ font-size: 14px;
+ }
+
+ .el-dialog__close {
+ color: #fff !important;
+ }
+ </style>
</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">
- <div :class="['iconfont icon-' + item.Icon]" :style="`color:${item.BgColor};font-size:${36}px`"></div>
- <div class="ml-[10px]">
- <span>{{ item.Value }} <span>{{ item.Unit }}</span></span>
- <p>{{ item.Name }}</p>
- </div>
- </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>
+ <p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}</p>
</div>
</div>
<div class="top-center-chart">
@@ -74,12 +79,17 @@
</div>
</div>
</div>
+ <el-dialog v-model="state.isShowChartVisible" :title="state.volumeInfo.title" width="50%"
+ class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible">
+ <div id="businessTrends" class="w-full h-[500px]"></div>
+ </el-dialog>
</div>
</body>
<script>
- const { createApp, onMounted, ref, reactive } = Vue;
+ const { createApp, onMounted, ref, reactive, nextTick } = Vue;
const { Decoration3 } = DataV;
const demoOverViewChart = ref(null);
+ const demoBusinessTrendsChart = ref(null);
const App = createApp({
setup() {
let state = reactive({
@@ -136,82 +146,40 @@
dataList: [
{
+ id: 1,
title: '浠婃棩绱閿�閲�',
value: 755,
- config: {
- number: [755],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 2,
title: '鏈懆绱閿�閲�',
value: 3288,
- config: {
- number: [3288],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 3,
title: '鏈湀绱閿�閲�',
value: 14222,
- config: {
- number: [14222],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 4,
title: '瀛ｅ害绱閿�閲�',
value: 41022,
- config: {
- number: [41022],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 5,
title: '骞村害绱閿�閲�',
value: 176888,
- config: {
- number: [176888],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 6,
title: '浠婃棩鐩爣閿�閲�',
value: 820,
- config: {
- number: [820],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
],
completeObj: {
@@ -257,6 +225,12 @@
unit: '杈�',
},
intervalInstance: 0,
+ isShowChartVisible: false,
+ volumeInfo: {
+ id: null,
+ title: null,
+ value: null,
+ }
});
const getOverViewList = () => {
const iconList = [
@@ -283,71 +257,163 @@
};
onMounted(() => {
// getOverViewList();
- window.addEventListener('resize', () => {
- demoOverViewChart.value.resize();
- });
initOverViewEchart();
+
+ window.parent.addEventListener('resize', () => {
+ demoOverViewChart.value.resize();
+ demoBusinessTrendsChart.value.resize();
+ });
+
});
+ //鍒濆鍖栦粖鏃ヤ笟缁╁畬鎴愬害echart
const initOverViewEchart = () => {
var chartDom = document.getElementById('pond');
var myChart = echarts.init(chartDom);
+ 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%' },
+ ];
demoOverViewChart.value = myChart;
var option = {
tooltip: {
trigger: 'item',
},
- title: {
- // text: '76%',//涓绘爣棰樻枃鏈�
- subtext: '76%', //鍓爣棰樻枃鏈�
- left: 'center',
+ legend: {
+ orient: 'vertical',
+ left: '54%',
+ y: 'center',
- top: '42%',
- textStyle: {
- fontSize: 38,
- color: '#454c5c',
- align: 'center',
- },
- subtextStyle: {
- fontFamily: '寰蒋闆呴粦',
- fontSize: 16,
- color: '#6c7a89',
+ 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(' ');
},
},
+ grid: {
+ left: '25'
+ },
+ // title: {
+ // text: '76%',//涓绘爣棰樻枃鏈�
+ // subtext: '76%', //鍓爣棰樻枃鏈�
+ // left: 'center',
+
+ // top: '42%',
+ // textStyle: {
+ // fontSize: 38,
+ // color: '#454c5c',
+ // align: 'center',
+ // },
+ // subtextStyle: {
+ // fontFamily: '寰蒋闆呴粦',
+ // fontSize: 16,
+ // color: '#6c7a89',
+ // },
+ // },
series: [
{
- name: 'Access From',
+ name: '浠婃棩涓氱哗瀹屾垚搴�',
type: 'pie',
- radius: ['40%', '70%'],
+ radius: ['40%', '60%'],
+ center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
- 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' },
- ],
+ data: dataCake,
},
],
};
option && myChart.setOption(option);
};
+ //鍒濆鍖栧脊绐梕chart
+ const initBusinessTrendsEchart = () => {
+ var chartDom = document.getElementById('businessTrends');
+ var businessTrendsChart = echarts.init(chartDom);
+ demoBusinessTrendsChart.value = businessTrendsChart;
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ left: '3%', // 璋冩暣宸﹁竟璺�
+ right: '5%', // 璋冩暣鍙宠竟璺�
+ bottom: '3%', // 璋冩暣搴曢儴杈硅窛
+ top: '5%', // 璋冩暣椤堕儴杈硅窛
+ containLabel: true, // 纭繚鏍囩鍜岃酱鏍囬琚寘鍚湪瀹瑰櫒鍐�
+ },
+ xAxis: {
+ name: '鏃堕棿',
+ type: 'category',
+ minInterval: 3600 * 4 * 1000, //12
+ data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45']
- return { state };
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ formatter: '{value}',
+ },
+ },
+ dataZoom: {
+ type: 'inside',
+ },
+ series: [
+ {
+ name: '閿�鍞',
+ type: 'line',
+ data: [620, 1032, 701, 1234, 890, 1430, 1320, 1230, 1320, 1430, 1320], // 绀轰緥鏁版嵁锛屾ā鎷熻捣浼忔洿澶�
+ smooth: true, // 鎶樼嚎骞虫粦
+ lineStyle: {
+ width: 2,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: '#62c1fe' },
+ { offset: 0.5, color: '#ad90f7' },
+ { offset: 1, color: '#e875f2' },
+ ]),
+ },
+ symbolSize: (value, params) => {
+ // 鑾峰彇鏁版嵁绯诲垪鐨勯暱搴�
+ const seriesLength = option.series[0].data.length;
+ // 涓棿鑺傜偣鏀惧ぇ
+ if (params.dataIndex === Math.floor(seriesLength / 2)) {
+ return 8; // 涓棿鑺傜偣鐨勫ぇ灏�
+ }
+ return 8; // 鍏朵粬鑺傜偣鐨勫ぇ灏�
+ },
+ },
+ ],
+ };
+ option && businessTrendsChart.setOption(option);
+ }
+ //鐐瑰嚮鏁版嵁椤瑰脊绐�
+ const handleDataItemClick = (item) => {
+ state.volumeInfo = item
+ nextTick(() => {
+ initBusinessTrendsEchart();
+ });
+ state.isShowChartVisible = true;
+ };
+ //鍏抽棴寮圭獥
+ const handleCloseChartVisible = () => {
+ state.isShowChartVisible = false;
+ }
+
+ return { state, handleDataItemClick, handleCloseChartVisible };
},
});
--
Gitblit v1.9.3