图表样式及国际化修改
This commit is contained in:
@@ -82,4 +82,23 @@ a {
|
||||
float: right;
|
||||
}
|
||||
|
||||
td a {
|
||||
color:#fff
|
||||
}
|
||||
/* td a:link {
|
||||
color:#fff;
|
||||
text-decoration:none
|
||||
}
|
||||
td a:active {
|
||||
color:red;
|
||||
text-decoration:none
|
||||
}
|
||||
td a:visited {
|
||||
color:red;
|
||||
text-decoration:none
|
||||
}
|
||||
td a:hover {
|
||||
color:red;
|
||||
text-decoration:underline
|
||||
} */
|
||||
/*content 结束*/
|
||||
@@ -1,7 +1,7 @@
|
||||
.data_content{
|
||||
/*overflow-x: hidden;*/
|
||||
/* min-width: 1366px; */
|
||||
background-color: #0E0E0E;
|
||||
background-color: #1c1c1c;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
@@ -33,14 +33,14 @@
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.data_content .data_main .main_left div .main_title{
|
||||
width: 180px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #333333;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
left:50%;
|
||||
left:45%;
|
||||
margin-left: -90px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
@@ -76,20 +76,21 @@
|
||||
/*background: url("../img/chart_map.png") no-repeat center ;*/
|
||||
}
|
||||
.data_content .data_main .main_center .main_title{
|
||||
width: 180px;
|
||||
width: 250px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #333333;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
left:50%;
|
||||
left:45%;
|
||||
margin-left: -90px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
padding-left: 45px;
|
||||
text-align:auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@@ -150,14 +151,14 @@
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.data_content .data_main .main_right div .main_title{
|
||||
width: 180px;
|
||||
width: 230px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #333333;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
left:50%;
|
||||
left:45%;
|
||||
margin-left: -90px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
@@ -250,7 +251,7 @@
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
padding-left: 45px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.data_content .data_bottom div .main_title img{
|
||||
position: absolute;
|
||||
@@ -274,7 +275,7 @@
|
||||
.data_content .data_bottom div .main_table th{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color:#333333;
|
||||
color:#757575;
|
||||
text-align: center;
|
||||
}
|
||||
.data_content .data_bottom div .main_table th:nth-child(1){
|
||||
@@ -296,7 +297,7 @@
|
||||
.data_content .data_bottom div .main_table tbody tr:nth-child(7),
|
||||
.data_content .data_bottom div .main_table tbody tr:nth-child(9),
|
||||
.data_content .data_bottom div .main_table tbody tr:nth-child(5){
|
||||
background-color: #0e0e0e;
|
||||
background-color: #1c1c1c;
|
||||
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
|
||||
10px 0px 15px #333333 inset; /*右边阴影*/
|
||||
/*0px 10px 15px #333333 inset;*/
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
// margin:10,
|
||||
|
||||
},
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
@@ -84,12 +84,12 @@
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) { // 鼠标滑过时动态更新标题
|
||||
console.log(e)
|
||||
// 标题更新函数,API 地址:https://api.hcharts.cn/highcharts#Chart.setTitle
|
||||
chart.setTitle({
|
||||
text: e.target.name+ '\t'+ e.target.y + ' %',
|
||||
text: '<br>'+e.target.name,
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontSize:'14px',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
});
|
||||
@@ -133,7 +133,7 @@
|
||||
}
|
||||
|
||||
|
||||
// echart_main中心图
|
||||
// echart_main中心图 活跃IP统计
|
||||
function echart_main(rs) {
|
||||
var data=new Array();
|
||||
var xData=new Array();
|
||||
@@ -173,14 +173,8 @@
|
||||
// marginLeft:80,
|
||||
marginTop:50,
|
||||
inverted: true,
|
||||
style: {
|
||||
fontFamily: "Microsoft YaHei",
|
||||
color: "#fff",
|
||||
fontSize:'10px',
|
||||
// fontStyle: "italic"
|
||||
},
|
||||
},
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
@@ -190,8 +184,6 @@
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels: {
|
||||
},
|
||||
labels:{
|
||||
formatter:function(){
|
||||
if(this.value.length>7){
|
||||
@@ -206,10 +198,14 @@
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: null,
|
||||
text: 'linkNum',
|
||||
align:'high',
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
overflow: 'justify',
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
@@ -241,6 +237,17 @@
|
||||
data: data
|
||||
}],
|
||||
drilldown:{
|
||||
activeAxisLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei',
|
||||
|
||||
},
|
||||
activeDataLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei'
|
||||
},
|
||||
drillUpButton:{
|
||||
relativeTo: 'spacingBox',
|
||||
},
|
||||
@@ -281,10 +288,18 @@
|
||||
plotBorderWidth:null,
|
||||
plotShadow:false,
|
||||
type: 'column',
|
||||
// margin:50,
|
||||
marginTop:50,
|
||||
marginBottom:60,
|
||||
|
||||
},
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
labels:{
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontSize:'10px',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
},
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
@@ -293,17 +308,33 @@
|
||||
},
|
||||
xAxis: {
|
||||
categories: xData,
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontSize:'10px',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
|
||||
labels:{
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontSize:'10px',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: 'App',
|
||||
align:'high',
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels:{
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontSize:'10px',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
@@ -334,6 +365,17 @@
|
||||
data: data
|
||||
}],
|
||||
drilldown:{
|
||||
activeAxisLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei',
|
||||
|
||||
},
|
||||
activeDataLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei'
|
||||
},
|
||||
drillUpButton: {
|
||||
relativeTo: 'spacingBox',
|
||||
},
|
||||
@@ -389,9 +431,9 @@ function echart_2(rs){
|
||||
fontFamily:'Microsoft YaHei',
|
||||
}
|
||||
},
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: '<spring:message code="os_type"/>',
|
||||
text: null,
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontSize:'18px',
|
||||
@@ -402,15 +444,15 @@ function echart_2(rs){
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
enabled: false,
|
||||
format: '{point.name}'
|
||||
},
|
||||
},
|
||||
pie:{
|
||||
// showInLegend: true,
|
||||
showInLegend: true,
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) { // 鼠标滑过时动态更新标题
|
||||
mouseOver: function(e) {
|
||||
this.slice();
|
||||
},
|
||||
// 鼠标移出时,收回突出显示
|
||||
@@ -428,6 +470,15 @@ function echart_2(rs){
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend:{
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
itemStyle:{
|
||||
color: '#fff',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
|
||||
@@ -441,6 +492,17 @@ function echart_2(rs){
|
||||
data: data
|
||||
}],
|
||||
drilldown:{
|
||||
activeAxisLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei',
|
||||
|
||||
},
|
||||
activeDataLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei'
|
||||
},
|
||||
series:drillData,
|
||||
drillUpButton: {
|
||||
relativeTo: 'spacingBox',
|
||||
@@ -485,9 +547,6 @@ function echart_5(rs){
|
||||
type: 'pie'
|
||||
},
|
||||
legend:{
|
||||
layout:'vertical',
|
||||
align:'center',
|
||||
verticalAligh:'bottom',
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
@@ -496,9 +555,9 @@ function echart_5(rs){
|
||||
fontFamily:'Microsoft YaHei',
|
||||
}
|
||||
},
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: '<spring:message code="browser_type"/>',
|
||||
text: null,
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontSize:'18px',
|
||||
@@ -509,7 +568,7 @@ function echart_5(rs){
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
enabled: false,
|
||||
format: '{point.name}'
|
||||
},
|
||||
|
||||
@@ -530,7 +589,7 @@ function echart_5(rs){
|
||||
}
|
||||
},
|
||||
},
|
||||
// showInLegend: true,
|
||||
showInLegend: true,
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
@@ -549,6 +608,17 @@ function echart_5(rs){
|
||||
data: data
|
||||
}],
|
||||
drilldown:{
|
||||
activeAxisLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei',
|
||||
|
||||
},
|
||||
activeDataLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei'
|
||||
},
|
||||
series:drillData,
|
||||
drillUpButton: {
|
||||
relativeTo: 'spacingBox',
|
||||
@@ -594,19 +664,19 @@ function echart_4(rs){
|
||||
type: 'pie'
|
||||
},
|
||||
|
||||
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null,
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
enabled: false,
|
||||
format: '{point.name}'
|
||||
},
|
||||
// showInLegend: true,
|
||||
},
|
||||
pie:{
|
||||
showInLegend: true,
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) {
|
||||
@@ -627,6 +697,15 @@ function echart_4(rs){
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend:{
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
itemStyle:{
|
||||
color: '#fff',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
|
||||
@@ -640,6 +719,17 @@ function echart_4(rs){
|
||||
data: data,
|
||||
}],
|
||||
drilldown:{
|
||||
activeAxisLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei',
|
||||
|
||||
},
|
||||
activeDataLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei'
|
||||
},
|
||||
series:drillData,
|
||||
drillUpButton: {
|
||||
relativeTo: 'spacingBox',
|
||||
@@ -684,19 +774,19 @@ function echart_6(rs){
|
||||
type: 'pie'
|
||||
},
|
||||
|
||||
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null,
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
enabled: false,
|
||||
format: '{point.name}'
|
||||
},
|
||||
// showInLegend: true,
|
||||
},
|
||||
pie:{
|
||||
showInLegend: true,
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) { // 鼠标滑过时动态更新标题
|
||||
@@ -717,6 +807,15 @@ function echart_6(rs){
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
legend:{
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
itemStyle:{
|
||||
color: '#fff',
|
||||
fontFamily:'Microsoft YaHei',
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
|
||||
@@ -730,6 +829,17 @@ function echart_6(rs){
|
||||
data: data,
|
||||
}],
|
||||
drilldown:{
|
||||
activeAxisLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei',
|
||||
|
||||
},
|
||||
activeDataLabelStyle:{
|
||||
textDecoration:'none',
|
||||
color: '#fff',
|
||||
fontStyle:'Microsoft YaHei'
|
||||
},
|
||||
series:drillData,
|
||||
drillUpButton: {
|
||||
relativeTo: 'spacingBox',
|
||||
|
||||
Reference in New Issue
Block a user