uni-app：实现页面效果4（echarts数据可视化）

效果

代码

这样写会发现在手机端无法正常运

现改用renderjs进行重写

后端代码

 //查询销售看板需要使用的数据
    public function select_sale_ekanbaninfo(){
        $yesterday = strtotime('-1 day', strtotime(date('Y-m-d')));//获得昨天的时间戳
        $today = strtotime(date('Y-m-d')); // 获取当前日期的时间戳
        $data['today'] = $today;
        // 获取本周开始和结束时间戳
        $thisWeekStart = strtotime('this week', $today);
        $thisWeekEnd = strtotime('next week', $today) - 1;
        // 获取上一周开始和结束时间戳
        $lastWeekStart = strtotime('-1 week', $thisWeekStart);
        $lastWeekEnd = strtotime('-1 week', $thisWeekEnd);
        // 获取本月的开始和结束时间戳
        $thisMonthStart = strtotime('first day of this month', $today);
        $thisMonthEnd = strtotime('last day of this month', $today);
        // 获取上一个月的开始和结束时间戳
        $lastMonthStart = strtotime('first day of last month', $today);
        $lastMonthEnd = strtotime('last day of last month', $today);
        // 获取今年的开始和结束时间戳
        $thisYearStart = strtotime('first day of January', $today);
        $thisYearEnd = strtotime('last day of December', $today);
        // 获取去年的开始和结束时间戳
        $lastYearStart = strtotime('-1 year', $thisYearStart);
        $lastYearEnd = strtotime('-1 year', $thisYearEnd);
        
        // $oneMonthAgo = strtotime('-1 month'); // 获取一个月前的时间戳
        // $oneYearAgo = strtotime('-1 year'); // 获取一年前的时间戳
        // 获取昨天的总金额
        $data['yesterday_allamount'] = Db::table('so_headers_all')
            ->where('creation_date', '>=', $yesterday)
            ->where('creation_date', '<', $today)
            ->sum('order_all_amount');
        //当天的总金额
        $data['daysale_allamount'] = Db::table('so_headers_all')
            ->where('creation_date', '>=', $today) // 筛选 creation_date 大于等于今天的记录
            ->sum('order_all_amount'); // 求和 order_all_amount 列的值
        // 计算日涨幅比率
        if ($data['yesterday_allamount'] == 0) {
             $data['weekchangeRate'] = '无法计算'; 
        }
        else{
            $data['daychangeRate'] = ($data['daysale_allamount'] - $data['yesterday_allamount']) / $data['yesterday_allamount'] * 100;
            if ($data['daychangeRate'] >= 0) {
                $data['daychangeRate'] = '+' . number_format($data['daychangeRate'], 2) . '%';
            } else {
                $data['daychangeRate'] = number_format($data['daychangeRate'], 2) . '%';
            }
        }
        $data['daysale_allamount'] = number_format($data['daysale_allamount']/10000.0, 2); // 格式化结果保留两位小数
        //近一周的总金额
        // 获取本周的总金额
        $data['weeksale_allamount'] = Db::table('so_headers_all')
            ->where('creation_date', '>=', $thisWeekStart)
            ->where('creation_date', '<=', $thisWeekEnd)
            ->sum('order_all_amount');
        // 获取上一周的总金额
        $data['lastweeksale_allamount'] = Db::table('so_headers_all')
            ->where('creation_date', '>=', $lastWeekStart)
            ->where('creation_date', '<=', $lastWeekEnd)
            ->sum('order_all_amount');
        // 计算周涨幅比率
        if ($data['lastweeksale_allamount'] == 0) {
            $data['weekchangeRate'] = '无法计算';
        } else {
            $data['weekchangeRate'] = ($data['weeksale_allamount'] - $data['lastweeksale_allamount']) / $data['lastweeksale_allamount'] * 100;
            if ($data['weekchangeRate'] >= 0) {
                $data['weekchangeRate'] = '+' . number_format($data['weekchangeRate'], 2) . '%';
            } else {
                $data['weekchangeRate'] = number_format($data['weekchangeRate'], 2) . '%';
            }
            // $data['weekchangeRate'] = number_format(($data['weeksale_allamount'] - $data['lastweeksale_allamount']) / $data['lastweeksale_allamount'] * 100, 2) . '%';
        }
        $data['weeksale_allamount'] = number_format($data['weeksale_allamount']/10000.0, 2);
        // 获取本月的总金额
        $data['monthsale_allamount'] = Db::table('so_headers_all')
            ->where('creation_date', '>=', $thisMonthStart)
            ->where('creation_date', '<=', $thisMonthEnd)
            ->sum('order_all_amount');
        // 获取上一个月的总金额
        $data['lastmonthsale_allamount'] = Db::table('so_headers_all')
            ->where('creation_date', '>=', $lastMonthStart)
            ->where('creation_date', '<=', $lastMonthEnd)
            ->sum('order_all_amount');
        // 计算月涨幅比率
        if ($data['lastmonthsale_allamount'] == 0) {
           $data['monthchangeRate'] = '无法计算';
        } else {
            $data['monthchangeRate'] = ($data['monthsale_allamount'] - $data['lastmonthsale_allamount']) / $data['lastmonthsale_allamount'] * 100;
            if ($data['monthchangeRate'] >= 0) {
                $data['monthchangeRate'] = '+' . number_format($data['monthchangeRate'], 2) . '%';
            } else {
                $data['monthchangeRate'] = number_format($data['monthchangeRate'], 2) . '%';
            }
            // $data['monthchangeRate'] = number_format(($data['monthsale_allamount'] - $data['lastmonthsale_allamount']) / $data['lastmonthsale_allamount'] * 100, 2) . '%';
        }
        $data['monthsale_allamount'] = number_format($data['monthsale_allamount']/10000.0, 2);
        // 获取今年的总金额
        $data['yearsale_allamount'] = Db::table('so_headers_all')
            ->where('creation_date', '>=', $thisYearStart)
            ->where('creation_date', '<=', $thisYearEnd)
            ->sum('order_all_amount');
        // 获取去年的总金额
        $data['lastyearsale_allamount'] = Db::table('so_headers_all')
            ->where('creation_date', '>=', $lastYearStart)
            ->where('creation_date', '<=', $lastYearEnd)
            ->sum('order_all_amount');
        // 计算年涨幅
        if ($data['lastyearsale_allamount'] == 0) {
            $data['yearchangeRate'] = '无法计算';
        } else {
            $data['yearchangeRate'] = ($data['yearsale_allamount'] - $data['lastyearsale_allamount']) / $data['lastyearsale_allamount'] * 100;
            if ($data['yearchangeRate'] >= 0) {
                $data['yearchangeRate'] = '+' . number_format($data['yearchangeRate'], 2) . '%';
            } else {
                $data['yearchangeRate'] = number_format($data['yearchangeRate'], 2) . '%';
            }
            // $data['yearchangeRate'] = number_format(($data['yearsale_allamount'] - $data['lastyearsale_allamount']) / $data['lastyearsale_allamount'] * 100, 2) . '%';
        }
        $data['yearsale_allamount'] = number_format($data['yearsale_allamount']/10000.0, 2);
        //查询本周每天的的总金额数
        //获取本周的起始日期和结束日期
        $weekStart = date('Y-m-d', strtotime('this week Monday'));
        $weekEnd = date('Y-m-d', strtotime('this week Sunday'));
        // 构造日期范围数组（从周一到周天）
        $dateRange = [];
        $currentDate = $weekStart;
        while ($currentDate <= $weekEnd) {
            $dateRange[] = $currentDate;
            $currentDate = date('Y-m-d', strtotime($currentDate . ' +1 day'));
        }
        // 查询每天的总金额数
        $result = Db::table('so_headers_all')
            ->field("DATE_FORMAT(FROM_UNIXTIME(creation_date), '%Y-%m-%d') AS date, IFNULL(SUM(order_all_amount), 0) AS total_amount")
            ->whereTime('creation_date', '>=', $weekStart)
            ->whereTime('creation_date', '<=', $weekEnd)
            ->group('date')
            ->select();
        //去掉逗号，转换为
        foreach ($result as &$item) {
            $item['total_amount'] = round(($item['total_amount'] / 10000),2);
        }
        // 构造最终结果数组
        $dateArray = [];
        $totalAmountArray = [];
        foreach ($dateRange as $date) {
            $found = false;
            foreach ($result as $row) {
                if ($row['date'] == $date) {
                    $dateArray[] = $row['date'];
                    $totalAmountArray[] = $row['total_amount'];
                    $found = true;
                    break;
                }
            }
            if (!$found) {
                $weekdayIndex = date('w', strtotime($date));
                $dateArray[] = $date;
                $totalAmountArray[] = 0;
            }
        }
        $data['week_info']['date'] = $dateArray;
        $data['week_info']['total_amount'] = $totalAmountArray;
        

        //查询今年中每月的总金额数据
        // 获取当前年份
        $year = date('Y');
        $result1 = Db::table('so_headers_all')
            ->field("DATE_FORMAT(FROM_UNIXTIME(creation_date), '%Y-%m') AS month, IFNULL(SUM(order_all_amount), 0) AS total_amount")
            ->whereTime('creation_date', '>=', strtotime($year . '-01-01'))
            ->whereTime('creation_date', '<=', strtotime($year . '-12-31'))
            ->group('month')
            ->select();
        //去掉逗号，转换为
        foreach ($result1 as &$item) {
            $item['total_amount'] = round(($item['total_amount'] / 10000),2);
        }
        // 构造最终结果数组
        $dateArray1 = [];
        $totalAmountArray1 = [];
        for ($i = 1; $i <= 12; $i++) {
            //str_pad 函数用于在字符串的左侧（或右侧）填充指定字符，达到指定长度。这里，使用 str_pad 函数在 $i 左侧填充字符 '0'，直到 $i 的长度达到 2。
            $month = str_pad($i, 2, '0', STR_PAD_LEFT);
            $dateArray1[] = $year . '-' . $month;
            $totalAmountArray1[$year . '-' . $month] = 0;
        }
        // 将查询结果填充到对应的月份位置
        foreach ($result1 as $item) {
            $totalAmountArray1[$item['month']] = $item['total_amount'];
        }
        // 最终结果数组
        foreach ($dateArray1 as $date) {
            $finalResult[] = [
                'date' => $date,
                'total_amount' => $totalAmountArray1[$date]
            ];
            $data['month_info']['date'][] = $date;
            $data['month_info']['total_amount'][] = $totalAmountArray1[$date];
        }

        //查询近五年总金额数据
        // 获取当前年份
        $currentYear = date('Y');
        // 构造最终结果数组
        $data['year_info']['date'] = [];
        $data['year_info']['total_amount'] = [];
        
        for ($i = $currentYear - 5; $i <= $currentYear; $i++) {
            $year = (string) $i;
        
            $result = Db::table('so_headers_all')
                ->field("IFNULL(SUM(order_all_amount), 0) AS total_amount")
                ->whereTime('creation_date', '>=', strtotime($year . '-01-01'))
                ->whereTime('creation_date', '<=', strtotime($year . '-12-31'))
                ->find();
            $totalAmount = round(($result['total_amount'] / 10000), 2);
            $data['year_info']['date'][] = $year;
            $data['year_info']['total_amount'][] = $totalAmount;
        }
        echo json_encode($data);
    }

重写代码