hz_crm_web/src/views/dataReport_manage/components/abnormalRenewalChart.vue

<template>
    <div class="abnormal-renewal-chart-wrap">
        <div class="top-wrap">
            <el-date-picker
                v-model="date"
                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="">
                <span style="display:inline-block;position: relative;top:-3px;left:3px">数据表</span>
            </div>
        </div>
        <div class="chart-main-wrap">
            <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:'',
            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);
                    }
                    
                })
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.abnormal-renewal-chart-wrap{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 30px;
    .top-wrap{
        display: flex;
        justify-content: space-between;
    }
    .chart-box{
        margin: 0 auto;
        width: 80%;
        height: 500px;
    }
}
</style>