From a53f3b0645e3b0455a8c9a4a1cd0f061a8106c8d Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期二, 19 一月 2021 19:49:59 +0800 Subject: [PATCH] 轨迹图实时查询逻辑更新(去除过滤) --- src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 111 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 88 insertions(+), 23 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue index 40c81ac..8007458 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue @@ -130,6 +130,32 @@ </div> </div> </div> + <div class="statics"> + <div class="lt"> + <div class="statics-part"> + <div class="statics-header"> + <span class="title">涔樺姟鍛樿繚瑙勭粺璁�</span> + <time-shortcut @actPickerChange="irregularStatistic"></time-shortcut> + </div> + <div class="chart-area flex-box"> + <div class="lt"> + <div class="chart-theme">涔樺姟鍛樻�讳汉鏁�</div> + <div class="sum"> + <span class="val">8846</span> + <span class="ratio">17.1%</span> + </div> + <Line :options="optionsOfIrregularSum"></Line> + </div> + <div class="gt"> + <div class="chart-theme">浜哄潎杩濊娆℃暟</div> + <div class="sum"> + <span class="val">8846</span> + </div> + </div> + </div> + </div> + </div> + </div> </div> </div> </div> @@ -139,8 +165,9 @@ import timeShortcut from './timeShortcut'; import Bar from './charts/bar'; import Pie from './charts/pie'; +import Line from './charts/line'; export default { - components: { timeShortcut, Bar, Pie }, + components: { timeShortcut, Bar, Pie, Line }, data () { return { actCardTab: 'dataStatistic', @@ -183,44 +210,79 @@ ] }, optionsOfHidDangerPie: { - tooltip:{ + tooltip: { trigger: 'item', formatter: '{a}<br/>{b}:{c} ({d}%)' }, legend: { orient: 'vertical', - left: 10, + right: 10, + y: 'center', data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'] }, series: [ { - name:'寮傚父浜嬩欢', - type:'pie', - color: [], - radius: ['50%','70%'], + name: '寮傚父浜嬩欢', + type: 'pie', + color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'], + radius: ['70%', '90%'], + //center: ['40%','60%'], avoidLabelOverlap: false, - label:{ + label: { show: false, position: 'center' }, - emphasis:{ - label:{ + emphasis: { + label: { show: true, fontSize: '30', fontWeight: 'bold' } }, - labelLine:{ + labelLine: { show: false }, data: [ - {value: 270,name:'鏈福绗�'}, - {value: 500,name:'鏈墜姣�'}, - {value: 300,name:'鏈懠鍞�'}, - {value: 430,name:'杩愯涓潯瑙�'}, - {value: 620,name:'鏈鏌�'}, - {value: 540,name:'鏈簲绛�'}, + { value: 270, name: '鏈福绗�' }, + { value: 500, name: '鏈墜姣�' }, + { value: 300, name: '鏈懠鍞�' }, + { value: 430, name: '杩愯涓潯瑙�' }, + { value: 620, name: '鏈鏌�' }, + { value: 540, name: '鏈簲绛�' }, ] + } + ] + }, + optionsOfIrregularSum: { + animation: false, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + label: { + show: false + } + }, + yAxis: { + type: 'value', + label: { + show: false + } + }, + series: [ + { + data: [820, 932, 901, 934, 1290, 1330, 1320], + type: 'line', + } ] } @@ -228,8 +290,11 @@ }, methods: { timeShortChange (time) { - debugger + }, + irregularStatistic (time) { + + } } } </script> @@ -336,16 +401,16 @@ font-weight: bold; } } - .rank-list{ + .rank-list { padding: 10px 0; - .rank-item{ + .rank-item { height: 36px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #666; - .rank-index{ + .rank-index { width: 20px; height: 20px; line-height: 20px; @@ -354,8 +419,8 @@ border-radius: 50%; text-align: center; } - .name{ - width:200px; + .name { + width: 200px; } } } -- Gitblit v1.8.0