漏刻有时数据可视化Echarts组件开发(27):盒须图(箱线图)前后端php交互的实战案例

简介: 漏刻有时数据可视化Echarts组件开发(27):盒须图(箱线图)前后端php交互的实战案例


Boxplot 中文可以称为『箱形图』、『盒须图』、『盒式图』、『盒状图』、『箱线图』,是一种用作显示一组数据分散情况资料的统计图。它能显示出一组数据的最大值、最小值、中位数、下四分位数及上四分位数。


开发难点

二维数组结构

需要将数据转为如下的二维数据结构,增加了后端开发的难度。

      source: [
                [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
                [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
                [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
                [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
                [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
            ]

PHP后端数据API

  1. 1.先按照名称分组筛选对应的X轴数据;
  2. 2.按照名称二次循环筛选对应的数据,并以数组的形式输出;
  3. 3.增加对应的筛选条件,实现搜索查询的功能开发;
    /*价格-盒须图*/
    public function getBoxplot()
    {
        global $db;
        dbc();
        @$cat_name = get_param("cat_name");
        @$fromTime = get_param("fromTime");
        @$toTime = get_param("toTime");
        $sql = "select cat_name FROM " . $db->table('product') . " WHERE 1";
        if ($cat_name != "") {
            $sql .= " AND cat_name = '" . $cat_name . "'";
        }
        if ($fromTime != "") {
            $sql .= " AND DATE_FORMAT(FROM_UNIXTIME(pro_month),'%Y-%m-%d') >= '" . $fromTime . "'";
        }
        if ($toTime != "") {
            $sql .= " AND DATE_FORMAT(FROM_UNIXTIME(pro_month),'%Y-%m-%d') <= '" . $toTime . "'";
        }
        $sql .= " GROUP BY cat_name";
        $row = $db->queryall($sql);
        //求中位数;
        foreach ($row as $k => $v) {
            $sql_l = "select pro_price from " . $db->table('product');
            $sql_l .= " WHERE cat_name = '" . $v['cat_name'] . "'";
            $row_l = $db->queryall($sql_l);
            //循环数组;
            $data = array();
            for ($i = 0; $i < count($row_l); $i++) {
                $data[] = $row_l[$i]['pro_price'];
            }
            //求中位数;
            $row[$k]["price"] = $data;
        }
        //输出数据;
        die(json_encode_lockdata($row));
    }

盒须图封装函数

function getBox(dataName, dataList, id) {
    var myChart = echarts.init(document.getElementById(id));
    var option = {
        dataset: [
            {source: dataList},
            {
                transform: {
                    type: 'boxplot',
                    config: {
                        itemNameFormatter: function (params) {
                            //console.log(params.value);
                            return dataName[params.value];
                        }
                    }
                }
            },
            {
                fromDatasetIndex: 1,
                fromTransformResult: 1
            }
        ],
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            min: function (value) {
                return value.min - 200;
            },
            splitArea: {
                show: true
            }
        },
        series: [
            {
                name: 'boxplot',
                type: 'boxplot',
                datasetIndex: 1,
                tooltip: {
                    formatter: function (param) {
                        //console.log(param);
                        return [
                            //'Product: ' + param.name + ' ',
                            'Max: ' + param.data[5],
                            'Q3: ' + param.data[4],
                            'Median: ' + param.data[3],
                            'Q1: ' + param.data[2],
                            'Min: ' + param.data[1]
                        ].join('<br/>');
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

难点分析

显示X轴名称

            {
                transform: {
                    type: 'boxplot',
                    config: {
                        itemNameFormatter: function (params) {
                            //console.log(params.value);
                            return dataName[params.value];
                        }
                    }
                }
            }

坐标轴自动计算显示间距

min: function (value) {
                return value.min - 200;
            },

鼠标滑过提示框

                tooltip: {
                    formatter: function (param) {
                        //console.log(param);
                        return [
                            //'Product: ' + param.name + ' ',
                            'Max: ' + param.data[5],
                            'Q3: ' + param.data[4],
                            'Median: ' + param.data[3],
                            'Q1: ' + param.data[2],
                            'Min: ' + param.data[1]
                        ].join('<br/>');
                    }


@漏刻有时


相关文章
|
4月前
|
设计模式 数据库连接 PHP
PHP中的设计模式:提升代码的可维护性与扩展性在软件开发过程中,设计模式是开发者们经常用到的工具之一。它们提供了经过验证的解决方案,可以帮助我们解决常见的软件设计问题。本文将介绍PHP中常用的设计模式,以及如何利用这些模式来提高代码的可维护性和扩展性。我们将从基础的设计模式入手,逐步深入到更复杂的应用场景。通过实际案例分析,读者可以更好地理解如何在PHP开发中应用这些设计模式,从而写出更加高效、灵活和易于维护的代码。
本文探讨了PHP中常用的设计模式及其在实际项目中的应用。内容涵盖设计模式的基本概念、分类和具体使用场景,重点介绍了单例模式、工厂模式和观察者模式等常见模式。通过具体的代码示例,展示了如何在PHP项目中有效利用设计模式来提升代码的可维护性和扩展性。文章还讨论了设计模式的选择原则和注意事项,帮助开发者在不同情境下做出最佳决策。
|
5月前
|
数据可视化
为什么Echarts数据可视化大屏不好做?
为什么Echarts数据可视化大屏不好做?
|
5月前
|
数据可视化 JavaScript
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
|
5月前
|
数据可视化 前端开发 JavaScript
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
【Echarts大屏】数据可视化大屏展示页(附原码一键复制)
|
5月前
|
数据可视化
动漫形象平台 Echarts数据可视化大屏
动漫形象平台 Echarts数据可视化大屏
|
PHP
php入门到精通精典案例教程
php入门到精通精典案例教程:http://www.erdangjiade.com/php
1270 0
|
2月前
|
前端开发 关系型数据库 MySQL
PHP与MySQL动态网站开发实战指南####
【10月更文挑战第21天】 本文将深入浅出地探讨如何使用PHP与MySQL构建一个动态网站,从环境搭建到项目部署,全程实战演示。无论你是编程新手还是希望巩固Web开发技能的老手,都能在这篇文章中找到实用的技巧和启发。我们将一起探索如何通过PHP处理用户请求,利用MySQL存储数据,并最终呈现动态内容给用户,打造属于自己的在线平台。 ####
58 0
|
1月前
|
存储 关系型数据库 MySQL
PHP与MySQL动态网站开发:从基础到实践####
本文将深入探讨PHP与MySQL的结合使用,展示如何构建一个动态网站。通过一系列实例和代码片段,我们将逐步了解数据库连接、数据操作、用户输入处理及安全防护等关键技术点。无论您是初学者还是有经验的开发者,都能从中获益匪浅。 ####
|
2月前
|
安全 关系型数据库 MySQL
PHP与MySQL动态网站开发实战指南####
——深入探索LAMP栈下的高效数据交互与处理技巧 ####
|
1月前
|
关系型数据库 MySQL PHP
php实现一个简单的MySQL分页
通过本文的详细步骤和代码示例,我们实现了一个简单的PHP MySQL分页功能。主要步骤包括计算总记录数、设置分页参数、查询当前页的数据以及生成分页链接。这种分页方式适用于大多数Web应用,能够有效提升用户体验和页面响应速度。
28 4