del:抽离console.html chart data
bobi
parent
ad06c4e27f
commit
35030f000f
|
|
@ -1,6 +1,5 @@
|
|||
"use strict";
|
||||
var useModel = ["okUtils", "table", "laytpl", "laydate", "element", "countUp", "okMock"];
|
||||
layui.use(useModel, function () {
|
||||
layui.use(["okUtils", "table", "countUp", "okMock"], function () {
|
||||
var countUp = layui.countUp;
|
||||
var table = layui.table;
|
||||
var okUtils = layui.okUtils;
|
||||
|
|
@ -23,48 +22,18 @@ layui.use(useModel, function () {
|
|||
|
||||
var userSourceOption = {
|
||||
"title": {"text": "用户访问"},
|
||||
"tooltip": {
|
||||
"trigger": "axis", "axisPointer": {"type": "cross", "label": {"backgroundColor": "#6a7985"}}
|
||||
},
|
||||
"legend": {
|
||||
"data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
|
||||
},
|
||||
"toolbox": {
|
||||
"feature": {"saveAsImage": {}}
|
||||
},
|
||||
"tooltip": {"trigger": "axis", "axisPointer": {"type": "cross", "label": {"backgroundColor": "#6a7985"}}},
|
||||
"legend": {"data": ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]},
|
||||
"toolbox": {"feature": {"saveAsImage": {}}},
|
||||
"grid": {"left": "3%", "right": "4%", "bottom": "3%", "containLabel": true},
|
||||
"xAxis": [
|
||||
{
|
||||
"type": "category", "boundaryGap": false,
|
||||
"data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
||||
}
|
||||
],
|
||||
"yAxis": [
|
||||
{"type": "value"}
|
||||
],
|
||||
"xAxis": [{"type": "category", "boundaryGap": false, "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]}],
|
||||
"yAxis": [{"type": "value"}],
|
||||
"series": [
|
||||
{
|
||||
"name": "邮件营销", "type": "line", "stack": "总量", "areaStyle": {},
|
||||
"data": [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
"name": "联盟广告", "type": "line", "stack": "总量", "areaStyle": {},
|
||||
"data": [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
"name": "视频广告", "type": "line", "stack": "总量", "areaStyle": {},
|
||||
"data": [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
"name": "直接访问", "type": "line", "stack": "总量", "areaStyle": {"normal": {}},
|
||||
"data": [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
"name": "搜索引擎", "type": "line", "stack": "总量",
|
||||
"label": {"normal": {"show": true, "position": "top"}},
|
||||
"areaStyle": {"normal": {}},
|
||||
"data": [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
{"name": "邮件营销", "type": "line", "stack": "总量", "areaStyle": {}, "data": [120, 132, 101, 134, 90, 230, 210]},
|
||||
{"name": "联盟广告", "type": "line", "stack": "总量", "areaStyle": {}, "data": [220, 182, 191, 234, 290, 330, 310]},
|
||||
{"name": "视频广告", "type": "line", "stack": "总量", "areaStyle": {}, "data": [150, 232, 201, 154, 190, 330, 410]},
|
||||
{"name": "直接访问", "type": "line", "stack": "总量", "areaStyle": {"normal": {}}, "data": [320, 332, 301, 334, 390, 330, 320]},
|
||||
{"name": "搜索引擎", "type": "line", "stack": "总量", "label": {"normal": {"show": true, "position": "top"}}, "areaStyle": {"normal": {}}, "data": [820, 932, 901, 934, 1290, 1330, 1320]}
|
||||
]
|
||||
};
|
||||
|
||||
|
|
@ -131,12 +100,7 @@ layui.use(useModel, function () {
|
|||
"normal": {"areaColor": "#eeeeee", "borderColor": "#aaaaaa", "borderWidth": 0.5},
|
||||
"emphasis": {"areaColor": "rgba(63,177,227,0.25)", "borderColor": "#3fb1e3", "borderWidth": 1}
|
||||
},
|
||||
"label": {
|
||||
"normal": {"textStyle": {"color": "#000"}},
|
||||
"emphasis": {
|
||||
"textStyle": {"color": "#000"}
|
||||
}
|
||||
}
|
||||
"label": {"normal": {"textStyle": {"color": "#000"}}, "emphasis": {"textStyle": {"color": "#000"}}}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
|||
156
js/console1.js
156
js/console1.js
|
|
@ -1,53 +1,129 @@
|
|||
"use strict";
|
||||
var useModel = ["form", "okUtils", "table", "laytpl", "laydate", "element", "jquery", "countUp", "home2Data"];//需要引入的模块
|
||||
layui.config({
|
||||
base: "../js/"
|
||||
}).use(useModel, function () {
|
||||
var $form = layui.form,
|
||||
countUp = layui.countUp,
|
||||
laydate = layui.laydate,
|
||||
element = layui.element,
|
||||
table = layui.table,
|
||||
okUtils = layui.okUtils,
|
||||
$ = layui.jquery,
|
||||
laytpl = layui.laytpl;
|
||||
/**静态数据**/
|
||||
var echartsData = layui.home2Data;
|
||||
init();
|
||||
layui.use(["okUtils", "countUp"], function () {
|
||||
var countUp = layui.countUp;
|
||||
var okUtils = layui.okUtils;
|
||||
var $ = layui.jquery;
|
||||
|
||||
function init() {
|
||||
/**今日访问量**/
|
||||
/**
|
||||
* 收入、商品、博客、用户
|
||||
*/
|
||||
function initMediaCont() {
|
||||
var elem_nums = $(".media-cont .num");
|
||||
elem_nums.each(function (i, j) {
|
||||
let ran = parseInt(Math.random() * 1900 + 100); //[100,2000)包括100不包括2000
|
||||
var ran = parseInt(Math.random() * 1900 + 100);
|
||||
!new countUp({
|
||||
target: j,
|
||||
endVal: ran
|
||||
}).start();
|
||||
});
|
||||
|
||||
/**4个图表**/
|
||||
var echIncome = echarts.init($("#echIncome")[0]);
|
||||
var echGoods = echarts.init($('#echGoods')[0]);
|
||||
var echBlogs = echarts.init($("#echBlogs")[0]);
|
||||
var echUser = echarts.init($('#echUser')[0]);
|
||||
okUtils.echartsResize([echIncome, echGoods, echBlogs, echUser]);
|
||||
|
||||
echIncome.setOption(echartsData.income);//数据图
|
||||
echGoods.setOption(echartsData.goods);//数据图
|
||||
echBlogs.setOption(echartsData.blogs);//数据图
|
||||
echUser.setOption(echartsData.user);//数据图
|
||||
|
||||
//用户活跃量,用户访问来源
|
||||
var echOne = echarts.init($("#echOne")[0], "themez");
|
||||
var echTwo = echarts.init($("#echTwo")[0], "themez");
|
||||
var mapThree = echarts.init($("#mapThree")[0], "themez");
|
||||
okUtils.echartsResize([echOne, echTwo, mapThree]);
|
||||
|
||||
echOne.setOption(echartsData.echOne);//数据图
|
||||
echTwo.setOption(echartsData.echTwo);//数据图
|
||||
mapThree.setOption(echartsData.mapThree);//数据图
|
||||
}
|
||||
|
||||
function dataTrendOption(color) {
|
||||
color = color || "#00c292";
|
||||
return {
|
||||
color: color, toolbox: {show: false, feature: {saveAsImage: {}}},
|
||||
grid: {left: '-1%', right: '0', bottom: '0', top: '5px', containLabel: false},
|
||||
xAxis: [{type: 'category', boundaryGap: false, splitLine: {show: false}, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],
|
||||
yAxis: [{type: 'value', splitLine: {show: false}}],
|
||||
series: [{
|
||||
name: '用户', type: 'line', stack: '总量', smooth: true, symbol: "none", clickable: false, areaStyle: {},
|
||||
data: [randomData(), randomData(), randomData(), randomData(), randomData(), randomData(), randomData()]
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
function randomData() {
|
||||
return Math.round(Math.random() * 500);
|
||||
}
|
||||
|
||||
/**
|
||||
* 近一周数量涨幅图表
|
||||
*/
|
||||
function initDataTrendChart() {
|
||||
// 收入
|
||||
var echIncome = echarts.init($("#echIncome")[0]);
|
||||
// 商品
|
||||
var echGoods = echarts.init($('#echGoods')[0]);
|
||||
// 博客
|
||||
var echBlogs = echarts.init($("#echBlogs")[0]);
|
||||
// 用户
|
||||
var echUser = echarts.init($('#echUser')[0]);
|
||||
echIncome.setOption(dataTrendOption("#00c292"));
|
||||
echGoods.setOption(dataTrendOption("#ab8ce4"));
|
||||
echBlogs.setOption(dataTrendOption("#03a9f3"));
|
||||
echUser.setOption(dataTrendOption("#fb9678"));
|
||||
okUtils.echartsResize([echIncome, echGoods, echBlogs, echUser]);
|
||||
}
|
||||
|
||||
var userActiveTodayChartOption = {
|
||||
color: "#03a9f3",
|
||||
xAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
|
||||
yAxis: {type: 'value'},
|
||||
series: [{data: [120, 200, 150, 80, 70, 110, 130], type: 'bar'}]
|
||||
};
|
||||
|
||||
/**
|
||||
* 今日用户活跃量图表
|
||||
*/
|
||||
function initUserActiveTodayChart() {
|
||||
var userActiveTodayChart = echarts.init($("#userActiveTodayChart")[0], "themez");
|
||||
userActiveTodayChart.setOption(userActiveTodayChartOption);
|
||||
okUtils.echartsResize([userActiveTodayChart]);
|
||||
}
|
||||
|
||||
var userSourceTodayChartOption = {
|
||||
title: {show: false, text: '用户访问来源', subtext: '纯属虚构', x: 'center'},
|
||||
tooltip: {trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"},
|
||||
legend: {orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'],
|
||||
data: [{value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'}],
|
||||
itemStyle: {emphasis: {shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)'}}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
/**
|
||||
* 今日用户访问来源图表
|
||||
*/
|
||||
function initUserSourceTodayChart() {
|
||||
var userSourceTodayChart = echarts.init($("#userSourceTodayChart")[0], "themez");
|
||||
userSourceTodayChart.setOption(userSourceTodayChartOption);
|
||||
okUtils.echartsResize([userSourceTodayChart]);
|
||||
}
|
||||
|
||||
var userSourceWeekChartOption = {
|
||||
title: {show: true, text: '本周用户访问来源'},
|
||||
tooltip: {trigger: 'axis', axisPointer: {type: 'cross', label: {backgroundColor: '#6a7985'}}},
|
||||
legend: {data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']},
|
||||
toolbox: {show: false, feature: {saveAsImage: {}}},
|
||||
grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
|
||||
xAxis: [{type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],
|
||||
yAxis: [{type: 'value', splitLine: {show: false},}],
|
||||
series: [
|
||||
{name: '邮件营销', type: 'line', stack: '总量', smooth: true, areaStyle: {}, data: [120, 132, 101, 134, 90, 230, 210]},
|
||||
{name: '联盟广告', type: 'line', stack: '总量', smooth: true, areaStyle: {}, data: [220, 182, 191, 234, 290, 330, 310]},
|
||||
{name: '视频广告', type: 'line', stack: '总量', smooth: true, areaStyle: {}, data: [150, 232, 201, 154, 190, 330, 410]},
|
||||
{name: '直接访问', type: 'line', stack: '总量', smooth: true, areaStyle: {normal: {}}, data: [320, 332, 301, 334, 390, 330, 320]},
|
||||
{name: '搜索引擎', type: 'line', stack: '总量', smooth: true, label: {normal: {show: true, position: 'top'}}, areaStyle: {normal: {}}, data: [370, 932, 901, 934, 1290, 1330, 1320]}
|
||||
]
|
||||
};
|
||||
|
||||
/**
|
||||
* 本周用户访问来源图表
|
||||
*/
|
||||
function initUserSourceWeekChart() {
|
||||
var userSourceWeekChart = echarts.init($("#userSourceWeekChart")[0], "themez");
|
||||
userSourceWeekChart.setOption(userSourceWeekChartOption);
|
||||
okUtils.echartsResize([userSourceWeekChart]);
|
||||
}
|
||||
|
||||
initMediaCont();
|
||||
initDataTrendChart();
|
||||
initUserActiveTodayChart();
|
||||
initUserSourceTodayChart();
|
||||
initUserSourceWeekChart();
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,219 @@
|
|||
function randomData() {
|
||||
return Math.round(Math.random() * 500);
|
||||
}
|
||||
|
||||
function ecchartData(color) {
|
||||
color = color || "#00c292";
|
||||
return {
|
||||
color: color,
|
||||
toolbox: {
|
||||
show: false,
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '-1%',
|
||||
right: '0',
|
||||
bottom: '0',
|
||||
top: '5px',
|
||||
containLabel: false
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '用户',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,
|
||||
symbol: "none",
|
||||
clickable: false,
|
||||
areaStyle: {},
|
||||
data: [randomData(), randomData(), randomData(), randomData(), randomData(), randomData(), randomData()]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
var echOne = {
|
||||
color: "#03a9f3",
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar'
|
||||
}]
|
||||
};
|
||||
var echTwo = {
|
||||
title: {
|
||||
show: false,
|
||||
text: '用户访问来源',
|
||||
subtext: '纯属虚构',
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{value: 335, name: '直接访问'},
|
||||
{value: 310, name: '邮件营销'},
|
||||
{value: 234, name: '联盟广告'},
|
||||
{value: 135, name: '视频广告'},
|
||||
{value: 1548, name: '搜索引擎'}
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
var mapThree = {
|
||||
title: {
|
||||
show: false,
|
||||
text: '堆叠区域图xxxx'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {//设置横线样式
|
||||
show: false//隐藏横线
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {normal: {}},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
areaStyle: {normal: {}},
|
||||
data: [370, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
layui.define(function (exports) {
|
||||
var income = ecchartData("#00c292");
|
||||
var goods = ecchartData("#ab8ce4");
|
||||
var blogs = ecchartData("#03a9f3");
|
||||
var user = ecchartData("#fb9678");
|
||||
|
||||
exports('home2Data', {
|
||||
income: income,
|
||||
goods: goods,
|
||||
blogs: blogs,
|
||||
user: user,
|
||||
echOne: echOne,
|
||||
echTwo: echTwo,
|
||||
mapThree: mapThree,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
219
js/home2Data.js
219
js/home2Data.js
|
|
@ -1,219 +0,0 @@
|
|||
function randomData() {
|
||||
return Math.round(Math.random() * 500);
|
||||
}
|
||||
|
||||
function ecchartData(color) {
|
||||
color = color || "#00c292";
|
||||
return {
|
||||
color:color,
|
||||
toolbox: {
|
||||
show: false,
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '-1%',
|
||||
right: '0',
|
||||
bottom: '0',
|
||||
top: '5px',
|
||||
containLabel: false
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
splitLine: {//设置竖线样式
|
||||
show: false//隐藏竖线
|
||||
},
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {//设置横线样式
|
||||
show: false//隐藏横线
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '用户',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
symbol: "none",//去掉小圆点
|
||||
clickable: false,
|
||||
areaStyle: {},
|
||||
data: [randomData(), randomData(), randomData(), randomData(), randomData(), randomData(), randomData()]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
var echOne = {
|
||||
color: "#03a9f3",
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar'
|
||||
}]
|
||||
};
|
||||
var echTwo = {
|
||||
title: {
|
||||
show: false,
|
||||
text: '用户访问来源',
|
||||
subtext: '纯属虚构',
|
||||
x: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{value: 335, name: '直接访问'},
|
||||
{value: 310, name: '邮件营销'},
|
||||
{value: 234, name: '联盟广告'},
|
||||
{value: 135, name: '视频广告'},
|
||||
{value: 1548, name: '搜索引擎'}
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
var mapThree = {
|
||||
title: {
|
||||
show: false,
|
||||
text: '堆叠区域图'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {//设置横线样式
|
||||
show: false//隐藏横线
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
areaStyle: {normal: {}},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
smooth: true,//曲线线条
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
areaStyle: {normal: {}},
|
||||
data: [370, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
layui.define(function (exports) {
|
||||
var income = ecchartData("#00c292");
|
||||
var goods = ecchartData("#ab8ce4");
|
||||
var blogs = ecchartData("#03a9f3");
|
||||
var user = ecchartData("#fb9678");
|
||||
|
||||
exports('home2Data', {
|
||||
income:income,
|
||||
goods:goods,
|
||||
blogs:blogs,
|
||||
user:user,
|
||||
echOne:echOne,
|
||||
echTwo:echTwo,
|
||||
mapThree:mapThree,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -90,10 +90,10 @@
|
|||
<div class="layui-col-md8">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<div class="my-card-title">用户活跃量</div>
|
||||
<div class="my-card-title">今日用户活跃量</div>
|
||||
</div>
|
||||
<div class="ok-card-body map-body">
|
||||
<div style="height: 100%;" id="echOne"></div>
|
||||
<div style="height: 100%;" id="userActiveTodayChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -101,10 +101,10 @@
|
|||
<div class="layui-col-md4">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<div class="my-card-title">用户访问来源</div>
|
||||
<div class="my-card-title">今日用户访问来源</div>
|
||||
</div>
|
||||
<div class="ok-card-body map-body">
|
||||
<div style="height: 100%;" id="echTwo"></div>
|
||||
<div style="height: 100%;" id="userSourceTodayChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="ok-card-body clearfix">
|
||||
<div class="map-china" id="mapThree"></div>
|
||||
<div class="map-china" id="userSourceWeekChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue