gfwleak/k18-ntcs-web-ntc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图表调整

Browse Source
This commit is contained in:
zhanghongqing
2018-08-01 12:59:29 +08:00
parent 170249033b
commit 80b2623cc5
7 changed files with 445 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/webapp/static/global/plugins/highcharts/css/common.css
View File

@@ -105,4 +105,4 @@ td a:hover {
color:red;
text-decoration:underline
} */
/*content 结束*/
/*content 结束*/

94
src/main/webapp/static/global/plugins/highcharts/css/data_text.css
View File

@@ -5,6 +5,98 @@
padding-top: 40px;
padding-bottom: 10px;
}
/* */
.data_content .data_info{
width: calc(100% - 30px);
margin-bottom: 40px;
height: 110px;
margin-left: 15px;
text-align: center;
}
.data_content .data_info .info_1{
width: 40%;
height: 110px;
}
.data_content .data_info .fr{
width: 40%;
border: 1px solid #303030;
border-width: 0 1px;
margin-left: 0px;
}
.data_content .data_info .info_1>.text_1{
width: calc(100% - 15px);
background-color: #3D3D3D;
height: 110px;
}
.data_content .data_info .info_2{
width: 31%;
height: 110px;
}
.data_content .data_info .info_1 .fr:first-child{
border-left: none;
}
.data_content .data_info .info_1 .fr:last-child{
border-right: none;
}
.data_content .data_info .info_2>.text_2{
width: calc(100% - 15px);
background-color: #3D3D3D;
height: 110px;
}
.data_content .data_info .info_3{
width: 29%;
height: 110px;
}
.data_content .data_info .info_3>.text_3{
width:100%;
background-color: #3D3D3D;
height: 110px;
}
.data_content .data_info>div.info_1>.text_1>div{
width: 33.333%;
position: relative;
}
.data_content .data_info>div.info_2>div>div,
.data_content .data_info>div.info_3>div>div{
width: 50%;
position: relative;
}
.data_content .data_info>div>div>div>div{
margin-left:40px;
margin-top: 1px;
}
.data_content .data_info>div.info_2>div>div>div{
margin-left: 40px;
margin-top: 1px;
}
.data_content .data_info p:nth-child(1){
color:#fff;
font-size: 12.8px;
}
.data_content .data_info p:nth-child(2){
font-weight: 600;
font-size: 28px;
color:#ffff43;
}
.data_content .data_info>div.info_2 p:nth-child(2){
font-weight: 600;
font-size: 28px;
color:#25f3e6;
}
.data_content .data_info>div.info_3 p:nth-child(2){
font-weight: 600;
font-size: 28px;
color:#ff4e4e;
}
/* info end */
.data_content .data_main{
width: calc(100% - 30px);
height: 430px;
@@ -303,4 +395,4 @@
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
10px 0px 15px #3D3D3D inset; /*右边阴影*/
/*0px 10px 15px #3D3D3D inset;*/
}
}

44
src/main/webapp/static/global/plugins/highcharts/echart.js
View File

@@ -28,7 +28,7 @@
});
});
console.log(data)
var chart = Highcharts.chart('chart_1', {
chart: {
type: 'pie',
@@ -40,6 +40,14 @@
// margin:10,
},
noData:{
position:{
align:'center'
},
style: {//设置字体颜色
color: '#fff',
},
},
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: {
text: null
@@ -84,7 +92,6 @@
point: {
events: {
mouseOver: function(e) { // 鼠标滑过时动态更新标题
console.log(e)
// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
chart.setTitle({
text: '<br>'+e.target.name,
@@ -111,7 +118,7 @@
type: 'pie',
innerSize: '70%',//圆环的大小
name: 'count',
data: data
data: []
}],
drilldown:{
series:drillData,
@@ -174,6 +181,11 @@
marginTop:50,
inverted: true,
},
noData:{
style: {//设置字体颜色
color: '#fff',
},
},
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: {
text: null
@@ -292,6 +304,11 @@
marginBottom:60,
},
noData:{
style: {//设置字体颜色
color: '#fff',
},
},
labels:{
style: {//设置字体颜色
color: '#fff',
@@ -420,6 +437,11 @@ function echart_2(rs){
plotShadow:false,
type: 'pie'
},
noData:{
style: {//设置字体颜色
color: '#fff',
},
},
legend:{
layout:'vertical',
align:'center',
@@ -556,6 +578,11 @@ function echart_5(rs){
fontFamily:'Microsoft YaHei',
}
},
noData:{
style: {//设置字体颜色
color: '#fff',
},
},
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: {
text: null,
@@ -669,6 +696,11 @@ function echart_4(rs){
title: {
text: null,
},
noData:{
style: {//设置字体颜色
color: '#fff',
},
},
plotOptions: {
series: {
dataLabels: {
@@ -774,7 +806,11 @@ function echart_6(rs){
plotShadow:false,
type: 'pie'
},
noData:{
style: {//设置字体颜色
color: '#fff',
},
},
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: {
text: null,

12
src/main/webapp/static/global/plugins/highcharts/js/no-data-to-display.js Normal file
View File

@@ -0,0 +1,12 @@
/*
Highcharts JS v6.1.0 (2018-04-13)
Plugin for displaying a message when there is no data visible in chart.
(c) 2010-2017 Highsoft AS
Author: Oystein Moseng
License: www.highcharts.com/license
*/
(function(d){"object"===typeof module&&module.exports?module.exports=d:d(Highcharts)})(function(d){(function(c){var d=c.seriesTypes,e=c.Chart.prototype,f=c.getOptions(),g=c.extend,h=c.each;g(f.lang,{noData:"No data to display"});f.noData={position:{x:0,y:0,align:"center",verticalAlign:"middle"}};f.noData.style={fontWeight:"bold",fontSize:"12px",color:"#666666"};h("bubble gauge heatmap pie sankey treemap waterfall".split(" "),function(b){d[b]&&(d[b].prototype.hasData=function(){return!!this.points.length})});
c.Series.prototype.hasData=function(){return this.visible&&void 0!==this.dataMax&&void 0!==this.dataMin};e.showNoData=function(b){var a=this.options;b=b||a&&a.lang.noData;a=a&&a.noData;!this.noDataLabel&&this.renderer&&(this.noDataLabel=this.renderer.label(b,0,0,null,null,null,a.useHTML,null,"no-data"),this.noDataLabel.attr(a.attr).css(a.style),this.noDataLabel.add(),this.noDataLabel.align(g(this.noDataLabel.getBBox(),a.position),!1,"plotBox"))};e.hideNoData=function(){this.noDataLabel&&(this.noDataLabel=
this.noDataLabel.destroy())};e.hasData=function(){for(var b=this.series||[],a=b.length;a--;)if(b[a].hasData()&&!b[a].options.isInternal)return!0;return this.loadingShown};c.addEvent(c.Chart,"render",function(){this.hasData()?this.hideNoData():this.showNoData()})})(d)});