monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 70a3c46ce68039b58e63aa42041e5d563cae58aa 2 parents 78c8b3de 34ea9403 master ... joke master-500-dev master-500-dev-0327 master-500-dev-LH master-500-dev-XuHaoJie master-500-dev-joke master-500-dev-lushangqing master-500-dev-lzc master-500-dev-xwx master-500-dev-yuanjinpeng master-500-dev-ztq master-500-dev-ztq1 master-500-log master-500-log-ztq master-500-prod master-500-prod-joke-new master-500-prod-lushangqing master-V32-LH master-V32-XuHaoJie master-V32-lgh master-joke master-mj master-mj-610 master-mj-joke master-mj-yuanjinpeng master-mj-ztq master-prod master-prod-500-lushangqing master-prod-lgh master-prod-lushangqing master-prod-xwx master-prod-xwx2 master-v32-joke master-v32-lushangqing master-v32-lzc master-v32-xwx master-v32-ztq master-v330 master-yuanjinpeng mater-ztq wangfeng wangfeng-500-dev wangfeng-mj wuhl-master tag-master-v320

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

电子税务局大屏系统响应及带宽占用接口联调



See merge request !44
Inline Side-by-side
Showing 32 changed files with 886 additions and 400 deletions
... ... @@ -38,4 +38,7 @@
@import "../css/cloudPlatform.css";
@import "../css/navTabs.css";
\ No newline at end of file
@import "../css/navTabs.css";
/*对比分析*/
@import "../css/analysis.css";
... ...
.analysis-index-container{
display: flex;
justify-content: center;
margin-top: 30px;
}
.iconAdd{
width:50%;
height:240px;
color:#00b3fe;
cursor: pointer;
border:1px dot-dash #00b3fe;
display: flex;
justify-content: center;
align-items: center;
}
/*add页面*/
.analysis-add-container{
height: 100%;
background-color: #f6f6f6;
}
.add-top{
background-color: #FFFFFF;
padding:20px;
margin-bottom: 20px;
width: 100%;
}
.add-bottom{
background-color: #FFFFFF;
padding:20px 30px;
width: 100%;
}
.classLine{
width:100%;
}
.add-top-title{
text-align: left;
}
.add-top-select{
display: flex;
justify-content: space-between;
}
.bottom-condition{
padding:0 20px;
display: flex;
flex-flow: column;
justify-content: space-around;
}
\ No newline at end of file
... ...
... ... @@ -58,7 +58,7 @@
}
.screen-left {
height: 100%;
width: 30%;
width: 26%;
}
.screen-left #left-top {
height: 56%;
... ... @@ -68,9 +68,12 @@
height: 43.8%;
position: relative;
}
.screen-left #left-bottom .declare-lineChart{
height: 100%;
}
.screen-middle {
height: 100%;
width: 40%;
width: 44%;
margin-top: 0.5%;
margin-left: 0.2%;
margin-right: 0.2%;
... ... @@ -85,14 +88,16 @@
.width-86{
width:86%;
margin-bottom: 10px;
align-items: flex-end;
}
.middle-right{
flex: 1;
width: 20%;
/*flex: 1;*/
position: relative;
left: -5%;
display: flex;
flex-flow: column;
justify-content: space-around;
justify-content: center;
}
.deduction-bottom{
height:40%;
... ... @@ -108,8 +113,12 @@
/*height: 32%;*/
position: relative;
}
.middle-left-declare{
width:100%;
}
.middle-left-declare-rate{
height: 36%;
width:86%;
}
.screen-middle #middle-bottom {
... ... @@ -130,7 +139,7 @@
}
.screen-right #right-top {
height: 32%;
height: 30%;
position: relative;
}
.screen-right #right-center {
... ... @@ -148,6 +157,9 @@
}
.cpu-dropdown{
text-align: right;
position: absolute;
right: 10px;
z-index: 1;
}
.cpu-dropdown .el-dropdown .el-dropdown-selfdefine{
color:#ffffff;
... ... @@ -173,22 +185,22 @@
}
.screen-bottom #bottom-one {
height: 100%;
width: 25%;
width: 26%;
position: relative;
}
.screen-bottom #bottom-two {
height: 100%;
width: 25%;
width: 22%;
position: relative;
}
.screen-bottom #bottom-three {
height: 100%;
width: 25%;
width: 22%;
position: relative;
}
.screen-bottom #bottom-four {
height: 100%;
width: 25%;
width: 30%;
position: relative;
}
.icon-arrow{
... ...
... ... @@ -60,7 +60,7 @@ body{font-size: 15px;}
}
.declare-lineChart{
height:100%;
height:50%;
}
.monitoring-bar{
height:50%;
... ... @@ -75,6 +75,7 @@ body{font-size: 15px;}
}
.performance-lineChart{
margin-top:30px;
flex: 1;
}
.screen-res{
width:45%;
... ... @@ -82,6 +83,11 @@ body{font-size: 15px;}
.screen-performance{
width:55%;
}
.performance-container{
height:100%;
display: flex;
flex-flow: column;
}
.performance-container .container-title{
margin-left:40px;
}
... ...
... ... @@ -104,6 +104,12 @@ const routes = [{
path: '/zjdaping',
name: 'zjdaping',
component: () => myImport('views/zjdaping/index')
},
{
path: '/analysis',
name: 'analysis',
// component: () => myImport('views/analysis/components/addIndex/index')
component: () => myImport('views/analysis/components/add/index')
}
];
... ...
<div class="analysis-add-container">
<el-row>
<div class="add-top">
<el-row>
<el-col :span="16" class="add-top-title">
<el-button type="primary">这里是场景名称</el-button>
</el-col>
<el-col :span="8" class="add-top-select">
<el-dropdown>
<el-button type="primary">
时间范围<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown>
<el-button type="primary">
契合频率<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button type="primary">保存按钮</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="classLine">
<lineChart></lineChart>
</div>
</el-col>
</el-row>
</div>
</el-row>
<el-row>
<div class="add-bottom">
<el-row>
<el-col :span="6" class="bottom-condition">
<el-row>
<el-col :span="24">
<el-dropdown>
<el-button >
电子税务局系统<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-dropdown>
<el-button >
资源类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-dropdown>
<el-button >
指标类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-input v-model="input" placeholder="Please input" />
</el-col>
</el-row>
</el-col>
<el-col :span="18">
<el-tabs type="border-card">
<el-tab-pane label="User">
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</el-tab-pane>
<el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</el-row>
</div>
\ No newline at end of file
... ...
export default {
name: 'addIndex',
template: '',
components:{},
data () {
return {
tableData: [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
],
}
},
setup(){
}
}
\ No newline at end of file
... ...
<div class="analysis-index-container">
<div class="iconAdd">
点击添加比对分析
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'addIndex',
template: '',
components:{},
data () {
return {
}
},
setup(){
}
}
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
\ No newline at end of file
... ...
export default {
name: 'analysis',
template: '',
components:{},
data () {
return {
}
},
setup(){
}
}
\ No newline at end of file
... ...
... ... @@ -8,177 +8,165 @@ export default {
},
data(){
return {
titleFontSize:20,
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getBusinessAvailability',
resourceStatisticsData:'',
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
busId:'247c0c978f574285bf642f55611ea75d',
performanceData:'',
xAxisData:'',
yAxisData:'',
optionData:'',
ySeriesCommon:[],
titleFontSize: 30,
ySeriesCommon:[]
}
},
computed: {
comtitleTextStyle () {
return {
fontSize: this.titleFontSize / 1.2 + 'px'
fontSize: this.titleFontSize / 2.1 + 'px'
}
},
comtitleImgStyle () {
return {
height: this.titleFontSize * 2.1 + 'px'
height: this.titleFontSize * 1.8 + 'px'
}
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
const xAxisData=Vue.ref();
const yAxisData=Vue.ref([]);
const legendData=Vue.ref([]);
// 半透明的颜色值
const colorArr1 = [
'rgba(151,213,244, 0.8)',
'rgba(239,224,167, 0.8)',
'rgba(229,171,209, 0.8)',
'rgba(151,170,255, 0.8)'
]
// 全透明的颜色值
const colorArr2 = [
'rgba(151,213,244, 0)',
'rgba(239,224,167, 0)',
'rgba(229,171,209, 0)',
'rgba(151,170,255, 0)'
]
// 挂载完
Vue.onMounted(() => {
proxy.screenAdapter();
proxy.getData();
})
const getData=()=> {
$.get(proxy.domainName + proxy.apiUrl, function (res) {
const getData=()=>{
let params = {
kpiIds: proxy.kpiIds,
busId: proxy.busId,
startTime:'',
endTime:'',
access_token:localStorage.getItem('access_token')
};
$.get(proxy.domainName +proxy.apiUrl,params,function (res) {
const data = res;
if (data && data.data) {
let resData = data.data;
if (data ) {
if(data.map){
let resData=data.map;
proxy.legendData=resData.legend;
proxy.xAxisData=resData.x;
proxy.yAxisData=resData.y;
}else{
let nullArr=[];
for(let i=0;i<4;i++){
nullArr.push(i)
proxy.legendData.push({
name:''
})
}
proxy.xAxisData=nullArr;
for(let i=0;i<4;i++){
proxy.yAxisData.push(nullArr);
}
}
proxy.optionInit();
}
// proxy.optionInit();
})
// proxy.optionInit();
proxy.optionInit();
}
const optionInit=()=>{
const optionInit=()=>{
let data3=[350, 350, 350, 350, 350, 350, 350];
let data4=[220, 182, 191, 234, 290, 330, 310];
let data2=[100, 100, 100, 100, 100, 100, 100];
let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52];
let data3=proxy.yAxisData[0];
let data4=proxy.yAxisData[3];
let data2=proxy.yAxisData[2];
let data1=proxy.yAxisData[1];
let min1=proxy.calMin([data1,data2]);
let max1=proxy.calMax([data1,data2]);
let min2=proxy.calMin([data3,data4]);
let max2=proxy.calMax([data3,data4]);
//业务双y轴数据
proxy.ySeriesCommon=[
{
name:'可用性',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:data3,
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97d5f4",//tooltip里的小圆点颜色
lineStyle:{
color:'#97d5f4',
width:1
}
}
},
areaStyle: {
// color:'rgba(151,213,244,0.4)',
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
offset: 0,
color: '#97d5f4' //这里是我设置的渐变的颜色从线条颜色变为透明
}, {
offset: 1,
color: 'rgba(151,213,244,0.1)'
}])
}
},
},
{
name:'成功率',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:data1,
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#efe0a7",//tooltip里的小圆点颜色
lineStyle:{
color:'#efe0a7',
width:1
}
}
},
areaStyle: {
color:'rgba(239,224,167,0)'
},
},
{
name:'响应率',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:data2,
yAxisIndex:0,
showSymbol:false,
itemStyle : {
normal : {
color:"#e5abd1",//tooltip里的小圆点颜色
lineStyle:{
color:'#e5abd1',
width:1
proxy.legendData.map((item,index)=>{
let i=0;
if(index%2==0 ||index%3==0){
i=0;
}else{
i=1;
}
proxy.ySeriesCommon.push(
{
name:item,
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:proxy.yAxisData[index],
yAxisIndex:i,
showSymbol:false,
itemStyle : {
normal : {
color:colorArr1[index],//tooltip里的小圆点颜色
lineStyle:{
color:colorArr1[index],
width:1
}
}
}
},
areaStyle: {
color:'rgba(229,171,209,0)'
},
},
{
name:'交易量',
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:data4,
yAxisIndex:1,
showSymbol:false,
itemStyle : {
normal : {
color:"#97aaff",//tooltip里的小圆点颜色
lineStyle:{
color:'#97aaff',
width:1,
},
areaStyle: {
// color:'rgba(151,213,244,0.4)',
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //关键在这里, 设置面积渐变
offset: 0,
color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
}, {
offset: 1,
color: colorArr2[index]
}])
}
}
},
areaStyle: {
color:'rgba(151,170,255,0)'
},
},
}
]
)
})
//业务双y轴数据
// let xAxisDataLength=proxy.ySeriesCommon[0].length;
let xAxisData=[];
for(let i=0;i<=24;i++){
if(i%4==0){
xAxisData.push(i+':00')
if(proxy.xAxisData){
proxy.xAxisData.map((item,index)=>{
if(index%20==0){
xAxisData.push(item)
}
})
}
}
let legendData=[];
$.each(proxy.ySeriesCommon,function (i,v){
legendData.push(v.name)
})
proxy.legendData=legendData;
proxy.optionData = {
title: {
text: ''
... ... @@ -308,6 +296,9 @@ export default {
calMin,
optionInit,
getData,
xAxisData,
yAxisData,
legendData,
screenAdapter
}
}
... ...
export default {
name: 'BandwidthCpu',
template: '',
props:['commandVal'],
components: {
'LineChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/lineChart/index')
... ... @@ -8,28 +9,22 @@ export default {
},
data () {
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/monitoring?function=',
optionData:'',
allData: {
polyline: {
title: "带宽占用监控",
unit: "MB",
data: [{
name: "入带宽",
data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
}, {
name: "出带宽",
data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
}]
},
xAxis: {
today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
}
},
allData: '',
newCommandVal:this.commandVal,
startValue: 0, // 区域缩放的起点值
endValue: 6, // 区域缩放的终点值
timerId: null // 定时器的标识
}
},
setUp(){
const allData=ref({});
return{
allData
}
},
mounted () {
this.getData()
window.addEventListener('resize', this.screenAdapter)
... ... @@ -39,15 +34,60 @@ export default {
window.removeEventListener('resize', this.screenAdapter)
clearInterval(this.timerId)
},
watch:{
commandVal(newValue, oldValue) {
this.newCommandVal=newValue
this.getData()
}
},
methods: {
async getData () {
// await this.$http.get()
// const { data: ret } = await this.$http.get('bandwidthcpu')
// this.allData = ret
// console.log(ret)
this.updateChart()
this.startInterval()
getData () {
let that=this;
$.get(this.domainName +this.apiUrl+this.newCommandVal,function (ret){
if(ret){
let dataArr=[];
let xAxisData=[];
if(ret.ports && ret.ports.length>1 ){
ret.ports.map((item,index)=>{
dataArr.push({
name:item.name,
data:item.data.y,
})
})
xAxisData=ret.ports[0].x
}else{
for(let i=0;i<12;i++){
dataArr.push('0')
}
}
that.allData= {
polyline: {
title: "带宽占用监控",
unit: "MB",
data:dataArr
/*data: [{
name: "入带宽",
data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
}, {
name: "出带宽",
data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
}]*/
},
xAxis: {
// today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
today: xAxisData
}
}
that.updateChart()
that.startInterval()
}
})
},
updateChart () {
// 半透明的颜色值
... ...
... ... @@ -84,7 +84,6 @@ export default {
})
this.allData = retData
console.log('111',this.allData)
this.updateChart()
},
updateChart () {
... ... @@ -92,18 +91,27 @@ export default {
['22%', '65%'],
['66%', '65%']
]
const seriesArr = this.allData.map((item, index) => {
const dataArr = []
item.data.map(inner => {
console.log(inner)
if(item.data){
item.data.map(inner => {
dataArr.push({
name: inner.name,
value: inner.num,
/*itemStyle: {
color: this.colorData[index]
}*/
})
})
}else{
dataArr.push({
name: inner.name,
value: inner.num,
/*itemStyle: {
color: this.colorData[index]
}*/
name: '暂无数据',
value: 0
})
})
}
return {
type: 'pie',
radius: ['28%', '42%'],
... ... @@ -122,8 +130,6 @@ export default {
data: dataArr
}
})
console.log("8**",seriesArr)
const dataOption = {
series: seriesArr
}
... ...
... ... @@ -16,10 +16,10 @@ export default {
unit: "cpu%",
data: [{
name: "80.12.97.2",
data: ["12","15","21","18","20","37","45","23","12","5","7","14"]
datas: ["12","15","21","18","20","37","45","23","12","5","7","14"]
}, {
name: "80.12.77.3",
data: ["22","35","41","68","70","57","45","33","24","15","7","10"]
datas: ["22","35","41","68","70","57","45","33","24","15","7","10"]
}]
},
xAxis: {
... ... @@ -30,6 +30,9 @@ export default {
endValue: 9, // 区域缩放的终点值
timerId: null, // 定时器的标识
titleFontSize: 30,
kpiIds:'KPI20352505',
resId:'4c582c0603654352ba4f905e88a56863',
resId1:'adeeddd6023a4157be523ac5d3b60ed6',
curve: 'KPIDA0ACBBP',
rateTitle: 'KPIDA0ACBBK',
... ... @@ -49,23 +52,81 @@ export default {
clearInterval(this.timerId)
},
methods: {
getData (that) {
getData1(that){
const { proxy } = Vue.getCurrentInstance();
/* var params = {
curve: that.curve,
rateTitle: that.rateTitle,
numerTitle: that.numerTitle
var params = {
resId: that.resId1,
kpiIds: that.kpiIds,
subResId: 'vmem',
startTime:'',
endTime:'',
access_token:localStorage.getItem("access_token")
};
proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
if(res.success){
console.log('9**',res.obj)
that.allData = res.obj;
// proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
var res={
code:'0',
data:{
kpiUnit:'%',
names:['20:10','21:10','22:15','23:15'],
series:[
{
name:'89.12.97.3',
datas:[0.8,1,1,1,1,0.7,1,1],
flag:'vmem'
}
]
}
}
if(res && res.data){
let resData=res.data;
that.allData.polyline.data.push(resData.series)
that.updateChart()
}
});*/
that.updateChart()
// });
},
getData (that) {
const { proxy } = Vue.getCurrentInstance();
var params = {
resId: that.resId,
kpiIds: that.kpiIds,
subResId: 'vmem',
startTime:'',
endTime:'',
access_token:localStorage.getItem("access_token")
};
// proxy.$http.get("/api-web/detail/his/line/base", params, function (res) {
var res={
code:'0',
data:{
kpiUnit:'%',
names:['20:10','21:10','22:15','23:15'],
series:[
{
name:'89.12.97.2',
datas:[1,1,1,1,1,1,1,1],
flag:'vmem'
}
]
}
}
if(res && res.data){
let resData=res.data;
that.allData = {
polyline: {
title: "申报库CPU监控",
unit: "cpu%",
data: resData.series
},
xAxis: {
today:resData.names
}
};
that.getData1(that)
}
// });
},
updateChart () {
... ... @@ -89,15 +150,16 @@ export default {
]
const timeArr = this.allData.xAxis.today
const seriesArr = this.allData.polyline.data;
const title=this.allData.polyline.title;
const unit=this.allData.polyline.unit;
this.declareNumer = this.allData.polyline.declareNumer
let seriesData=[];
$.each(seriesArr,function (index,item){
seriesData .push({
name: item.name,
type: 'line',
data: item.data,
data: item.datas,
smooth: true,
showSymbol:false,
itemStyle : {
... ... @@ -137,7 +199,7 @@ export default {
let xAxisData=timeArr;
this.optionData = {
title: {
text: '申报库CPU监控',
text: title,
left: 'center',
bottom: '8%',
textStyle: {
... ...
... ... @@ -87,7 +87,6 @@ export default {
};
proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
if(res.success){
console.log('9**',res.obj)
that.allData = res.obj;
that.updateChart()
// that.startInterval()
... ... @@ -158,9 +157,10 @@ export default {
},
grid: {
top:'3%',
left: '3%',
right: '4%',
bottom: '3%',
bottom: '2%',
containLabel: true,
},
xAxis: {
... ...
<div class="declare-report">
<div class="declare-report-top" :style="comtitlesizeStyle">
<div class="declare-report" >
<div class="declare-report-top" :style="comtitlesizeStyle" id="declareReport_ref">
<el-row>
<el-col :span="24">
<div class="grid-content bg-purple-dark">
... ...
export default {
name: 'declarePolyline',
name: 'declareReport',
template: '',
components: {},
data () {
... ... @@ -19,27 +19,29 @@ export default {
comtitletextStyle () {
return {
color: '#23ffff',
fontSize: this.titleFontSize / 1.2 + 'px'
fontSize: this.titleFontSize * 3 + 'px'
}
},
comtitlesizeStyle () {
return {
fontSize: this.titleFontSize / 2 + 'px'
fontSize: this.titleFontSize *2 + 'px'
}
},
comimgsizeStyle () {
return {
width: this.titleFontSize / 1.5 + 'px'
width: this.titleFontSize * 3 + 'px'
}
},
comboxtextStyle () {
return {
fontSize: this.titleFontSize / 3 + 'px'
fontSize: this.titleFontSize * 2 + 'px'
}
}
},
mounted () {
this.getData(this)
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
methods: {
... ... @@ -52,7 +54,6 @@ export default {
};
proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
if(res.success){
console.log('111',res.obj)
that.allData = res.obj;
const declareRate = that.allData.polyline.declareRate
if(declareRate.indexOf('.') > 0){
... ... @@ -65,6 +66,9 @@ export default {
}
});
},
screenAdapter () {
this.titleFontSize = document.getElementById('declareReport_ref').offsetWidth / 100 * 3.6
}
}
... ...
... ... @@ -6,7 +6,7 @@ export default {
return {
chartInstance: null,
allData: null,
titleFontSize: 30,
titleFontSize: 20,
// 扣款金额
deductionAmount: '0.00',
// 扣款笔数
... ... @@ -19,41 +19,41 @@ export default {
computed: {
comboximgleftStyle () {
return {
height: this.titleFontSize * 12.5 + 'px',
height: this.titleFontSize *10 + 'px',
// marginTop: this.titleFontSize * 3.5 + 'px',
// marginLeft: this.titleFontSize + 'px'
}
},
comboximgrightStyle () {
return {
height: this.titleFontSize * 12.5 + 'px',
height: this.titleFontSize *10 + 'px',
// marginTop: this.titleFontSize * 3.5 + 'px'
}
},
comcontextStyle () {
return {
fontSize: this.titleFontSize *3.5 + 'px'
fontSize: this.titleFontSize + 'px'
}
},
comtitlesizeStyle () {
return {
height: this.titleFontSize * 8.5 + 'px',
height: this.titleFontSize * 7 + 'px',
// width: this.titleFontSize * 6 + 'px'
}
},
comtitleTextStyle () {
return {
fontSize: this.titleFontSize *3.3 + 'px'
fontSize: this.titleFontSize /1.3 + 'px'
}
},
comnumberTextStyle () {
return {
fontSize: this.titleFontSize *3.2 + 'px'
fontSize: this.titleFontSize /0.5 + 'px'
}
},
comnumberUnitStyle () {
return {
fontSize: this.titleFontSize * 2 + 'px'
fontSize: this.titleFontSize / 0.6 + 'px'
}
}
},
... ...
... ... @@ -6,8 +6,8 @@
<div class="grid-content bg-purple" style="text-align:left;">
<span >
<!--title_box_1.png-->
<img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
<span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
<img :style="comTitleimgStyle" src="./src/assets/images/digitalDp/title-report-month-1.png">
<!-- <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>-->
</span>
</div>
</el-col>
... ...
... ... @@ -39,17 +39,17 @@ export default {
computed: {
comboximgStyle () {
return {
height: this.titleFontSize * 4.5 + 'px'
height: this.titleFontSize * 4.3 + 'px'
}
},
comTitleimgStyle () {
return {
width: this.titleFontSize * 12 + 'px'
width: this.titleFontSize * 10 + 'px'
}
},
comTitleSizeStyle () {
return {
fontSize: this.titleFontSize / 1.5 + 'px'
fontSize: this.titleFontSize / 1.6 + 'px'
}
},
comtitlimgStyle () {
... ... @@ -153,7 +153,6 @@ export default {
};
proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
if(res.success){
console.log(res.map)
const map = res.map
// 左边数
if(map.leftNumber){
... ... @@ -194,7 +193,6 @@ export default {
let xs = num[1]
// 整数部分处理，增加,
const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
console.log("444",intPartFormat)
if (xs != null) {
if(places == 0){
return intPartFormat + '.' + xs
... ...
... ... @@ -6,8 +6,8 @@
<div class="grid-content bg-purple" style="text-align:left;">
<span>
<!--title_box_1.png-->
<img :style="comTitleimgStyle" src="./src/assets/img/title_box_middle.png">
<span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>
<img :style="comTitleimgStyle" src="./src/assets/images/digitalDp/title-report-today.png">
<!-- <span class="span-box-title" :style="comTitleSizeStyle">{{leftTitle}}</span>-->
</span>
</div>
</el-col>
... ...
... ... @@ -39,17 +39,17 @@ export default {
computed: {
comboximgStyle () {
return {
height: this.titleFontSize * 4.5 + 'px'
height: this.titleFontSize * 4.3 + 'px'
}
},
comTitleimgStyle () {
return {
width: this.titleFontSize * 12 + 'px'
width: this.titleFontSize * 10 + 'px'
}
},
comTitleSizeStyle () {
return {
fontSize: this.titleFontSize / 1.5 + 'px'
fontSize: this.titleFontSize / 1.6 + 'px'
}
},
comtitlimgStyle () {
... ... @@ -153,15 +153,12 @@ export default {
};
proxy.$http.get("/api-web/bigScreen/digitalBoardData", params, function (res) {
if(res.success){
console.log(res.map)
const map = res.map
// 左边数
console.log(map.leftNumber)
if(map.leftNumber){
that.declaredAmountNumber = map.leftNumber
}
// 右边数
console.log(map.rightNumber)
if(map.rightNumber){
that.undeclaredAmountNumber = that.numberFilter(map.rightNumber,-1)
}
... ... @@ -196,7 +193,6 @@ export default {
let xs = num[1]
// 整数部分处理，增加,
const intPartFormat = zs.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
console.log("444",intPartFormat)
if (xs != null) {
if(places == 0){
return intPartFormat + '.' + xs
... ...
<div class="com-container" id="responsemonitor_ref">
<div class="cpu-dropdown">
<el-dropdown @command="handleCommand" >
<span class="el-dropdown-link">
请选择
<i class="icon-arrow"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="max">最大值</el-dropdown-item>
<el-dropdown-item command="ave">平均值</el-dropdown-item>
<el-dropdown-item command="min">最小值</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- <div class="com-chart" id="responsemonitor_ref"></div>-->
<LineChart :optionData="optionData" v-if="optionData"></LineChart>
<LineChart :optionData="optionData" v-if="optionData" ref="responseLine"></LineChart>
</div>
\ No newline at end of file
... ...
export default {
name: 'ResponseMonitor',
template: '',
props:['commandVal'],
components: {
'LineChart': Vue.defineAsyncComponent(
() => myImport('views/zjdaping/components/lineChart/index')
... ... @@ -8,28 +9,28 @@ export default {
},
data () {
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/bigScreen/monitoring?function=',
optionData:'',
titleFontSize:'30',
allData: {
polyline: {
title: "系统响应请求数监控",
unit: "MB",
data: {
name: "请求相应数/秒",
data: ["1200","1500","2100","1800","2000","3700","4500","2300","1200","500","700","140"]
}
},
xAxis: {
today: ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
}
},
allData: '',
newCommandVal:this.commandVal,
startValue: 0, // 区域缩放的起点值
endValue: 6, // 区域缩放的终点值
timerId: null // 定时器的标识
}
},
setUp(){
const allData=ref({});
// const commandVal=ref();
// const optionData=ref({});
return{
allData,
// optionData
// commandVal
}
},
mounted () {
this.initChart()
this.getData()
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
... ... @@ -38,53 +39,54 @@ export default {
window.removeEventListener('resize', this.screenAdapter)
clearInterval(this.timerId)
},
watch:{
commandVal(newValue, oldValue) {
this.newCommandVal=newValue
this.getData()
}
},
methods: {
initChart () {
/* this.chartInstance = echarts.init(document.getElementById('responsemonitor_ref'))
const initOption = {
grid: {
top: '15%',
left: '5%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
right: '2%',
top: '5%'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
getData () {
let that=this;
// await this.$http.get()
// const { data: ret } = await proxy.$http.get('bigScreen/monitoring?function=')
$.get(this.domainName +this.apiUrl+this.newCommandVal,(ret)=>{
if(ret){
let dataArr=[];
let xAxisData='';
if(ret.concurrence){
dataArr=ret.concurrence.data.y
xAxisData=ret.concurrence.data.x
}else{
for(let i=0;i<12;i++){
dataArr.push('0')
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#E6E8EB'
}
that.allData= {
polyline: {
title:"系统响应请求数监控",
unit: "MB",
data: {
name: "请求相应数/秒",
data: dataArr
}
},
xAxis: {
// today: ["10", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
today:xAxisData
}
}
that.updateChart()
that.startInterval()
}
this.chartInstance.setOption(initOption)*/
},
async getData () {
// await this.$http.get()
// const { data: ret } = await this.$http.get('responsemonitor')
// this.allData = ret
// console.log(ret)
this.updateChart()
this.startInterval()
})
},
updateChart () {
console.log("ddd",this.allData)
// 半透明的颜色值
const colorArr1 = [
'rgba(11, 168, 44, 0.5)',
... ... @@ -106,7 +108,6 @@ export default {
const timeArr = this.allData.xAxis.today
const seriesData = this.allData.polyline.data.data
const seriesName = this.allData.polyline.data.name
console.log(seriesName)
// 图例的数据
// const legendArr = this.allData.polyline.data.map(item => {
// return item.name
... ... @@ -205,6 +206,7 @@ export default {
};
},
screenAdapter () {
this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
const adapterOption = {
... ...
... ... @@ -138,7 +138,6 @@ export default {
kpiIdValue: that.kpiIdValue
};
proxy.$http.get("/api-web/bigScreen/topFive", params, function (res) {
console.log(res.data)
if(res.success){
that.allData = res.data
that.updateChart()
... ...
<div class="screen-container" id="bgscreen_ref">
<header class="screen-header" :style="screenheaderStyle">
<div>
<img style="width: 100%" src="/vue3/src/assets/images/digitalDp/header_border_dark.png" alt="">
<img style="width: 100%" src="/vue3/src/assets/images/digitalDp/head-bg.png" alt="">
</div>
<span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>
<!-- <span class="title" :style="titleStyle">浙江省电子税务局系统监控大屏</span>-->
<div class="title-left">
<img src="/vue3/src/assets/img/time-icon.png" :style="timelogoStyle" class="timelog">
<img src="/vue3/src/assets/images/digitalDp/icon-time.png" :style="timelogoStyle" class="timelog">
<span :style="datetimeStyle" >{{dateTime}}</span>
</div>
</header>
... ... @@ -66,8 +66,24 @@
<Availability></Availability>
</div>
<div id="right-bottom">
<div class="cpu-dropdown">
<el-dropdown @command="handleCommand" >
<span class="el-dropdown-link">
{{commandName}}
<i class="icon-arrow"></i>
</span>
<template #dropdown>
<el-dropdown-menu class="cpuDropdown">
<el-dropdown-item command="max">最大值</el-dropdown-item>
<el-dropdown-item command="avg">平均值</el-dropdown-item>
<el-dropdown-item command="min">最小值</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- 系统响应监控 折线 -->
<ResponseMonitor></ResponseMonitor>
<ResponseMonitor :commandVal="commandVal" ref="responseRef"></ResponseMonitor>
</div>
</section>
</div>
... ... @@ -87,7 +103,7 @@
</div>
<div id="bottom-four">
<!-- 带宽占用监控 折线 -->
<BandwidthCpu></BandwidthCpu>
<BandwidthCpu :commandVal="commandVal" ref="bandwidthRef" ></BandwidthCpu>
</div>
</section>
</div>
... ...
... ... @@ -52,7 +52,9 @@ export default {
return {
titleFontSize: 30,
dateTime: '00-00-00 00:00:00',
colorData:['#0D45FE','#00FFB9','#A35CFF']
colorData:['#0D45FE','#00FFB9','#A35CFF'],
commandName:'最大值',
commandVal:'max'
}
},
computed: {
... ... @@ -85,6 +87,21 @@ export default {
},
timeFormat (number) {
return number.length == 1 ? ('0' + number) : number
},
handleCommand(command){
console.log("newVal",command)
this.commandVal=command;
console.log("ne",this.commandVal)
if(command=='max'){
this.commandName="最大值";
}else if(command=='min'){
this.commandName="最小值";
}else{
this.commandName="平均值";
}
// this.$refs.responseRef.getData();
// this.$refs.bandwidthRef.getData();
}
},
mounted () {
... ...
... ... @@ -40,21 +40,15 @@
<div class="declare-title">
<div class="declare-bg volume-today"></div>
</div>
<div class="volume-today-container" v-for="(item,index) in volumeData">
<div v-if="volumdData" class="volume-today-container" v-for="(item,index) in volumeData">
<span class="volume-text">{{item.name}}</span>
<span :class="['volume-proportion',{'volume-proportion-doc':index==1,'volume-proportion-net':index==2}]" :style="item.styleVolume"></span>
<span class="volume-num">{{item.num1}}</span>
</div>
<!-- <div class="volume-today-container">
<span class="volume-text">涉税文书</span>
<span class="volume-proportion volume-proportion-doc" :style="styleVolumeDoc"></span>
<span class="volume-num num-doc">{{volumeNumDoc}}</span>
<div class="volume-today-container" v-else style="justify-content: center;">
<span>暂无数据</span>
</div>
<div class="volume-today-container">
<span class="volume-text">网上申报</span>
<span class="volume-proportion volume-proportion-net" :style="styleVolumeNet"></span>
<span class="volume-num num-net">{{volumeNumNet}}</span>
</div>-->
</div>
</div>
<div class="declare-right">
... ...
... ... @@ -74,7 +74,6 @@ export default {
})
const optionInit=()=>{
console.log("3232",proxy.ySeriesCommon)
let xAxisDataLength=proxy.ySeriesCommon[0].length;
let xAxisData=[];
for(let i=1;i<=xAxisDataLength;i++){
... ...
... ... @@ -8,100 +8,122 @@ export default {
data(){
return {
domainName:'http://192.168.0.245:8180/api-web',
myChart:'',
titleFontSize:30,
yAxisData:'',//y序列的数据
seriesData:[],//y轴数据
newOptionData:this.optionData,
chartId:'line-echart'
}
},
watch:{
optionData(newValue,oldValue){
this.newOptionData=newValue
this.chartSetOption()
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
/*$.get(proxy.domainName,function(res){
proxy.chartSetOption()
})*/
/* proxy.yAxisData=props.yAxisData;
proxy.seriesData=props.seriesData;
proxy.chartId=props.chartId;
// const chartDom = document.getElementById('line-echart-declare');
console.log("**!/",proxy.seriesData)
let xAxisDataLength=proxy.seriesData[0].data.length;
let xAxisData=[];
for(let i=1;i<=xAxisDataLength;i++){
xAxisData.push(i)
}*/
})
const chartSetOption=()=>{
const chartDom=proxy.$el
const myChart = echarts.init(chartDom);
proxy.myChart=myChart;
/* window.addEventListener('resize', proxy.screenAdapter)
proxy.screenAdapter()*/
let option=props.optionData;
console.log("testLIne0",chartDom,option)
/* option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(50,50,50,0.7)',
borderColor:"#333",
textStyle:{
color:"#fff",
align:'left'
}
/* option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(50,50,50,0.7)',
borderColor:"#333",
textStyle:{
color:"#fff",
align:'left'
}
},
legend: {
data: props.legendData,
itemHeight:0,//图例圆圈大小设置
y:'7px',
textStyle: {
color: '#ffffff',
fontsize:"12px"
}
},
legend: {
data: props.legendData,
itemHeight:0,//图例圆圈大小设置
y:'7px',
textStyle: {
color: '#ffffff',
fontsize:"12px"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
/!*toolbox: {
feature: {
saveAsImage: {}
}
},*!/
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
/!*toolbox: {
feature: {
saveAsImage: {}
}
},*!/
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxisData,
axisLine:{
show:false,//是否显示坐标线
},
axisTick: {
show: false //是否显示坐标刻度
},
axisLabel:{
color:'#ffffff',
},
axisLine:{
show:false,//是否显示坐标线
},
axisTick: {
show: false //是否显示坐标刻度
},
axisLabel:{
color:'#ffffff',
},
},
yAxis: proxy.yAxisData,
series: proxy.seriesData,
itemStyle:{
showSymbol:false
}
};*/
},
yAxis: proxy.yAxisData,
series: proxy.seriesData,
itemStyle:{
showSymbol:false
}
};*/
option && myChart.setOption(option);
}
})
const screenAdapter= ()=> {
proxy.titleFontSize = proxy.myChart.offsetWidth / 100 * 3.6
const adapterOption = {
legend: {
itemWidth: proxy.titleFontSize,
itemHeight: proxy.titleFontSize,
itemGap: proxy.titleFontSize,
textStyle: {
fontSize: proxy.titleFontSize / 2
}
}
}
proxy.myChart.setOption(adapterOption)
proxy.myChart.resize()
}
return{
chartSetOption,
screenAdapter
}
},
unmounted () {
// window.removeEventListener('resize', this.screenAdapter)
}
}
\ No newline at end of file
... ...
... ... @@ -10,13 +10,31 @@ export default {
return {
domainName:sessionStorage.getItem('domainName'),
apiUrl:'/api-web/sxview/getBusinessAvailability',
resourceStatisticsData:'',
kpiIds:'KPI97B835A4,KPIFE85BE59,KPI7A29BAC3,KPIE7A7E3E4',
busId:'247c0c978f574285bf642f55611ea75d',
performanceData:'',
xAxisData:'',
yAxisData:'',
optionData:'',
ySeriesCommon:[]
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 半透明的颜色值
const colorArr1 = [
'rgba(151,213,244, 0.8)',
'rgba(239,224,167, 0.8)',
'rgba(229,171,209, 0.8)',
'rgba(151,170,255, 0.8)'
]
// 全透明的颜色值
const colorArr2 = [
'rgba(151,213,244, 0)',
'rgba(239,224,167, 0)',
'rgba(229,171,209, 0)',
'rgba(151,170,255, 0)'
]
// 挂载完
... ... @@ -25,33 +43,88 @@ export default {
})
const getData=()=>{
$.get(proxy.domainName +proxy.apiUrl,function (res) {
let params = {
kpiIds: proxy.kpiIds,
busId: proxy.busId,
startTime:'',
endTime:'',
access_token:localStorage.getItem('access_token')
};
$.get(proxy.domainName +proxy.apiUrl,params,function (res) {
const data = res;
if (data && data.data) {
let resData=data.data;
console.log("ttttt",data)
if (data && data.map) {
let resData=data.map;
proxy.legendData=resData.legend;
proxy.xAxisData=resData.x;
proxy.yAxisData=resData.y;
}
// proxy.optionInit();
proxy.optionInit();
})
proxy.optionInit();
// proxy.optionInit();
}
const optionInit=()=>{
let data3=[350, 350, 350, 350, 350, 350, 350];
let data3=proxy.yAxisData[0];
let data4=[220, 182, 191, 234, 290, 330, 310];
let data2=[100, 100, 100, 100, 100, 100, 100];
let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52];
let data2=proxy.yAxisData[2];
let data1=proxy.yAxisData[1];
let min1=proxy.calMin([data1,data2]);
let max1=proxy.calMax([data1,data2]);
let min2=proxy.calMin([data3,data4]);
let max2=proxy.calMax([data3,data4]);
proxy.legendData.map((item,index)=>{
let i=0;
if(index%2==0 ||index%3==0){
i=0;
}else{
i=1;
}
proxy.ySeriesCommon.push(
{
name:item,
type: 'line',
smooth:true,
// stack: 'Total',
show:false,
data:proxy.yAxisData[index],
yAxisIndex:i,
showSymbol:false,
itemStyle : {
normal : {
color:colorArr1[index],//tooltip里的小圆点颜色
lineStyle:{
color:colorArr1[index],
width:1
}
}
},
areaStyle: {
// color:'rgba(151,213,244,0.4)',
normal:{
color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
offset: 0,
color: colorArr1[index] //这里是我设置的渐变的颜色从线条颜色变为透明
}, {
offset: 1,
color: colorArr2[index]
}])
}
},
},
)
})
//业务双y轴数据
proxy.ySeriesCommon=[
/* proxy.ySeriesCommon=[
{
name:'可用性',
name:proxy.legendData[0],
type: 'line',
smooth:true,
// stack: 'Total',
... ... @@ -83,7 +156,7 @@ export default {
},
},
{
name:'成功率',
name:proxy.legendData[1],
type: 'line',
smooth:true,
// stack: 'Total',
... ... @@ -148,20 +221,18 @@ export default {
color:'rgba(151,170,255,0)'
},
}
]
]*/
// let xAxisDataLength=proxy.ySeriesCommon[0].length;
let xAxisData=[];
for(let i=0;i<=24;i++){
if(i%4==0){
xAxisData.push(i+':00')
if(proxy.xAxisData){
proxy.xAxisData.map((item,index)=>{
if(index%20==0){
xAxisData.push(item)
}
})
}
}
let legendData=[];
$.each(proxy.ySeriesCommon,function (i,v){
legendData.push(v.name)
})
proxy.legendData=legendData;
proxy.optionData = {
title: {
text: ''
... ... @@ -187,9 +258,10 @@ export default {
},
grid: {
top:'2%',
left: '3%',
right: '4%',
bottom: '3%',
// bottom: '3%',
containLabel: true,
},
xAxis: {
... ...