epmet-work-mp/pages/statistics/modules/HotlineComplaints/HotlineComplaints.js

import * as echarts from '../../../../ec-canvas/echarts';
import {event12345Group} from "../../../../utils/statisticsApi";

var chart;

function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素比
    });
    canvas.setChart(chart);


    return chart;
}

const formatTime = date => {
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    return [year, month, day].map(formatNumber).join('-')
}
const formatNumber = n => {
    n = n.toString()
    return n[1] ? n : '0' + n
}
Component({
    properties: {
        typeCondition: {
            type: Number,
            value: 0,
            observer(val) {
                console.log(val, 11)
                this.getData()
            }
        }
    },
    data: {
        ec: {
            lazyLoad: true
            // onInit: initChart
        },
        tabList: [{
            label: "问题突出类别",
            value: 'problem'
        }, {
            label: '行业领域分析',
            value: 'business'
        }],
        tabValue: 'problem'
    },
    lifetimes: {
        ready() {
            this.getData()
        }
    },
    methods: {
        tabChange({detail}) {
            this.setData({
                tabValue: this.data.tabList[detail].value
            })
            this.getData()
        },
        getData() {
            this.selectComponent('#hotlineComplaints').init((canvas, width, height, dpr) => {
                chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // 像素比
                });
                canvas.setChart(chart);

                let params = {
                    startTime: '',
                    endTime: '',
                    queryType: this.data.tabValue
                }
                let now = new Date();
                if (this.data.typeCondition === 0) {
                    params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 1))
                }
                if (this.data.typeCondition === 1) {
                    params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 1));
                }
                if (this.data.typeCondition === 2) {
                    params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 2));
                }
                if (this.data.typeCondition === 3) {
                    params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 5));
                }
                if (this.data.typeCondition === 4) {
                    params.startTime = formatTime(new Date(now.getFullYear(), now.getMonth() - 11));
                }

                if (this.data.typeCondition === 1) {
                    params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59))
                } else {
                    params.endTime = formatTime(new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59))
                }
                event12345Group(params).then(({data}) => {
                    data = data.map(item => {
                        return {
                            name: item.name,
                            value: item.blueNum
                        }
                    });
                    let color = ["#4F94FF", "#A182FB", "#27D1A7", "#FCBF06", "#FF7108"]

                    var option = {
                        color,
                        tooltip: {
                            show: true,
                            textStyle: {
                                color: '#000',
                                fontSize: 14
                            },
                            formatter(params) {
                                // console.log(params)
                                if (params.name === '') {
                                    return '';
                                }
                                return `${params.name} : ${params.percent}%`;
                            },
                        },
                        series: [
                            {
                                name: '',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                center: ['50%', '50%'], // 修改为居中
                                avoidLabelOverlap: true,
                                label: {
                                    color: '#333333',
                                    alignTo: 'labelLine',
                                    formatter: '{num|{c}}\n{name|{b}}',
                                    minMargin: 5,
                                    edgeDistance: 10,
                                    lineHeight: 15,
                                    rich: {
                                        num: {
                                            fontSize: 17,
                                            color: '#333333'
                                        },
                                        zb: {
                                            fontSize: 14,
                                            color: '#333333'
                                        }
                                    }
                                },
                                labelLine: {
                                    length: 15,
                                    length2: 0,
                                    maxSurfaceAngle: 80
                                },
                                data: data
                            }
                        ]
                    };
                    chart.setOption(option);
                })
                return chart;
            });
        }
    }
});