续约异常统计图表

src/api/modules/statisticApi.js

@@ -253,6 +253,10 @@ const dataMainInterface = {
 	unusualRenewalCustomStatistic: params => {
 		return http.get('/statistic_report/report/unusual_renew_company',params)
 	},
+	//续约异常客户统计图表数据
+	unusualRenewalCustomStatisticChartData:params=>{
+		return http.get('/statistic_report/report/unusual_renew_company/chart',params)
+	},
 
 	/**
 	 * 新增客户列表

src/views/dataReport_manage/components/abnormalRenewalChart.vue

@@ -3,11 +3,13 @@
         <div class="top-wrap">
             <el-date-picker
                 v-model="date"
-                type="daterange"
+                type="monthrange"
                 range-separator="至"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 :clearable="false"
+                value-format="yyyy-MM"
+                @change="handleDateChange"
             />
             <div style="color:#409EFF;cursor: pointer;" @click="handleClose">
                 <img src="~@/assets/img/icons/changeLang.png" alt="">
@@ -15,22 +17,124 @@
             </div>
         </div>
         <div class="chart-main-wrap">
-            <h2 style="text-align:center;font-size:30px;margin-top:30px">续约异常客户统计图</h2>
-            <div class="chart-box" id="chart-box"></div>
+            <h2 style="text-align:center;font-size:30px;margin:30px 0;">续约异常客户统计图</h2>
+            <div class="chart-box" ref="chartBox"></div>
         </div>
     </div>
 </template>
 
 <script>
+import { dataMainInterface } from '@/api/api.js';
+import { nextTick } from 'vue';
 export default {
     data() {
         return {
-            date:''
+            date:'',
+            myChart:null
         }
     },
+    created() {
+        this.date=[this.$moment().format('YYYY-01'),this.$moment().format('YYYY-MM')]
+    },
+    mounted() {
+        this.getData()
+    },
     methods: {
+        async getData(){
+            const res=await dataMainInterface.unusualRenewalCustomStatisticChartData({
+                StartDate:this.date[0],
+                EndDate:this.date[1]
+            })
+            if(res.Ret===200){
+                this.$nextTick(()=>{
+                    this.renderChart(res.Data)
+                })
+            }
+        },
+        handleDateChange(){
+            this.getData()
+        },
         handleClose(){
             this.$emit('close')
+        },
+        renderChart(data){
+            const arr=data.List||[]
+
+            const options={
+				legend: {
+					name: [],
+                    icon:'circle',
+					left: 'center',
+				},
+				tooltip: {
+                    formatter:function(params){
+                        let str=`${params.name}<br>
+                        <span style='display:inline-block;width:15px;height:15px;background:#FDB863;border-radius:100%'></span>
+                        ${params.seriesName}&nbsp;&nbsp;${params.value}`
+
+                        return str
+                    }
+                },
+				title: {
+					text: '',
+				},
+				color: ['#FDB863'],
+				textStyle: {
+					fontSize: 12,
+				},
+				xAxis: {
+					type: '',
+					data: [],
+					// /* x轴文字 */
+					axisLabel: {
+						show: true,
+						rotate: '40', //字体倾斜
+						textStyle: {
+							color: '#999', //更改坐标轴文字颜色
+							fontSize: 12, //更改坐标轴文字大小
+						},
+					},
+				},
+				yAxis: {
+					type: 'value',
+					minInterval:1,
+                    position: 'left',
+                    name:'家',
+                    splitLine:{
+                        lineStyle:{
+                            type:'dotted'
+                        }
+                    }
+				},
+				series: [
+                    {
+                        data:[],
+                        name:'续约异常客户合计',
+                        type:'bar',
+                        yAxisIndex: 0,
+                    }
+                ],
+			}
+
+            arr.forEach(item => {
+                options.xAxis.data.push(item.Date)
+                options.series[0].data.push(item.CompanyNum)
+            });
+
+            console.log(options);
+
+            const chart = this.$refs.chartBox;
+            if(chart){
+                this.$nextTick(()=>{
+                    if(!this.myChart){
+                        this.myChart = echarts.init(chart);
+                        this.myChart.setOption(options);
+                    }else{
+                        this.myChart.setOption(options,true);
+                    }
+                    
+                })
+            }
         }
     },
 }
@@ -49,5 +153,10 @@ export default {
         display: flex;
         justify-content: space-between;
     }
+    .chart-box{
+        margin: 0 auto;
+        width: 80%;
+        height: 500px;
+    }
 }
 </style>

src/views/dataReport_manage/statistic/abnormalRenewal.vue

@@ -81,7 +81,7 @@
                 </table>
             </div>
         </div>
-        <abnormalRenewalChart v-show="showChart" @close="showChart=false"/>
+        <abnormalRenewalChart v-if="showChart" @close="showChart=false"/>
     </div>
 </template>