页面布局都使用的rem单位,最后写好图表,发现尺寸非常小,无法变大
配置项如下
option = {
title: {
text: '业务受理接口成功率实时情况(24小时内)',
x: 'center',
textStyle: {
color: '#fff',
fontSize: '14'
}
},
color: ['red'],
tooltip: {
trigger: 'axis'
/* formatter : "{b}: {c}(%)"*/
},
toolbox: {
show: false
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
interval: 1,
textStyle: {
color: '#4185EA',
fontSize: '10'
},
/* formatter:function(value)
{
/!* if(value=="00:00"){
value="当:天";
}
return value.split(":").join("\n");*!/
}*/
},
axisTick: {
show: true,
interval: 0
},
axisLine: {
show: true,
onZeroAxisIndex: '1',
lineStyle: {
color: '#4185EA',
width: 1
},
symbol: ['none', 'arrow'],
symbolSize: [5, 7]
},
splitLine: {
show: false
},
data: []
}],
yAxis: [{
type: 'value',
name: '成功率(%)',
position: 'left',
axisTick: {
show: true,
interval: 0
},
axisLine: {
show: true,
lineStyle: {
color: '#4185EA'
},
symbol: ['none', 'arrow'],
symbolSize: [5, 7]
},
axisLabel: {
show: true,
interval: 0,
textStyle: {
color: '#4185EA'
}
},
/*min: function(value) {
return value.min>80?value.min:80;
},*/
min: '99',
max: '100',
splitLine: {
show: false
},
data: []
},
{
type: 'value',
show: false,
name: '成功率(%)',
position: 'right',
axisLine: {
show: false
},
axisLabel: {
show: false
},
min: '-0.5',
max: '0.5',
splitLine: {
show: false
},
data: []
}
],
visualMap: {
type: 'piecewise',
bottom: 0,
right: 'center',
precision: 1, //设置小数精度,默认0没有小数
orient: 'horizontal',
pieces: [
{
gte: 0,
lte: 99.5,
color: '#FF0000',
symbol: 'circle'
}, {
gt: 99.5,
lte: 99.9,
color: '#FFFF00',
symbol: 'circle'
}, {
gt: 99.9,
lte: 100,
color: '#00FF00',
symbol: 'circle'
}
],
outOfRange: {
color: '#FF0000',
symbol: 'circle'
},
textStyle: {
color: '#fff',
fontSize: '12'
}
},
series: [{
name: '业务接口成功率',
type: 'line',
data: [],
symbol: 'circle', //拐点样式
symbolSize: 6, //拐点大小
showAllSymbol: true,
itemStyle: {
normal: {
lineStyle: {
width: 2 //折线宽度
}
}
},
lineStyle: { //线颜色
normal: {
color: '#DECF25'
}
},
markLine: {
silent: true,
symbol: 'none',
label: {
normal: {
show: true,
position: 'start'
}
},
lineStyle: {
normal: {
color: '#4185EA',
width: '0'
}
},
data: [{
yAxis: 99.5
}]
}
},
{
name: '业务接口成功率',
type: 'line',
yAxisIndex: 1,
data: [],
symbol: 'circle', //拐点样式
symbolSize: 6, //拐点大小
showAllSymbol: true,
itemStyle: {
normal: {
lineStyle: {
width: 2 //折线宽度
}
}
},
lineStyle: { //线颜色
normal: {
color: '#DECF25'
}
}
}
]
};