From 626cabe8772d16c02584c8b324dd7c45e23002a6 Mon Sep 17 00:00:00 2001 From: zhangxiaoxu123456 <zxx19900626> Date: 星期四, 14 四月 2022 17:36:12 +0800 Subject: [PATCH] 登录接口 --- src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 113 insertions(+), 7 deletions(-) diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue index c3b68d7..e22a85d 100644 --- a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue +++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/workStatistics.vue @@ -4,7 +4,7 @@ <h1>鍔冲姩灏变笟缁熻琛�</h1> <div class="danwei-box">鍗曚綅:浜�</div> <el-table - max-height="640" + :max-height="640" :data="tableData" :header-cell-style="handleheader" stripe @@ -14,14 +14,12 @@ align="center" prop="date" label="鎸囨爣鍚嶇О" - fixed="left" - width="220"> + fixed="left"> </el-table-column> <el-table-column prop="name" align="center" - label="鍘诲勾瀹屾垚" - width="180"> + label="鍘诲勾瀹屾垚"> </el-table-column> <el-table-column prop="address" @@ -91,15 +89,16 @@ <el-table-column prop="address" align="center" - label="褰撳墠瀹屾垚鐜�" - width="160"> + label="褰撳墠瀹屾垚鐜�"> </el-table-column> </el-table> + <div class="laogongJiuyeEcharts" id="laogongJiuyeEcharts"></div> </div> </div> </template> <script> + import nowSize from "../../../../libs/nowSize"; export default { name: "workStatistics", data() { @@ -131,7 +130,111 @@ }] } }, + mounted() { + this.laogongJiuyeEcharts() + }, methods: { + laogongJiuyeEcharts() { + let myEchart = this.$echarts.init(document.getElementById('laogongJiuyeEcharts')) + let option = { + color : ['#FF5151','#51FF5D','#FFD151'], + title: { + text: '鍘嗗勾鍩庨晣灏变笟浜烘暟鍒嗘瀽鍥�', + left: 'center', + top: '8%', + textStyle: { + color: '#FFFFFF', + fontSize: nowSize(30) + }, + }, + tooltip: { + trigger: 'axis' + }, + legend: { + itemWidth: nowSize(30), + itemHeight: nowSize(4), + itemGap: nowSize(50), + right:'2%', + top: 'center', + orient: 'vertical', + textStyle: { + color: '#FFFFFF', + fontSize: nowSize(24), + } + }, + grid: { + top: '15%', + left: '4%', + right: '18%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['2021/4', '2021/5', '2021/6', '2021/7', '2021/8', '2021/9', '2021/10'], + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize:nowSize(24) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + } + }, + yAxis: { + type: 'value', + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize:nowSize(24) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + }, + splitLine: { + show: false + } + }, + series: [ + { + name: '鏂板灏变笟', + type: 'line', + data: [370, 332, 401, 534, 490, 530, 910] + }, + { + name: '澶变笟浜哄憳鍐嶅氨涓�', + type: 'line', + data: [220, 182, 191, 234, 290, 330, 310] + }, + { + name: '灏变笟鍥伴毦浜哄憳鍐嶅氨涓�', + type: 'line', + data: [150, 132, 201, 154, 190, 330, 410] + } + ] + }; + myEchart.setOption(option) + window.addEventListener('resize',function () { + myEchart.resize() + }) + + }, handleheader(data) { return { lineHeight: '0', @@ -203,5 +306,8 @@ line-height: 2.5; } } + .laogongJiuyeEcharts{ + height: calc(100% - 640px - 0.33203125rem /* 85/256 */); + } } </style> -- Gitblit v1.9.1