prsx-crm/salesPanel/dataOverview/Clue/YXXSWGJTSFX.js

const _Http = getApp().globalData.http;
import * as echarts from '../../ec-canvas/echarts';
Component({
    options: {
        addGlobalClass: true
    },
    lifetimes: {
        attached: function () {
            getApp().globalData.Language.getLanguagePackage(this)
            this.setData({
                "content.dataid": wx.getStorageSync('userMsg').userid,
                "content.username": wx.getStorageSync('userMsg').name,
            })
        }
    },
    data: {
        year: new Date().getFullYear().toString(),
        "content": {
            dateType: "15-30天",
            enddate: new Date().toISOString().split('T')[0],
            where: {},
            pageNumber: 1,
            pageSize: 20,
            pageTotal: 1
        }
    },
    methods: {
        async getList(init = false) {
            if (init.detail != undefined) init = init.detail;
            let content = this.data.content
            const {
                dataid,
                type,
                username,
                isleave
            } = getCurrentPages()[getCurrentPages().length - 1].data;
            if (content.dataid != dataid || content.type != type || isleave != isleave) init = true
            content.dataid = dataid;
            content.type = type;
            content.username = username;
            content.where.isleave = isleave;
            if (init) {
                content.pageNumber = 1;
                content.pageSize = 20;
            }
            if (content.pageNumber > content.pageTotal) return;
            _Http.basic({
                "id": 20231015130604,
                content
            }).then(res => {
                console.log("有效线索未跟进天数分析", res)
                this.selectComponent('#ListBox').RefreshToComplete();
                if (res.code != '1') return wx.showToast({
                    title: res.data,
                    icon: "none"
                })
                this.setData({
                    list: res.pageNumber == 1 ? res.data : this.data.list.concat(res.data),
                    "content.pageNumber": res.pageNumber + 1,
                    "content.pageSize": res.pageSize,
                    "content.pageTotal": res.pageTotal,
                    "total": res.total,
                })
                if (init) this.initChart(res.data[0].trend)
            })
        },
        initChart(data) {
            const colors = ['#6395FA'],
                getMapText = getApp().globalData.Language.getMapText;
            let that = this,
                countDown = null;

            function changeDateType(params) {
                clearTimeout(countDown)
                countDown = setTimeout(() => {
                    let data = that.data.list[0].trend.find(v => getMapText(v.key) === getMapText(params.name));
                    console.log("data", data)
                    if (data.key === that.data.content.dateType) return;
                    that.setData({
                        "content.dateType": data.key,
                        "content.pageNumber": 1,
                    })
                    that.getList();
                }, 200)
            }
            let legend = [getMapText('线索数')],
                series = [{
                    name: getMapText('线索数'),
                    type: 'bar',
                    data: data.map(v => v.value),
                    smooth: true
                }]
            const option = {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    confine: true, // Ensure tooltip stays within the chart area
                    formatter: function (params) {
                        changeDateType(params[0])
                        return params.map((item, index) =>
                            `${index === 0 ? item.axisValue + '\n' : ''}${item.marker}${item.seriesName}: ${item.value}`
                        ).join('\n');
                    },
                    textStyle: {
                        fontSize: 10, // Reduced font size
                        lineHeight: 14 // Adjusted line height for smaller tooltip height
                    }
                },
                legend: {
                    data: legend,
                    left: 'left' // Display legend on the left
                },
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: data.map(v => getMapText(v.key)),
                    axisLabel: {
                        interval: 0,
                        rotate: 45
                    }
                }],
                yAxis: [{
                    type: 'value',
                    position: 'left',
                    axisLine: {
                        show: true,
                    },
                    axisLabel: {
                        formatter: '{value}'
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed' // Dashed grid lines for better readability
                        }
                    }
                }],
                series: series.map(item => ({
                    ...item,
                    label: {
                        show: true,
                        position: 'inside', // Display the label inside the bar
                        formatter: '{c}', // Show the value of the bar
                        fontSize: 10, // Adjust font size for better readability
                        color: '#FFFFFF' // Set font color to white
                    }
                }))
            };
            this.chartComponent = this.selectComponent('#mychart');
            this.chartComponent.init((canvas, width, height, dpr) => {
                const chart = echarts.init(canvas, null, {
                    width,
                    height,
                    devicePixelRatio: dpr
                });
                chart.setOption(option);
                return chart;
            });
        },
        changeDate({
            detail
        }) {
            this.setData({
                "content.enddate": detail
            })
            this.getList(true)
        },
    }
})