Echarts-PHP 包推薦

Echarts-PHP 包推薦

github 地址：github.com/hisune/Echarts-PHP/issu...

最終效果

• 我在完全沒有寫前端程式碼的情況下，搞出來了截圖中的圖表
  

背景

1. 公司前後端分離，個人一直在用 Laravel 寫後端介面，對前端東西都忘了差不多了。最近需要給專案加個資料日報（每日郵件提醒）功能，開始上手！
2. 小功能，不想麻煩前端。但是普通（不加樣式的）的 html 表格感覺有點 low，考慮直接使用 chart 圖表進行處理
3. 百度ing… 在 Laravel 社群 以及 Github 、Gitee 中查了些 PHP-Chart 包相關的內容，其中包括 consoletvs/charts ，Echarts-PHP ，和其他的兩個（此處就不提了），並進行了系列嘗試
4. 過程就不提了，我得到的最終結果：Echarts-PHP （對於我自己來說，勿噴）

原因

• 1.可直接看 echarts.apache.org/ 文件進行處理
• 2.支援非常多的圖表
• 3.前端經常用，有問題的話，可以問前端

安裝

composer require “hisune/echarts-php”

開始上手

• 自己搞個測試路由和方法。簡單的柱狀圖，沒問題，此出不再展示。

• 開始多列柱狀圖，程式碼如下：

  use Hisune\EchartsPHP\ECharts;
  ···
        //在自己的測試方法中處理
        $chart = new ECharts();
        $chart->legend = [];
        $chart->tooltip = [];
        $chart->dataset->dimensions = ['product', '2015', '2016', '2017'];
        $chart->dataset->source = [
            [
                'product' => 'A',
                2015 => 43.3,
                2016 => 85.8,
                2017 => 93.7
            ],
            [
                'product' => 'B',
                2015 => 43.3,
                2016 => 85.8,
                2017 => 93.7
            ],
            [
                'product' => 'C',
                2015 => 43.3,
                2016 => 85.8,
                2017 => 93.7
            ],
            [
                'product' => 'D',
                2015 => 43.3,
                2016 => 85.8,
                2017 => 93.7
            ]
        ];
        $chart->xAxis = ['type' => 'category'];
        $chart->yAxis = [];
        $chart->series = [
            [
                'type' => 'bar',
            ],
            [
                'type' => 'bar',
            ],
            [
                'type' => 'bar',
            ],
        ];
  
        $a =  $chart->render('1234');//1234是 div 的 id，可自行更換

• 按 Github 提示 + Echart 官方文件，在瀏覽器訪問測試介面，按文件來說，應該會出一個柱狀圖，但是我頁面上並沒有出現

  排查

• 1. F12 控制檯可見一個BUG。em…看不懂，繼續排查

• 2. 使用 postman 請求下看看

• 3. 引入的 JS 好像有點問題

• 4. 按 EchartS （如下截圖）官方文件給出的地址，直接粗暴的給 src/Config.php 中的 $src 做個替換為

     $src = "https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js";

     
• 5. 瀏覽器重新整理，報錯換了一個，如下：

• 6. 再此使用 postman 請求測試介面，並對比 Echart 文件，發現 yAxis 不對，是一個空陣列，應該是一個空物件才對。繼續排查 composer 包程式碼

• 7. 發現是 composer 包中 json_encode 導致，那需要一個空物件才對。還是src/Config.php 檔案需要調整。如圖增加兩行程式碼

         $option = str_replace("[]","{}",$option);
        $option = str_replace("null","{}",$option);

• 8. 經過以上處理後，使用postman獲取的內容和Echarts官網給到的一致

• 9.End 瀏覽器請求測試介面，柱狀圖也出來了。NICE！

• 10.再嘗試下其他的圖表，柱狀圖+餅狀圖

• 11.結束

測試程式碼

• 我的測試程式碼如下：

  public function test(Request $request)
    {
        $chart = new ECharts();
        $chart->legend = [];
        $chart->tooltip = [];
        $chart->dataset->dimensions = ['product', '2015', '2016', '2017'];
  
        $chart->dataset->source = [
            [
                'product' => 'A',
                2015 => 43.3,
                2016 => 85.8,
                2017 => 93.7
            ],
            [
                'product' => 'B',
                2015 => 43.3,
                2016 => 85.8,
                2017 => 93.7
            ],
            [
                'product' => 'C',
                2015 => 43.3,
                2016 => 85.8,
                2017 => 93.7
            ],
            [
                'product' => 'D',
                2015 => 43.3,
                2016 => 85.8,
                2017 => 93.7
            ]
        ];
        $chart->xAxis = ['type' => 'category'];
        $chart->yAxis = [];
        $chart->series = [
            [
                'type' => 'bar',
            ],
            [
                'type' => 'bar',
            ],
            [
                'type' => 'bar',
            ],
        ];
  
        $a = $chart->render('1234');
        $chart_b = new ECharts();
        $chart_b->title = [
            'text' => 'Referer of a Website',
            'subtext' => 'Fake Data',
            'left' => 'center'
        ];
        $chart_b->tooltip = [
            'trigger' => 'item'
        ];
        $chart_b->legend = [
            'orient' => 'vertical',
            'left' => 'left'
        ];
  
        $chart_b->series = [
            'name' => 'Access From',
            'type' => 'pie',
            'radius' => '50%',
            'data' => [
                [
                    'value' => 1048,
                    'name' => 'Search Engine',
                ],
                [
                    'value' => 735,
                    'name' => 'Direct',
                ],
                [
                    'value' => 580,
                    'name' => 'Email',
                ],
                [
                    'value' => 484,
                    'name' => 'Union Ads',
                ],
                [
                    'value' => 300,
                    'name' => 'Video Ads',
                ]
            ],
  
            'emphasis' => [
                'itemStyle' => [
                    'shadowBlur' => 10,
                    'shadowOffsetX' => 0,
                    'shadowColor' => 'rgba(0, 0, 0, 0.5)'
                ]
            ],
        ];
  
        $b = $chart_b->render('4321');
        echo $a . $b;
    }

本作品採用《CC 協議》，轉載必須註明作者和本文連結