define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts','echarts-theme'], function ($, undefined, Backend, Table, Form,echarts) { var Controller = { dashboard: function () { Fast.api.ajax({ url: 'orderplan/data', }, function (data, ret) { Controller.echarts.top(data.top); Controller.echarts.money_line(data.lines); Controller.echarts.cancel_order_pie(data.pie.cancel); Controller.echarts.item_pie(data.pie.item); Controller.echarts.area_pie(data.pie.area); Controller.echarts.source_pie(data.pie.source); }); Controller.api.bindevent(); Controller.echarts.cancel_order_pie(); console.log(123); }, add: function () { Controller.api.bindevent(); }, edit: function () { Controller.api.bindevent(); }, api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); } }, echarts: { top: function(data){ let map = [ 'count','performance','worker' ]; $('.myplan-num').each(function(index) { if (index === 1){ $(this).html('¥' + data[map[index]]); }else { $(this).html(data[map[index]]); } }); }, item_pie: function(data){ // 基本的饼图配置 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: data.map(item => item.name) }, series: [ { name: '服务项目', type: 'pie', radius: '50%', center: ['50%', '60%'], data: data, 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(data){ // 基本的饼图配置 var myChart = echarts.init(document.getElementById('area_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: data.map(item => item.name) }, series: [ { name: '订单区域', type: 'pie', radius: '50%', center: ['50%', '60%'], data: data, 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(data){ // 基本的饼图配置 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: data.map(item => item.name) }, series: [ { name: '来源店铺', type: 'pie', radius: '50%', center: ['50%', '60%'], data: data, 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(data){ // 基本的饼图配置 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: data.map(item => item.name) }, series: [ { name: '访问来源', type: 'pie', radius: '50%', center: ['50%', '60%'], data: data, 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 (data){ 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: ['订单量', '营销额', '收益','收益率'], left: 'left' }, xAxis: [ { type: 'category', data: data.xAxis, axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '金额', position: 'left' }, { type: 'value', name: '单量/百分比', position: 'right', min: 0, // 设置右侧y轴的最小值 max: 100 // 设置右侧y轴的最大值 } ], series: [ { name: '订单量', type: 'bar', data: data.series.count, emphasis: { focus: 'series' }, yAxisIndex: 1, barGap: '10%' // 调整柱状图1与柱状图2之间的间距 }, { name: '营销额', type: 'bar', data: data.series.total, emphasis: { focus: 'series' }, barGap: '10%' // 调整柱状图1与柱状图2之间的间距 }, { name: '收益', type: 'bar', data: data.series.performance, emphasis: { focus: 'series' }, barGap: '10%' // 调整柱状图1与柱状图2之间的间距 }, { name: '收益率', type: 'line', yAxisIndex: 1, data: data.series.rate, smooth: true, lineStyle: { color: '#ff6600' } } ] }; myChart.setOption(option); // 监听窗口大小变化,自动重新绘制图表 window.addEventListener('resize', function() { myChart.resize(); }); } } }; return Controller; });