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

import * as echarts from '../../../../ec-canvas/echarts';
import {commonDemandCountByCategory, countByCategory, 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: 1
        }, {
            label: '共性需求',
            value: 2
        }],
        tabValue: 1
    },
    lifetimes: {
        ready() {
            this.getData()
        }
    },
    methods: {
        tabChange({detail}) {
            this.setData({
                tabValue: this.data.tabList[detail].value
            })
            this.getData()
        },
        getData() {
            this.selectComponent('#requirementAnalysis').init((canvas, width, height, dpr) => {
                chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // 像素比
                });
                canvas.setChart(chart);

                let params = {
                    monthTime: 12
                }
            
                if (this.data.tabValue === 1) {
                    countByCategory(params).then(({data}) => {
                        data = data.map(item => {
                            return {
                                name: item.categoryName,
                                value: item.cateTotal
                            }
                        });
                        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);
                    })
                } else {
                    commonDemandCountByCategory(params).then(({data}) => {
                        data = data.map(item => {
                            return {
                                name: item.categoryName,
                                value: item.cateTotal
                            }
                        });
                        let color = ["#4F94FF", "#A182FB", "#27D1A7", "#FCBF06", "#FF7108"]

                        var option = {
                            color,
                            tooltip: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    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;
            });
        }
    }
});