monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit d41ca3c7d5813a0c19f9cd8dd8ac77c88d8cff46 2 parents 99f2051b 4e86e814

Merge branch 'master-v32-lushangqing' into 'master' 

大屏及电子税务局的业务性能指标图列颜色及区域面积更改



See merge request !115
Inline Side-by-side
Showing 2 changed files with 31 additions and 18 deletions
@@ -11,7 +11,7 @@ export default { @@ -11,7 +11,7 @@ export default {
11 titleFontSize:20, 11 titleFontSize:20,
12 domainName:sessionStorage.getItem('domainName'), 12 domainName:sessionStorage.getItem('domainName'),
13 apiUrl:'/api-web/sxview/getBusinessAvailability', 13 apiUrl:'/api-web/sxview/getBusinessAvailability',
14 - kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4', 14 + kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
15 busId: '53bebbd79f384f619513b50666ea1d48', 15 busId: '53bebbd79f384f619513b50666ea1d48',
16 performanceData:'', 16 performanceData:'',
17 xAxisData:'', 17 xAxisData:'',
@@ -41,17 +41,19 @@ export default { @@ -41,17 +41,19 @@ export default {
41 41
42 // 半透明的颜色值 42 // 半透明的颜色值
43 const colorArr1 = [ 43 const colorArr1 = [
44 - 'rgba(255,0,255, 0.8)',  
45 'rgba(23,212,152, 0.8)', 44 'rgba(23,212,152, 0.8)',
46 'rgba(253,152,58, 0.8)', 45 'rgba(253,152,58, 0.8)',
47 - 'rgba(255,113,66, 0.8)' 46 + 'rgba(255,238,0, 0.8)',
  47 + 'rgba(255,113,66, 0.8)',
  48 + 'rgba(255,0,255, 0.8)',
48 ] 49 ]
49 // 全透明的颜色值 50 // 全透明的颜色值
50 const colorArr2 = [ 51 const colorArr2 = [
51 - 'rgba(255,0,255, 0)',  
52 'rgba(23,212,152, 0)', 52 'rgba(23,212,152, 0)',
53 'rgba(253,152,58, 0)', 53 'rgba(253,152,58, 0)',
54 - 'rgba(255,113,66, 0)' 54 + 'rgba(255,238,0, 0)',
  55 + 'rgba(255,113,66, 0)',
  56 + 'rgba(255,0,255, 0)',
55 ] 57 ]
56 // 挂载完 58 // 挂载完
57 Vue.onMounted(() => { 59 Vue.onMounted(() => {
@@ -73,7 +75,7 @@ export default { @@ -73,7 +75,7 @@ export default {
73 let xAxisData=Vue.ref([]); 75 let xAxisData=Vue.ref([]);
74 let yAxisData=Vue.ref([]); 76 let yAxisData=Vue.ref([]);
75 let mapData={ 77 let mapData={
76 - legend:[ "可用性","成功率","响应率","业务告警量"], 78 + legend:[ "成功率","响应率","业务量","业务告警量","可用性"],
77 x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45", 79 x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45",
78 "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45", 80 "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45",
79 "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45", 81 "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45",
@@ -126,6 +128,10 @@ export default { @@ -126,6 +128,10 @@ export default {
126 }else{ 128 }else{
127 i=1; 129 i=1;
128 } 130 }
  131 + let areaStyle=0;
  132 + if(i==2){
  133 + areaStyle=1
  134 + }
129 ySeriesCommon.push( 135 ySeriesCommon.push(
130 { 136 {
131 name:item, 137 name:item,
@@ -148,7 +154,7 @@ export default { @@ -148,7 +154,7 @@ export default {
148 areaStyle: { 154 areaStyle: {
149 // color:'rgba(151,213,244,0.4)', 155 // color:'rgba(151,213,244,0.4)',
150 normal:{ 156 normal:{
151 - color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变 157 + color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
152 offset: 0, 158 offset: 0,
153 color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明 159 color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
154 }, { 160 }, {
@@ -226,7 +232,7 @@ export default { @@ -226,7 +232,7 @@ export default {
226 xAxis: { 232 xAxis: {
227 type: 'category', 233 type: 'category',
228 boundaryGap: false, 234 boundaryGap: false,
229 - data: xAxisData, 235 + data: proxy.xAxisData,
230 236
231 axisLine:{ 237 axisLine:{
232 show:false,//是否显示坐标线 238 show:false,//是否显示坐标线
@@ -21,7 +21,8 @@ export default { @@ -21,7 +21,8 @@ export default {
21 return { 21 return {
22 domainName:sessionStorage.getItem('domainName'), 22 domainName:sessionStorage.getItem('domainName'),
23 apiUrl:'/api-web/sxview/getBusinessAvailability', 23 apiUrl:'/api-web/sxview/getBusinessAvailability',
24 - kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4', 24 + // kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',//可用性，成功率，响应率，业务告警量
  25 + kpiIds:'KPIFE85BE59,KPI7A29BAC3,KPI5F8CCDA0,KPIE7A7E3E4,KPI97B835A4',//成功率，响应率，业务量，业务告警量，可用性
25 // busId:'7a9d2360e09f4ed8aaa8011ceb4178fd', 26 // busId:'7a9d2360e09f4ed8aaa8011ceb4178fd',
26 busId:'', 27 busId:'',
27 performanceData:'', 28 performanceData:'',
@@ -46,17 +47,19 @@ export default { @@ -46,17 +47,19 @@ export default {
46 }); 47 });
47 // 半透明的颜色值 48 // 半透明的颜色值
48 const colorArr1 = [ 49 const colorArr1 = [
49 - 'rgba(255,0,255, 0.8)',  
50 'rgba(23,212,152, 0.8)', 50 'rgba(23,212,152, 0.8)',
51 'rgba(253,152,58, 0.8)', 51 'rgba(253,152,58, 0.8)',
52 - 'rgba(255,113,66, 0.8)' 52 + 'rgba(255,238,0, 0.8)',
  53 + 'rgba(255,113,66, 0.8)',
  54 + 'rgba(255,0,255, 0.8)',
53 ] 55 ]
54 // 全透明的颜色值 56 // 全透明的颜色值
55 const colorArr2 = [ 57 const colorArr2 = [
56 - 'rgba(255,0,255, 0)',  
57 'rgba(23,212,152, 0)', 58 'rgba(23,212,152, 0)',
58 'rgba(253,152,58, 0)', 59 'rgba(253,152,58, 0)',
59 - 'rgba(255,113,66, 0)' 60 + 'rgba(255,238,0, 0)',
  61 + 'rgba(255,113,66, 0)',
  62 + 'rgba(255,0,255, 0)',
60 ] 63 ]
61 // 挂载完 64 // 挂载完
62 Vue.onMounted(() => { 65 Vue.onMounted(() => {
@@ -77,7 +80,7 @@ export default { @@ -77,7 +80,7 @@ export default {
77 let xAxisData=Vue.ref([]); 80 let xAxisData=Vue.ref([]);
78 let yAxisData=Vue.ref([]); 81 let yAxisData=Vue.ref([]);
79 let mapData={ 82 let mapData={
80 - legend:[ "可用性","成功率","响应率","业务告警量"], 83 + legend:[ "成功率","响应率","业务量","业务告警量","可用性"],
81 x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45", 84 x:[ "10:00","10:15","10:30", "10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45", "13:00","13:15","13:30","13:45",
82 "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45", 85 "14:00","14:15","14:30", "14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45", "17:00","17:15","17:30","17:45",
83 "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45", 86 "18:00","18:15","18:30", "18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45", "21:00","21:15","21:30","21:45",
@@ -86,7 +89,7 @@ export default { @@ -86,7 +89,7 @@ export default {
86 "06:00","06:15","06:30", "06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45", "09:00","09:15","09:30","09:45", 89 "06:00","06:15","06:30", "06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45", "09:00","09:15","09:30","09:45",
87 "10:00" 90 "10:00"
88 ], 91 ],
89 - y:[[ 0,1,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0] 92 + y:[[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0],[ 0,0,0,0,0,0,0,0]
90 ] 93 ]
91 } 94 }
92 if (data ) { 95 if (data ) {
@@ -129,6 +132,10 @@ export default { @@ -129,6 +132,10 @@ export default {
129 }else{ 132 }else{
130 i=1; 133 i=1;
131 } 134 }
  135 + let areaStyle=0;
  136 + if(i==2){
  137 + areaStyle=1
  138 + }
132 ySeriesCommon.push( 139 ySeriesCommon.push(
133 { 140 {
134 name:item, 141 name:item,
@@ -151,7 +158,7 @@ export default { @@ -151,7 +158,7 @@ export default {
151 areaStyle: { 158 areaStyle: {
152 // color:'rgba(151,213,244,0.4)', 159 // color:'rgba(151,213,244,0.4)',
153 normal:{ 160 normal:{
154 - color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变 161 + color:new echarts.graphic.LinearGradient(0, 0, 0, areaStyle, [{ //关键在这里, 设置面积渐变
155 offset: 0, 162 offset: 0,
156 color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明 163 color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
157 }, { 164 }, {
@@ -221,14 +228,14 @@ export default { @@ -221,14 +228,14 @@ export default {
221 grid: { 228 grid: {
222 top:'10%', 229 top:'10%',
223 left: '3%', 230 left: '3%',
224 - right: '4%', 231 + right: '8%',
225 bottom: '20%', 232 bottom: '20%',
226 containLabel: true, 233 containLabel: true,
227 }, 234 },
228 xAxis: { 235 xAxis: {
229 type: 'category', 236 type: 'category',
230 boundaryGap: false, 237 boundaryGap: false,
231 - data: xAxisData, 238 + data: proxy.xAxisData,
232 239
233 axisLine:{ 240 axisLine:{
234 show:false,//是否显示坐标线 241 show:false,//是否显示坐标线