其他业务

付延余

2022-04-13 3c12a76496473e28d548c1628a9723c6a966cbe6

 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>