Commit c3dd3dd2 authored by 曹雷's avatar 曹雷

feat: 优化样式

parent ff481830
......@@ -203,10 +203,10 @@
this.refresh();
var _this = this;
window.onresize = function () {
var myChart = echarts.init(document.getElementById('app-source'));
var myChartBrowser = echarts.init(document.getElementById('app-env-browser'));
var myChartNumsByTime = echarts.init(document.getElementById("nums-by-time"));
var myChartPV = echarts.init(document.getElementById('pv'));
var myChart = echarts.init(document.getElementById('app-source'), 'light');
var myChartBrowser = echarts.init(document.getElementById('app-env-browser'), 'light');
var myChartNumsByTime = echarts.init(document.getElementById("nums-by-time"), 'light');
var myChartPV = echarts.init(document.getElementById('pv'), 'light');
myChart.resize();
myChartBrowser.resize();
myChartNumsByTime.resize();
......@@ -255,7 +255,7 @@
this.initUserOrg();
},
initSource: function () {
var myChart = echarts.init(document.getElementById('app-source'));
var myChart = echarts.init(document.getElementById('app-source'), 'light');
var option = {
yAxis: {
type: 'category',
......@@ -269,7 +269,15 @@
},
series: [{
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: {
left: 0,
......@@ -320,25 +328,69 @@
params),
success: function (result) {
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({
name: element,
type: 'bar',
stack: 'total',
label: {
show: true
show: true,
formatter: function(params) {
if (params.value > 0) {
return params.value
}
return '';
}
},
emphasis: {
focus: 'series'
},
data: result.browserList.map(b => {
return result.dataMap?.[b]?.[index] || 0;
})
data: browserList.map(b => {
return dataMap?.[b]?.[index] || 0;
}),
})
});
var myChartBrowser = echarts.init(document.getElementById(
'app-env-browser'));
'app-env-browser'), 'light');
var optionBrowser = {
tooltip: {
trigger: 'axis',
......@@ -359,7 +411,7 @@
},
yAxis: {
type: 'category',
data: result.browserList,
data: browserList,
},
series: series,
};
......@@ -451,6 +503,14 @@
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[0]
}
}
}
}, {
name: '教师',
data: [],
......@@ -460,6 +520,14 @@
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[1]
}
}
}
}, {
name: '其他',
data: [],
......@@ -469,6 +537,14 @@
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[2]
}
}
}
}]
};
var params = {
......@@ -496,7 +572,7 @@
optionNumsByTime.series[2].data = otherData;
var myChartNumsByTime = echarts.init(document.getElementById(
"nums-by-time"));
"nums-by-time"), 'light');
myChartNumsByTime.setOption(optionNumsByTime, true);
},
error: function (e) {
......@@ -530,7 +606,7 @@
optionPV.xAxis.data = result.hourList;
optionPV.series[0].data = result.dataList;
var myChartPV = echarts.init(document.getElementById(
'pv'));
'pv'), 'light');
myChartPV.setOption(optionPV, true);
},
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