其他业务

付延余

2022-05-20 73a9ae225888adae528d9b06233f65da04d883db

 src/pages/components/qiyezhigongShebao/zhigongshebaoForm.vue

@@ -6,21 +6,142 @@
        :before-close="handleClose">
        <div class="zhigongshebaoEcharts" ref="zhigongshebaoEcharts"></div>
      </el-dialog>

    </div>
</template>

<script>
  import {getSecurityDetailChart} from '@/api/shehuiBaozhang'
    import echarts from "echarts/lib/echarts";
    import nowSize from '../../../libs/nowSize'
    export default {
        name: "zhigongshebaoForm",
        data() {
            return {
                dialogVisible: false,
                xdata:[],
                totalData: [],
                inJobData: [],
                outJobData: []
            }
        },
        methods: {
            init() {
            init(type,area) {
                this.dialogVisible = true
                this.$nextTick(() => {
                    this.getSecurityDetailChart(type,area)
                })
            },
            getSecurityDetailChart(type,area) {
                getSecurityDetailChart({type:type,area:area}).then(res => {
                    if(res.code == 1000) {
                        this.xdata = res.obj.data
                        this.totalData = res.obj.total
                        this.inJobData = res.obj.inJob
                        this.outJobData = res.obj.outJob
                        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: this.xdata,
                        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: this.totalData
                        },
                        {
                            name: '在职职工',
                            type: 'line',
                            data: this.inJobData
                        },
                        {
                            name: '离退休',
                            type: 'line',
                            data: this.outJobData
                        }
                    ]
                };
                myEchart.setOption(option)
                window.addEventListener('resize',function () {
                    myEchart.resize()
                })
            },
            handleClose() {
                this.dialogVisible = false
@@ -42,14 +163,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 +198,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>