Laravel插件拓展推荐（1）：ConsoleTVs/Charts

1、安装（最好laravel5.8以上）

composer require consoletvs/charts:6.*

2、注册

ConsoleTVs\Charts\ChartsServiceProvider::class,

3、发布配置文件

php artisan vendor:publish --tag=charts_config

4、创建图表类

官方使用php artisan make:chart {Name} {Library?}方式，目前这个插件支持6种图表，建议全部创建出来

php artisan make:chart Echarts Echarts
php artisan make:chart Chart Chartjs
php artisan make:chart Frappe Frappe
php artisan make:chart C3 C3
php artisan make:chart Highcharts Highcharts
php artisan make:chart Fusioncharts Fusioncharts

5、控制器

use App\Charts\Eharts;
$chart = new Eharts;
$chart->labels(['One', 'Two', 'Three']);//设置坐标轴显示标签
$chart->dataset('左侧名称', 'line', [1, 2, 3, 4]);
$chart->dataset('右侧名称', 'line', collect([1, 2, 3, 4]));
return view('test', ['chart' => $chart]));

6、前台显示

        <div id="app">
            {!! $chart->container() !!}
        </div>
        <script src="https://unpkg.com/vue"></script>
        <script>
            var app = new Vue({
                el: '#app',
            });
        </script>
        <script src=https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts-en.min.js charset=utf-8></script>
        {!! $chart->script() !!}
 

附：实际情况中，我们需要查看不同种类的图表，因此在此附上实现方法

1、前台表格可选择图表风格和类型（provider图表风格，type图表类型）

<table class="table table-bordered">
   <tr>
       <th>
           图表风格
       </th>
       <th colspan="3">
           图表种类
       </th>
   </tr>
   <tr>
       <td>Chart</td>
       <td><a href="?provider=Chart&type=bar" >柱状图</a></td>
       <td><a href="?provider=Chart&type=line" >折线图</a></td>
       <td><a href="?provider=Chart&type=pie" >饼状图</a></td>
   </tr>
   <tr>
       <td>Echart</td>
       <td><a href="?provider=Echart&type=bar" >柱状图</a></td>
       <td><a href="?provider=Echart&type=line" >折线图</a></td>
       <td><a href="?provider=Echart&type=pie" >饼状图</a></td>
   </tr>
   <tr>
       <td>Highcharts</td>
       <td><a href="?provider=Highcharts&type=bar" >柱状图</a></td>
       <td><a href="?provider=Highcharts&type=line" >折线图</a></td>
       <td><a href="?provider=Highcharts&type=pie" >饼状图</a></td>
   </tr>
   <tr>
       <td>Frappe</td>
       <td><a href="?provider=Frappe&type=bar" >柱状图</a></td>
       <td><a href="?provider=Frappe&type=line" >折线图</a></td>
       <td><a href="?provider=Frappe&type=pie" >饼状图</a></td>
   </tr>
   <tr>   <td>Fusioncharts</td>
       <td><a href="?provider=Fusioncharts&type=bar" >柱状图</a></td>
       <td><a href="?provider=Fusioncharts&type=line" >折线图</a></td>
       <td><a href="?provider=Fusioncharts&type=pie" >饼状图</a></td>
   </tr>
</table>

2、后台根据前台传过来的provider和type实例化相应图表类

 public function getChart($provider,$type,$dataset)
    {
        
        if ($provider == 'Echart'){
            $chart = new Echart();
        }
        if ($provider == 'Frappe'){
            $chart = new Frappe();
        }
        if ($provider == 'Fusioncharts'){
            $chart = new Fusioncharts();
        }
        if ($provider == 'Highcharts'){
            $chart = new Highcharts();
        }
        if ($provider == 'Chart'){
            $chart = new Chart();
        }
        
        if ($type == 'pie'){
            $chart->labels($labels);
            $chart->dataset('xxx', 'pie', $dataset);
        }
        if ($type == 'bar'){
            $chart->labels($labels);
            $chart->dataset('xxx', 'bar', $dataset);

        }
        if ($type == 'line'){
            $chart->labels($labels);
            $chart->dataset('xxx', 'line', $dataset);
        }

 
        return $chart;

    }