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: {
            onInit: initChart
        },
        tabList: [{
            label: "问题突出类别",
            value: 1
        }, {
            label: '行业领域分析',
            value: 2
        }],
        tabValue: ''
    },
    lifetimes: {
        ready() {
            this.getData()
        }
    },
    methods: {
        tabChange(index) {
            this.setData({
                tabValue: this.tabList[index].value
            })
            this.getData()
        },
        getData() {
            let params = {
                startTime: '',
                endTime: ''
            }
            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: '#fff',
                            fontSize: 14
                        },
                        backgroundColor: "#04229a",
                        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);
            })

        }
    }
});