Echarts-PHP 包推薦

請多多指教發表於2021-12-17
EchartsPHP

Echarts-PHP 包推薦

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

最終效果

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

背景

  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…看不懂，繼續排查

Echarts-PHP 包推薦

    1. 使用 postman 請求下看看

Echarts-PHP 包推薦

    1. 引入的 JS 好像有點問題

Echarts-PHP 包推薦

    1. 按 EchartS （如下截圖）官方文件給出的地址，直接粗暴的給 src/Config.php 中的 $src 做個替換為
      $src = "https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js";
      Echarts-PHP 包推薦
    1. 瀏覽器重新整理，報錯換了一個，如下：

Echarts-PHP 包推薦

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

Echarts-PHP 包推薦

    1. 發現是 composer 包中 json_encode 導致，那需要一個空物件才對。還是src/Config.php 檔案需要調整。如圖增加兩行程式碼
          $option = str_replace("[]","{}",$option);
   $option = str_replace("null","{}",$option);

Echarts-PHP 包推薦

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

Echarts-PHP 包推薦

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

Echarts-PHP 包推薦

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

Echarts-PHP 包推薦

  • 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 協議》，轉載必須註明作者和本文連結

相關文章