-
+
开票
@@ -167,61 +172,162 @@
+
+
+
+
+
+
+
+
+
+ 1240 / 231 / 23123 / 222
+
+
+ 待派单 / 待接单 / 待上门 / 服务中
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/js/backend/orderplan.js b/public/assets/js/backend/orderplan.js
index 534dc50..8f659d8 100644
--- a/public/assets/js/backend/orderplan.js
+++ b/public/assets/js/backend/orderplan.js
@@ -1,9 +1,14 @@
-define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
+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);
},
@@ -17,6 +22,308 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
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}
{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);
+ },
+ area_pie: function(){
+ // 基本的饼图配置
+ var myChart = echarts.init(document.getElementById('area_pie'));
+
+ var option = {
+ title: {
+ text: '取消订单类型',
+ subtext: '',
+ left: 'right'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a}
{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);
+ },
+ source_pie: function(){
+ // 基本的饼图配置
+ var myChart = echarts.init(document.getElementById('source_pie'));
+
+ var option = {
+ title: {
+ text: '订单地区',
+ subtext: '',
+ left: 'right'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a}
{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);
+ },
+ 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}
{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);
+ },
+ 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);
+
+ }
}
};
return Controller;