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;
}