Echarts PHP接口

最新推荐文章于 2024-11-13 11:09:17 发布
qq271757232
最新推荐文章于 2024-11-13 11:09:17 发布
阅读量2.1k
点赞数
CC 4.0 BY-SA版权
分类专栏： Chart
本文链接：https://blog.youkuaiyun.com/qq271757232/article/details/17298713
Chart 专栏收录该内容
0 篇文章
订阅专栏
本文介绍了一个用于展示Echarts图表的PHP函数，该函数能够处理数据并生成相应的Echarts配置，包括图例、坐标轴和系列。通过模块加载器配置Echarts路径，实现动态加载并使用Echarts进行图表绘制。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<?php

/**
 * @author chenliujin <liujin.chen@qq.com>
 * @since 2013-12-13
 */
class Echarts
{

    /**
     * @author chenliujin <liujin.chen@qq.com>
     * @since 2013-12-12
     */
    public static function show($id, array $data)
    {
        if (empty($data)) {
            $data = array(
                'legend' => array(
                    'data' => array('-')
                ),
                'xaxis' => array(
                    'type' => 'category',
                    'boundaryGap' => 'false',
                    'data' => array('')
                ),
                'series' => array(
                    array(
                        'name' => '-',
                        'type' => 'line',
                        'itemStyle' => "{normal: {areaStyle: {type: 'default'}}}",
                        'data' => array()
                    ),
                )
            );
        }

        foreach ($data as $key => $value) {
            switch ($key) {
                case 'legend':
                    foreach ($value as $k => $v) {
                        switch ($k) {
                            case 'data':
                                $legend = $k . ':' . json_encode($v);
                                break;
                        }
                    }
                    break;
                case 'xaxis':
                    foreach ($value as $k => $v) {
                        switch ($k) {
                            case 'type':
                                $xaxis[] = $k . ":'" . $v . "'";
                                break;
                            case 'boundaryGap':
                                $xaxis[] = $k . ':' . $v;
                                break;
                            case 'data':
                                $xaxis[] = $k . ':' . json_encode($v);
                                break;

                        }
                    }
                    $xaxis = '{' . implode(', ', $xaxis) . '}';
                    break;
                case 'series':
                    foreach ($value as $list) {
                        $tmp = array();
                        foreach ($list as $k => $v) {
                            switch ($k) {
                                case 'name':
                                case 'type':
                                    $tmp[] = $k . ":'" . $v . "'";
                                    break;
                                case 'itemStyle':
                                    $tmp[] = $k . ':' . $v;
                                    break;
                                case 'data':
                                    $tmp[] = $k . ':' . json_encode($v);
                            }
                        }
                        $series[] = '{' . implode(', ', $tmp) . '}';
                    }
                    $series = implode(', ', $series);
                    break;
            }
        }

        $script = <<<eof
            <script type="text/javascript">
            // Step:3 conifg ECharts's path, link to echarts.js from current page.
            // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
            require.config({
                paths:{
                    echarts:'./js/echarts',
                    'echarts/chart/bar' : './js/echarts',
                    'echarts/chart/line': './js/echarts'
                }
            });

            // Step:4 require echarts and use it in the callback.
            // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
            require(
                [
                    'echarts',
                    'echarts/chart/bar',
                    'echarts/chart/line'
                ],
                function(ec) {
                    var myChart = ec.init(document.getElementById('$id'));
                    var option = {
                        title : {
                            text: '',
                            subtext: ''
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            $legend
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : true,
                                dataView : {readOnly: false},
                                magicType:['line', 'bar'],
                                restore : true
                            }
                        },
                        calculable : true,
                        xAxis : [$xaxis],
                        yAxis : [{type : 'value'}],
                        series : [$series]
                    };

                    myChart.setOption(option);
                }
            );
            </script>
eof;

        echo $script;
    }

}