From 3c12a76496473e28d548c1628a9723c6a966cbe6 Mon Sep 17 00:00:00 2001 From: 付延余 <f-yanyu@outlook.com> Date: 星期三, 13 四月 2022 18:43:01 +0800 Subject: [PATCH] 其他业务 --- src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue | 122 +++++++++++++++++++++++++++++++++++++++- 1 files changed, 119 insertions(+), 3 deletions(-) diff --git a/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue b/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue index dfaae68..b3ea46a 100644 --- a/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue +++ b/src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue @@ -6,11 +6,12 @@ :before-close="handleClose"> <div class="zhigongshebaoEcharts" ref="zhigongshebaoEcharts"></div> </el-dialog> - </div> </template> <script> + import echarts from "echarts/lib/echarts"; + import nowSize from '../../../libs/nowSize' export default { name: "zhigongshebaoForm", data() { @@ -21,6 +22,110 @@ methods: { init() { this.dialogVisible = true + this.$nextTick(() => { + this.zhigongshebaoEcharts() + }) + }, + zhigongshebaoEcharts() { + let myEchart = this.$echarts.init(this.$refs.zhigongshebaoEcharts) + let option = { + color : ['#FF5151','#51FF5D','#FFD151'], + title: { + text: '杩戜竴骞村叏甯備紒涓氳亴宸ュ吇鑰佷繚闄╁弬淇濅汉鏁拌秼鍔垮浘', + left: 'center', + top: '5%', + textStyle: { + color: '#FFFFFF', + fontSize: nowSize(30) + }, + }, + tooltip: { + trigger: 'axis' + }, + legend: { + data: ['鎬绘暟', '鍦ㄨ亴鑱屽伐', '绂婚��浼�'], + itemWidth: nowSize(30), + itemHeight: nowSize(4), + itemGap: nowSize(20), + right:'8%', + top: '5%', + textStyle: { + color: '#FFFFFF', + fontSize: nowSize(24), + } + }, + grid: { + top: '10%', + left: '3%', + right: '5%', + bottom: '6%', + 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', + stack: 'Total', + 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() + }) }, handleClose() { this.dialogVisible = false @@ -42,14 +147,17 @@ height: 4.375rem; } .el-icon-close:before { - content: url(../../../assets/images/businessPolicy/dialogClose@2x.png); + content: ''; + display: inline-block; width: 0.1875rem /* 48/256 */; height: 0.1875rem; + background:url(../../../assets/images/businessPolicy/dialogClose@2x.png) no-repeat center; background-size: 100% 100%; + z-index: 9999; } .el-dialog__headerbtn{ position: absolute; - top: 0.3125rem /* 80/256 */; + top: 0.234375rem /* 60/256 */; right: 0.3125rem /* 80/256 */; } .el-dialog__header { @@ -74,3 +182,11 @@ } } </style> + +<style lang="scss" scoped> + .zhigongshebaoEcharts{ + width:calc(100% - 0.15625rem /* 40/256 */); + height: 3.75rem /* 960/256 */; + margin: 0.234375rem /* 60/256 */ auto 0; + } +</style> -- Gitblit v1.9.1