修改图表样式
This commit is contained in:
@@ -57,8 +57,8 @@ a {
|
||||
width: 440px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
border-right: 5px solid #044562;
|
||||
border-left: 5px solid #044562;
|
||||
border-right: 5px solid #333333;
|
||||
border-left: 5px solid #333333;
|
||||
/* background: url(../img/title.png) no-repeat; */
|
||||
}
|
||||
.header-title>.title-center>a {
|
||||
@@ -72,7 +72,7 @@ a {
|
||||
.header-title>.title-left, .header-title>.title-right {
|
||||
width: calc(50% - 220px);
|
||||
height: 3px;
|
||||
background: #044562;
|
||||
background: #333333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.fl {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.data_content{
|
||||
/*overflow-x: hidden;*/
|
||||
/* min-width: 1366px; */
|
||||
background-color: #081832;
|
||||
background-color: #0E0E0E;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
@@ -17,12 +17,12 @@
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #034c6a;
|
||||
/*box-shadow: 0px 0px 10px #034c6a inset;*/
|
||||
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
||||
0px -10px 15px #034c6a inset, /*上边阴影*/
|
||||
10px 0px 15px #034c6a inset, /*右边阴影*/
|
||||
0px 10px 15px #034c6a inset;
|
||||
border: 1px solid #333333;
|
||||
/*box-shadow: 0px 0px 10px #333333 inset;*/
|
||||
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
|
||||
0px -10px 15px #333333 inset, /*上边阴影*/
|
||||
10px 0px 15px #333333 inset, /*右边阴影*/
|
||||
0px 10px 15px #333333 inset;
|
||||
position: relative;
|
||||
}
|
||||
.data_content .data_main .main_left div.left_1{
|
||||
@@ -36,7 +36,7 @@
|
||||
width: 180px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #034c6a;
|
||||
background-color: #333333;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
@@ -67,11 +67,11 @@
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #034c6a;
|
||||
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
||||
0px -10px 15px #034c6a inset, /*上边阴影*/
|
||||
10px 0px 15px #034c6a inset, /*右边阴影*/
|
||||
0px 10px 15px #034c6a inset;
|
||||
border: 1px solid #333333;
|
||||
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
|
||||
0px -10px 15px #333333 inset, /*上边阴影*/
|
||||
10px 0px 15px #333333 inset, /*右边阴影*/
|
||||
0px 10px 15px #333333 inset;
|
||||
position: relative;
|
||||
/*background: url("../img/chart_map.png") no-repeat center ;*/
|
||||
}
|
||||
@@ -79,7 +79,7 @@
|
||||
width: 180px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #034c6a;
|
||||
background-color: #333333;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
@@ -100,11 +100,11 @@
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #034c6a;
|
||||
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
||||
0px -10px 15px #034c6a inset, /*上边阴影*/
|
||||
10px 0px 15px #034c6a inset, /*右边阴影*/
|
||||
0px 10px 15px #034c6a inset;
|
||||
border: 1px solid #333333;
|
||||
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
|
||||
0px -10px 15px #333333 inset, /*上边阴影*/
|
||||
10px 0px 15px #333333 inset, /*右边阴影*/
|
||||
0px 10px 15px #333333 inset;
|
||||
position: relative;
|
||||
}
|
||||
.data_content .data_main .main_right div.right_1 .choice{
|
||||
@@ -153,7 +153,7 @@
|
||||
width: 180px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #034c6a;
|
||||
background-color: #333333;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
@@ -185,13 +185,13 @@
|
||||
.data_content .data_bottom .bottom_1{
|
||||
width: 22%;
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
||||
0px -10px 15px #034c6a inset, /*上边阴影*/
|
||||
10px 0px 15px #034c6a inset, /*右边阴影*/
|
||||
0px 10px 15px #034c6a inset;
|
||||
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
|
||||
0px -10px 15px #333333 inset, /*上边阴影*/
|
||||
10px 0px 15px #333333 inset, /*右边阴影*/
|
||||
0px 10px 15px #333333 inset;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #034c6a;
|
||||
border: 1px solid #333333;
|
||||
/*background: url("../img/chart_5.png") no-repeat;*/
|
||||
}
|
||||
.data_content .data_bottom .bottom_center{
|
||||
@@ -201,46 +201,46 @@
|
||||
.data_content .data_bottom .bottom_2{
|
||||
width: calc(53% - 10px);
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
||||
0px -10px 15px #034c6a inset, /*上边阴影*/
|
||||
10px 0px 15px #034c6a inset, /*右边阴影*/
|
||||
0px 10px 15px #034c6a inset;
|
||||
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
|
||||
0px -10px 15px #333333 inset, /*上边阴影*/
|
||||
10px 0px 15px #333333 inset, /*右边阴影*/
|
||||
0px 10px 15px #333333 inset;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #034c6a;
|
||||
border: 1px solid #333333;
|
||||
margin-left: 15px;
|
||||
/*background: url("../img/chart_6.png") no-repeat;*/
|
||||
}
|
||||
.data_content .data_bottom .bottom_3{
|
||||
width: calc(47% - 35px);
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
||||
0px -10px 15px #034c6a inset, /*上边阴影*/
|
||||
10px 0px 15px #034c6a inset, /*右边阴影*/
|
||||
0px 10px 15px #034c6a inset;
|
||||
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
|
||||
0px -10px 15px #333333 inset, /*上边阴影*/
|
||||
10px 0px 15px #333333 inset, /*右边阴影*/
|
||||
0px 10px 15px #333333 inset;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #034c6a;
|
||||
border: 1px solid #333333;
|
||||
/*background: url("../img/chart_7.png") no-repeat;*/
|
||||
margin-left:15px;
|
||||
}
|
||||
.data_content .data_bottom .bottom_4{
|
||||
width: 26%;
|
||||
height: 430px;
|
||||
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
||||
0px -10px 15px #034c6a inset, /*上边阴影*/
|
||||
10px 0px 15px #034c6a inset, /*右边阴影*/
|
||||
0px 10px 15px #034c6a inset;
|
||||
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
|
||||
0px -10px 15px #333333 inset, /*上边阴影*/
|
||||
10px 0px 15px #333333 inset, /*右边阴影*/
|
||||
0px 10px 15px #333333 inset;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #034c6a;
|
||||
border: 1px solid #333333;
|
||||
/*background: url("../img/chart_8.png") no-repeat;*/
|
||||
}
|
||||
.data_content .data_bottom div .main_title{
|
||||
width: 220px;
|
||||
height: 35px;
|
||||
line-height: 33px;
|
||||
background-color: #034c6a;
|
||||
background-color: #333333;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
top: -17px;
|
||||
@@ -274,7 +274,7 @@
|
||||
.data_content .data_bottom div .main_table th{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color:#61d2f7;
|
||||
color:#333333;
|
||||
text-align: center;
|
||||
}
|
||||
.data_content .data_bottom div .main_table th:nth-child(1){
|
||||
@@ -296,8 +296,8 @@
|
||||
.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: #072951;
|
||||
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
|
||||
10px 0px 15px #034c6a inset; /*右边阴影*/
|
||||
/*0px 10px 15px #034c6a inset;*/
|
||||
background-color: #0e0e0e;
|
||||
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
|
||||
10px 0px 15px #333333 inset; /*右边阴影*/
|
||||
/*0px 10px 15px #333333 inset;*/
|
||||
}
|
||||
@@ -170,13 +170,14 @@
|
||||
plotBorderWidth:null,
|
||||
plotShadow:false,
|
||||
type: 'bar',
|
||||
margin:80,
|
||||
// marginLeft:80,
|
||||
marginTop:50,
|
||||
inverted: true,
|
||||
style: {
|
||||
fontFamily: "Microsoft YaHei",
|
||||
color: "#fff",
|
||||
fontWeight: "normal",
|
||||
fontStyle: "italic"
|
||||
fontSize:'10px',
|
||||
// fontStyle: "italic"
|
||||
},
|
||||
},
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
@@ -189,15 +190,17 @@
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
overflow: 'justify',
|
||||
labels: {
|
||||
overflow: 'justify',
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontSize:'14px',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
},
|
||||
labels:{
|
||||
formatter:function(){
|
||||
if(this.value.length>7){
|
||||
return '<span>'+this.value.substring(0,7)+"..."+'</span>'
|
||||
}else{
|
||||
return this.value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
@@ -278,7 +281,8 @@
|
||||
plotBorderWidth:null,
|
||||
plotShadow:false,
|
||||
type: 'column',
|
||||
margin:50,
|
||||
// margin:50,
|
||||
marginBottom:60,
|
||||
},
|
||||
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
@@ -289,6 +293,12 @@
|
||||
},
|
||||
xAxis: {
|
||||
categories: xData,
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontSize:'10px',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
@@ -310,7 +320,7 @@
|
||||
allowOverlap: true, // 允许数据标签重叠
|
||||
style: {//设置字体颜色
|
||||
color: '#fff',
|
||||
fontSize:'12px',
|
||||
fontSize:'10px',
|
||||
fontFamily:'Microsoft YaHei'
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user