|
...
|
...
|
@@ -21,6 +21,15 @@ export default { |
|
|
|
|
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
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 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.yAxisDataPerformance=[
|
|
|
|
{
|
|
...
|
...
|
@@ -29,6 +38,15 @@ export default { |
|
|
|
axisLabel: {
|
|
|
|
formatter: '{value} %'//以百分比显示
|
|
|
|
},
|
|
|
|
splitLine:{
|
|
|
|
lineStyle: {
|
|
|
|
color:'#0a1b31'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
min:0,
|
|
|
|
max:100,
|
|
|
|
splitNumber:10,
|
|
|
|
interval:(100-0)/10
|
|
|
|
}, {
|
|
|
|
name: '单位:万',
|
|
|
|
type: 'value',
|
|
...
|
...
|
@@ -36,6 +54,15 @@ export default { |
|
|
|
show: true,
|
|
|
|
interval: 'right',//居中显示
|
|
|
|
},
|
|
|
|
splitLine:{
|
|
|
|
lineStyle: {
|
|
|
|
color:'#0a1b31'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
min:min2,
|
|
|
|
max:max2,
|
|
|
|
splitNumber:10,
|
|
|
|
interval:(max2-min2)/10
|
|
|
|
},
|
|
|
|
]
|
|
|
|
//业务双y轴数据
|
|
...
|
...
|
@@ -46,19 +73,30 @@ export default { |
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:[120, 132, 101, 134, 90, 230, 210],
|
|
|
|
data:data3,
|
|
|
|
yAxisIndex:1,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#97d5f4",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#97d5f4'
|
|
|
|
color:'#97d5f4',
|
|
|
|
width:1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
areaStyle: {
|
|
|
|
color:'rgba(151,213,244,0.1)'
|
|
|
|
// 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)'
|
|
|
|
}])
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
...
|
...
|
@@ -67,19 +105,20 @@ export default { |
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:[120, 132, 101, 134, 90, 230, 210],
|
|
|
|
data:data1,
|
|
|
|
yAxisIndex:0,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#efe0a7",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#efe0a7'
|
|
|
|
color:'#efe0a7',
|
|
|
|
width:1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
areaStyle: {
|
|
|
|
color:'rgba(239,224,167,0.2)'
|
|
|
|
color:'rgba(239,224,167,0)'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
...
|
...
|
@@ -88,19 +127,20 @@ export default { |
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:[220, 182, 191, 234, 290, 330, 310],
|
|
|
|
data:data2,
|
|
|
|
yAxisIndex:0,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#e5abd1",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#e5abd1'
|
|
|
|
color:'#e5abd1',
|
|
|
|
width:1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
areaStyle: {
|
|
|
|
color:'rgba(229,171,209,0.3)'
|
|
|
|
color:'rgba(229,171,209,0)'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
...
|
...
|
@@ -109,25 +149,61 @@ export default { |
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:[150,232,201,154,190,330,410],
|
|
|
|
data:data4,
|
|
|
|
yAxisIndex:1,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#97aaff",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#97aaff'
|
|
|
|
color:'#97aaff',
|
|
|
|
width:1,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
areaStyle: {
|
|
|
|
color:'rgba(151,170,255,0.4)'
|
|
|
|
color:'rgba(151,170,255,0)'
|
|
|
|
},
|
|
|
|
}
|
|
|
|
]
|
|
|
|
})
|
|
|
|
//计算最大值
|
|
|
|
const calMax=(arr)=>{
|
|
|
|
let max=0;
|
|
|
|
arr.forEach((el)=>{
|
|
|
|
el.forEach((el1)=>{
|
|
|
|
if(!(el1 === undefined || el1 === '')){
|
|
|
|
if(max<el1){
|
|
|
|
max=el1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
let maxint=Math.ceil(max/9.5);
|
|
|
|
let maxval=maxint * 10;//让显示的刻度是整数
|
|
|
|
return maxval;
|
|
|
|
}
|
|
|
|
//计算最小值
|
|
|
|
const calMin=(arr)=>{
|
|
|
|
let min=0;
|
|
|
|
arr.forEach((el)=>{
|
|
|
|
el.forEach((el1)=>{
|
|
|
|
if(!(el1 === undefined || el1 === '')){
|
|
|
|
if(min>el1){
|
|
|
|
min=el1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
let minint=Math.floor(min/10);
|
|
|
|
let minval=minint * 10;//让显示的刻度是整数
|
|
|
|
return minval;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return{
|
|
|
|
calMax,
|
|
|
|
calMin
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
|
|
\ No newline at end of file |
...
|
...
|
|
