图表样式及国际化修改

This commit is contained in:
zhanghongqing
2018-07-18 09:14:15 +08:00
parent 9400b7e089
commit 9794452376
4 changed files with 186 additions and 56 deletions

View File

@@ -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 结束*/

View File

@@ -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;*/

View File

@@ -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',