修改图表样式

This commit is contained in:
zhanghongqing
2018-07-17 09:13:19 +08:00
parent 8d2347d8c3
commit 90b1c3b26f
6 changed files with 84 additions and 73 deletions

View File

@@ -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 {

View File

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

View File

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