效果展示：
实现思路：
下载vue 的 echarts 插件安装
视图引用图表
用接口获取图表数据
第一步 在vue插件安装 npm install echarts -S
在 src/main.js 中随便找个地方 写
import echarts from 'echarts'
Vue.use(echarts)
第二步 页面引用
<template>
<div>
<!-- 统计图容器 -->
<div id="main" style="width: 100%;height: 270px;" />
</div>
</template>
<script>
import {
analyze
} from '../../api/analyze.js'
export default {
data() {
return {
orderType:[],
orderNUm:[],
}
},
mounted() {
//echarts图统计
analyze().then((response) => {
if (response.code == 20000) {
this.orderType = response.orderType
this.orderNUm = response.orderNum
var echarts = require('echarts')
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'))
// 配置参数
var option = {
title: {
text: '数量统计'
},
tooltip: {},
legend: {
data: ['数量统计']
},
xAxis: {
data: this.$data.orderType
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',//line、pie,bar
data: this.$data.orderNUm
}]
}
myChart.setOption(option)
}
})
},
}
}
</script>第三步 后台接口的书写
（由于本人能力有限，count 语句在laravel框架中无法获取到想要数据，所以用了原生sql ,如果哪位大佬看到后给小生点拨一二）
/**
* @param Request $request
* @return \Illuminate\Http\JsonResponse
* 订单来源分析
*/
public function analyze(Request $request){
try {
$data = OrderType::analyze();
//强转数组
foreach ($data as $key=>$val){
$data[$key] = (array)$data[$key];
}
//定义空数组将类型名称与类型数据分开
$orderType =[];
$orderNum =[];
foreach ($data as $k=>$v){
array_push($orderType,$v['order_type']);
array_push($orderNum,$v['order_type_name']);
}
return response()->json(['code'=>20000,'msg'=>'订单类型统计','orderType'=>$orderType,'orderNum'=>$orderNum]);
}catch (\Exception $exception){
return response()->json(['code'=>2001,'msg'=>$exception->getMessage(),'data'=>'']);
}
}
/**
* @return mixed
* 订单类型统计
*/
public static function analyze(){
return DB::select("SELECT order_type, COUNT(*) as order_type_name from tg_order_type where is_del=0 GROUP BY order_type");
}