Skip to content

S
sh-ds
Commit c3dd3dd2 authored by 曹雷's avatar 曹雷
Browse files
Options

feat: 优化样式

parent ff481830
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 15 deletions
eden-authcenter-agent/src/main/resources/templates/statistics.html
View file @ c3dd3dd2
...@@ -203,10 +203,10 @@ ...@@ -203,10 +203,10 @@
this.refresh(); this.refresh();
var _this = this; var _this = this;
window.onresize = function () { window.onresize = function () {
var myChart = echarts.init(document.getElementById('app-source')); var myChart = echarts.init(document.getElementById('app-source'), 'light');
var myChartBrowser = echarts.init(document.getElementById('app-env-browser')); var myChartBrowser = echarts.init(document.getElementById('app-env-browser'), 'light');
var myChartNumsByTime = echarts.init(document.getElementById("nums-by-time")); var myChartNumsByTime = echarts.init(document.getElementById("nums-by-time"), 'light');
var myChartPV = echarts.init(document.getElementById('pv')); var myChartPV = echarts.init(document.getElementById('pv'), 'light');
myChart.resize(); myChart.resize();
myChartBrowser.resize(); myChartBrowser.resize();
myChartNumsByTime.resize(); myChartNumsByTime.resize();
...@@ -255,7 +255,7 @@ ...@@ -255,7 +255,7 @@
this.initUserOrg(); this.initUserOrg();
}, },
initSource: function () { initSource: function () {
var myChart = echarts.init(document.getElementById('app-source')); var myChart = echarts.init(document.getElementById('app-source'), 'light');
var option = { var option = {
yAxis: { yAxis: {
type: 'category', type: 'category',
...@@ -269,7 +269,15 @@ ...@@ -269,7 +269,15 @@
}, },
series: [{ series: [{
data: [120, 200, 150, 80, 70, 110, 130], data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar' type: 'bar',
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[params.dataIndex]
}
}
}
}], }],
grid: { grid: {
left: 0, left: 0,
...@@ -320,25 +328,69 @@ ...@@ -320,25 +328,69 @@
params), params),
success: function (result) { success: function (result) {
var series = []; var series = [];
result.osList.forEach((element, index) => { var browserList = result.browserList;
var osList = result.osList;
var dataMap = result.dataMap;
var len = browserList.length;
for (let index = 0; index < len; index++) {
var element = browserList[index];
console.log(dataMap?.[element]?.reduce((t, n) => {
return t + n;
}, 0))
if (dataMap?.[element]?.reduce((t, n) => {
return t + n;
}, 0) === 0) {
console.log(index,dataMap)
browserList.splice(index, 1);
delete dataMap[element];
index--;
len--;
}
}
browserList = browserList.map((element, index) => {
if (element === 'unknown') {
dataMap['未知'] = dataMap['unknown'];
delete dataMap['unknown'];
return element = '未知';
}
if (element === 'others') {
dataMap['其他'] = dataMap['others'];
delete dataMap['others'];
return element = '其他';
}
return element;
})
osList = osList.map((element, index) => {
if (element === 'unknown') return element = '未知';
if (element === 'others') return element = '其他';
return element;
})
osList.forEach((element, index) => {
series.push({ series.push({
name: element, name: element,
type: 'bar', type: 'bar',
stack: 'total', stack: 'total',
label: { label: {
show: true show: true,
formatter: function(params) {
if (params.value > 0) {
return params.value
}
return '';
}
}, },
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: result.browserList.map(b => { data: browserList.map(b => {
return result.dataMap?.[b]?.[index] || 0; return dataMap?.[b]?.[index] || 0;
}) }),
}) })
}); });
var myChartBrowser = echarts.init(document.getElementById( var myChartBrowser = echarts.init(document.getElementById(
'app-env-browser')); 'app-env-browser'), 'light');
var optionBrowser = { var optionBrowser = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -359,7 +411,7 @@ ...@@ -359,7 +411,7 @@
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: result.browserList, data: browserList,
}, },
series: series, series: series,
}; };
...@@ -451,6 +503,14 @@ ...@@ -451,6 +503,14 @@
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[0]
}
}
}
}, { }, {
name: '教师', name: '教师',
data: [], data: [],
...@@ -460,6 +520,14 @@ ...@@ -460,6 +520,14 @@
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[1]
}
}
}
}, { }, {
name: '其他', name: '其他',
data: [], data: [],
...@@ -469,6 +537,14 @@ ...@@ -469,6 +537,14 @@
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[2]
}
}
}
}] }]
}; };
var params = { var params = {
...@@ -496,7 +572,7 @@ ...@@ -496,7 +572,7 @@
optionNumsByTime.series[2].data = otherData; optionNumsByTime.series[2].data = otherData;
var myChartNumsByTime = echarts.init(document.getElementById( var myChartNumsByTime = echarts.init(document.getElementById(
"nums-by-time")); "nums-by-time"), 'light');
myChartNumsByTime.setOption(optionNumsByTime, true); myChartNumsByTime.setOption(optionNumsByTime, true);
}, },
error: function (e) { error: function (e) {
...@@ -530,7 +606,7 @@ ...@@ -530,7 +606,7 @@
optionPV.xAxis.data = result.hourList; optionPV.xAxis.data = result.hourList;
optionPV.series[0].data = result.dataList; optionPV.series[0].data = result.dataList;
var myChartPV = echarts.init(document.getElementById( var myChartPV = echarts.init(document.getElementById(
'pv')); 'pv'), 'light');
myChartPV.setOption(optionPV, true); myChartPV.setOption(optionPV, true);
}, },
error: function (e) { error: function (e) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment