Accept Merge Request #34: (feature/hant -> develop)
Merge Request: 看板 Created By: @todayswind Accepted By: @todayswind URL: https://g-bcrc3009.coding.net/p/allocatr/d/allocatr/git/merge/34
This commit is contained in:
commit
689376fa69
|
|
@ -105,4 +105,7 @@ class Dashboard extends Backend
|
||||||
return $this->view->fetch();
|
return $this->view->fetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -643,4 +643,5 @@ class Order extends Backend
|
||||||
}
|
}
|
||||||
return null; // 如果找不到返回 null
|
return null; // 如果找不到返回 null
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
56
application/admin/controller/Orderplan.php
Normal file
56
application/admin/controller/Orderplan.php
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace app\admin\controller;
|
||||||
|
|
||||||
|
use app\admin\addresmart\Address;
|
||||||
|
use app\admin\model\AuthGroupAccess;
|
||||||
|
use app\admin\model\order\Invoice;
|
||||||
|
use app\admin\model\OrderDispatch;
|
||||||
|
use app\admin\model\Worker;
|
||||||
|
use app\admin\model\WorkerItem;
|
||||||
|
use app\common\controller\Backend;
|
||||||
|
use app\common\Logic\OrderLogic;
|
||||||
|
use fast\Tree;
|
||||||
|
use think\Db;
|
||||||
|
use think\Exception;
|
||||||
|
use think\exception\DbException;
|
||||||
|
use think\exception\PDOException;
|
||||||
|
use think\exception\ValidateException;
|
||||||
|
use think\Hook;
|
||||||
|
use think\Model;
|
||||||
|
use function Symfony\Component\Clock\now;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 订单列管理
|
||||||
|
*
|
||||||
|
* @icon fa fa-circle-o
|
||||||
|
*/
|
||||||
|
class Orderplan extends Backend
|
||||||
|
{
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Order模型对象
|
||||||
|
* @var \app\admin\model\Order
|
||||||
|
*/
|
||||||
|
protected $model = null;
|
||||||
|
protected $sources = null;
|
||||||
|
protected $items = null;
|
||||||
|
|
||||||
|
public function _initialize()
|
||||||
|
{
|
||||||
|
parent::_initialize();
|
||||||
|
$this->model = new \app\admin\model\Order;
|
||||||
|
|
||||||
|
|
||||||
|
//$this->view->assign("collectList", $this->model->getCollectList());
|
||||||
|
//$this->view->assign("dispatchTypeList", $this->model->getDispatchTypeList());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public function dashboard(){
|
||||||
|
|
||||||
|
return $this->fetch('orderplan/index');
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
333
application/admin/view/orderplan/index.html
Normal file
333
application/admin/view/orderplan/index.html
Normal file
|
|
@ -0,0 +1,333 @@
|
||||||
|
<div class="mycontainer">
|
||||||
|
|
||||||
|
<!-- 时间筛选 -->
|
||||||
|
<!-- <div class="row">-->
|
||||||
|
<!-- <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('order/addAbnormal')}">-->
|
||||||
|
<!-- <div class="col-md-12">-->
|
||||||
|
<!-- <div class="form-group">-->
|
||||||
|
<!-- <label for="startDate" class="col-md-2 control-label">选择时间范围:</label>-->
|
||||||
|
<!-- <div class="col-md-5">-->
|
||||||
|
<!-- <input type="text" class="form-control datetimepicker" id="startDate" placeholder="开始时间" />-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="col-md-5">-->
|
||||||
|
<!-- <input type="text" class="form-control datetimepicker" id="endDate" placeholder="结束时间" />-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </form>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
<div class="row" style="margin-bottom: 10px">
|
||||||
|
<!-- 卡片 1: 总用户数 -->
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="myplan">
|
||||||
|
<div class="myplan-title">
|
||||||
|
<span style="color: red" class="fa fa-line-chart fa-fw"></span>
|
||||||
|
<span>订单量</span>
|
||||||
|
</div>
|
||||||
|
<div class="myplan-num">
|
||||||
|
1,240
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 卡片 1: 总用户数 -->
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="myplan">
|
||||||
|
<div class="myplan-title">
|
||||||
|
<span style="color: #43cb34" class="fa fa-list-alt fa-fw"></span>
|
||||||
|
<span>总业绩</span>
|
||||||
|
</div>
|
||||||
|
<div class="myplan-num">
|
||||||
|
1,240
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 卡片 1: 总用户数 -->
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="myplan">
|
||||||
|
<div class="myplan-title">
|
||||||
|
<span style="color: #b3d4fc" class="fa fa-group fa-fw"></span>
|
||||||
|
<span>师傅总数</span>
|
||||||
|
</div>
|
||||||
|
<div class="myplan-num">
|
||||||
|
1,240
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div id="money_line" style="height: 600px;width: 100%">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="todo-plan" style="color: #55d2fe">
|
||||||
|
<div class="todo-plan-title">
|
||||||
|
<div style="font-size: 32px" class="fa fa-warning"></div>
|
||||||
|
<div class="todo-plan-title-text" style="flex: 1">
|
||||||
|
<p>报错</p>
|
||||||
|
<p>单位/笔</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">详情></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-plan-num text-center">
|
||||||
|
1,240
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="todo-plan" style="color: #86a7ff">
|
||||||
|
<div class="todo-plan-title">
|
||||||
|
<div style="font-size: 32px" class="fa fa-gear"></div>
|
||||||
|
<div class="todo-plan-title-text" style="flex: 1">
|
||||||
|
<p>待配置</p>
|
||||||
|
<p>单位/笔</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">详情></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-plan-num text-center">
|
||||||
|
1,240
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="todo-plan" style="color: #4de171">
|
||||||
|
<div class="todo-plan-title">
|
||||||
|
<div style="font-size: 32px" class="fa fa-envelope-open"></div>
|
||||||
|
<div class="todo-plan-title-text" style="flex: 1">
|
||||||
|
<p>待审核</p>
|
||||||
|
<p>单位/笔</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">详情></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-plan-num text-center">
|
||||||
|
1,240
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="todo-plan" style="color: #b896ff">
|
||||||
|
<div class="todo-plan-title">
|
||||||
|
<div style="font-size: 32px" class="fa fa-pencil"></div>
|
||||||
|
<div class="todo-plan-title-text" style="flex: 1">
|
||||||
|
<p>待回访</p>
|
||||||
|
<p>单位/笔</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">详情></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-plan-num text-center">
|
||||||
|
1,240
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="todo-plan" style="color: #f8bf18">
|
||||||
|
<div class="todo-plan-title">
|
||||||
|
<div style="font-size: 32px" class="fa fa-leaf"></div>
|
||||||
|
<div class="todo-plan-title-text" style="flex: 1">
|
||||||
|
<p>待售后</p>
|
||||||
|
<p>单位/笔</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">详情></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-plan-num text-center">
|
||||||
|
1,240
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="todo-plan" style="color: #f58164">
|
||||||
|
<div class="todo-plan-title">
|
||||||
|
<div style="font-size: 32px" class="fa fa-file-text-o"></div>
|
||||||
|
<div class="todo-plan-title-text" style="flex: 1">
|
||||||
|
<p>开票</p>
|
||||||
|
<p>单位/笔</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">详情></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="todo-plan-num text-center">
|
||||||
|
1,240
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="col-md-6">
|
||||||
|
|
||||||
|
<div id="cancel_order_pie" style="width: 100%;height:400px">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
|
||||||
|
<div id="item_pie" style="width: 100%;height:400px">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
|
||||||
|
<div id="area_pie" style="width: 100%;height:400px">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
|
||||||
|
<div id="source_pie" style="width: 100%;height:400px">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="order-count-plan" style="color: #55d2fe">
|
||||||
|
<div class="order-count-title">
|
||||||
|
<div class="todo-plan-title-text text-left" style="flex: 1">
|
||||||
|
<span class="fa fa-clock-o"></span> 进行中的订单
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="order-count-num text-left">
|
||||||
|
1240 / 231 / 23123 / 222
|
||||||
|
</div>
|
||||||
|
<div class="order-count-num-sub text-left">
|
||||||
|
待派单 / 待接单 / 待上门 / 服务中
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="order-count-plan" style="color: #55d2fe">
|
||||||
|
<div class="order-count-title" style="background-color: #f5f6ff;color: #6b6e73">
|
||||||
|
<div class="todo-plan-title-text text-left" style="flex: 1">
|
||||||
|
<span class="fa fa-phone-square"></span> 售后申请
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="order-count-num text-left">
|
||||||
|
1240
|
||||||
|
</div>
|
||||||
|
<div class="order-count-num-sub text-left">
|
||||||
|
待处理
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.mycontainer {
|
||||||
|
background-color: white;
|
||||||
|
padding-top: 10px;
|
||||||
|
height: auto;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myplan {
|
||||||
|
box-shadow: 0 2px 6px rgba(12, 72, 128, .1);
|
||||||
|
height: 90px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myplan-title {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myplan-num {
|
||||||
|
color: #434343;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-plan {
|
||||||
|
padding: 15px;
|
||||||
|
/*height: 100px;*/
|
||||||
|
box-shadow: 0 2px 6px rgba(12, 72, 128, .1);
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-plan-num {
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-plan-title {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-plan-title-text {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-plan-title-text > p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-plan a {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-count-title {
|
||||||
|
background-color: #c389f6;
|
||||||
|
color: #7b38b7;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-count-plan {
|
||||||
|
padding: 15px;
|
||||||
|
/*height: 100px;*/
|
||||||
|
box-shadow: 0 0 6px rgba(12, 72, 128, .1);
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-count-num {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 10px 0;
|
||||||
|
color: #292e39;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-count-num-sub {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #C9C5C5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
355
public/assets/js/backend/orderplan.js
Normal file
355
public/assets/js/backend/orderplan.js
Normal file
|
|
@ -0,0 +1,355 @@
|
||||||
|
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts','echarts-theme'], function ($, undefined, Backend, Table, Form,echarts) {
|
||||||
|
|
||||||
|
var Controller = {
|
||||||
|
dashboard: function () {
|
||||||
|
|
||||||
|
Controller.api.bindevent();
|
||||||
|
Controller.echarts.item_pie();
|
||||||
|
Controller.echarts.area_pie();
|
||||||
|
Controller.echarts.source_pie();
|
||||||
|
Controller.echarts.cancel_order_pie();
|
||||||
|
Controller.echarts.money_line();
|
||||||
|
console.log(123);
|
||||||
|
|
||||||
|
},
|
||||||
|
add: function () {
|
||||||
|
Controller.api.bindevent();
|
||||||
|
},
|
||||||
|
edit: function () {
|
||||||
|
Controller.api.bindevent();
|
||||||
|
},
|
||||||
|
api: {
|
||||||
|
bindevent: function () {
|
||||||
|
Form.api.bindevent($("form[role=form]"));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
echarts: {
|
||||||
|
item_pie: function(){
|
||||||
|
// 基本的饼图配置
|
||||||
|
var myChart = echarts.init(document.getElementById('item_pie'));
|
||||||
|
|
||||||
|
var option = {
|
||||||
|
title: {
|
||||||
|
text: '取消订单类型',
|
||||||
|
subtext: '',
|
||||||
|
left: 'right'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
color: [
|
||||||
|
"#18d1b1",
|
||||||
|
"#3fb1e3",
|
||||||
|
"#626c91",
|
||||||
|
"#a0a7e6",
|
||||||
|
"#c4ebad",
|
||||||
|
"#96dee8"
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left',
|
||||||
|
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '服务项目',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
data: [
|
||||||
|
{ value: 335, name: '直接访问' },
|
||||||
|
{ value: 310, name: '邮件营销' },
|
||||||
|
{ value: 234, name: '联盟广告' },
|
||||||
|
{ value: 135, name: '视频广告' },
|
||||||
|
{ value: 1548, name: '搜索引擎' }
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 监听窗口大小变化,自动重新绘制图表
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
area_pie: function(){
|
||||||
|
// 基本的饼图配置
|
||||||
|
var myChart = echarts.init(document.getElementById('area_pie'));
|
||||||
|
|
||||||
|
var option = {
|
||||||
|
title: {
|
||||||
|
text: '取消订单类型',
|
||||||
|
subtext: '',
|
||||||
|
left: 'right'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left',
|
||||||
|
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||||
|
},
|
||||||
|
color: [
|
||||||
|
"#18d1b1",
|
||||||
|
"#3fb1e3",
|
||||||
|
"#626c91",
|
||||||
|
"#a0a7e6",
|
||||||
|
"#c4ebad",
|
||||||
|
"#96dee8"
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访问来源',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
data: [
|
||||||
|
{ value: 335, name: '直接访问' },
|
||||||
|
{ value: 310, name: '邮件营销' },
|
||||||
|
{ value: 234, name: '联盟广告' },
|
||||||
|
{ value: 135, name: '视频广告' },
|
||||||
|
{ value: 1548, name: '搜索引擎' }
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 监听窗口大小变化,自动重新绘制图表
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
source_pie: function(){
|
||||||
|
// 基本的饼图配置
|
||||||
|
var myChart = echarts.init(document.getElementById('source_pie'));
|
||||||
|
|
||||||
|
var option = {
|
||||||
|
title: {
|
||||||
|
text: '订单地区',
|
||||||
|
subtext: '',
|
||||||
|
left: 'right'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
color: [
|
||||||
|
"#18d1b1",
|
||||||
|
"#3fb1e3",
|
||||||
|
"#626c91",
|
||||||
|
"#a0a7e6",
|
||||||
|
"#c4ebad",
|
||||||
|
"#96dee8"
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left',
|
||||||
|
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访问来源',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
data: [
|
||||||
|
{ value: 335, name: '直接访问' },
|
||||||
|
{ value: 310, name: '邮件营销' },
|
||||||
|
{ value: 234, name: '联盟广告' },
|
||||||
|
{ value: 135, name: '视频广告' },
|
||||||
|
{ value: 1548, name: '搜索引擎' }
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 监听窗口大小变化,自动重新绘制图表
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
cancel_order_pie: function(){
|
||||||
|
// 基本的饼图配置
|
||||||
|
var myChart = echarts.init(document.getElementById('cancel_order_pie'));
|
||||||
|
|
||||||
|
var option = {
|
||||||
|
title: {
|
||||||
|
text: '订单来源',
|
||||||
|
subtext: '',
|
||||||
|
left: 'right'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
color: [
|
||||||
|
"#18d1b1",
|
||||||
|
"#3fb1e3",
|
||||||
|
"#626c91",
|
||||||
|
"#a0a7e6",
|
||||||
|
"#c4ebad",
|
||||||
|
"#96dee8"
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'left',
|
||||||
|
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访问来源',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
data: [
|
||||||
|
{ value: 335, name: '直接访问' },
|
||||||
|
{ value: 310, name: '邮件营销' },
|
||||||
|
{ value: 234, name: '联盟广告' },
|
||||||
|
{ value: 135, name: '视频广告' },
|
||||||
|
{ value: 1548, name: '搜索引擎' }
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 监听窗口大小变化,自动重新绘制图表
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
money_line: function (){
|
||||||
|
var myChart = echarts.init(document.getElementById('money_line'));
|
||||||
|
|
||||||
|
var option = {
|
||||||
|
title: {
|
||||||
|
text: '总业绩',
|
||||||
|
subtext: '数据',
|
||||||
|
left: 'right'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: [
|
||||||
|
"#18d1b1",
|
||||||
|
"#3fb1e3",
|
||||||
|
"#626c91",
|
||||||
|
"#a0a7e6",
|
||||||
|
"#c4ebad",
|
||||||
|
"#96dee8"
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
data: ['柱状图1', '柱状图2', '折线图'],
|
||||||
|
left: 'left'
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '柱状图数值',
|
||||||
|
position: 'left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '折线图数值',
|
||||||
|
position: 'right',
|
||||||
|
min: 0, // 设置右侧y轴的最小值
|
||||||
|
max: 1 // 设置右侧y轴的最大值
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '柱状图1',
|
||||||
|
type: 'bar',
|
||||||
|
data: [120, 132, 101, 134, 90, 230],
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '柱状图2',
|
||||||
|
type: 'bar',
|
||||||
|
data: [220, 182, 191, 234, 290, 330],
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '折线图',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: [0.2, 0.3, 0.4, 0.6, 0.5, 0.8],
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ff6600'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// 监听窗口大小变化,自动重新绘制图表
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
return Controller;
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user