ui给出的设计图如下:
我用echarts3的折线图来实现。使用双y轴来显示84%。
但是设置第二个y轴的nameTextStyle中的fontSize属性后,坐标轴上的标签字体大小都改变了。
如下图:
核心代码如下:
var option = {
tooltip: {
trigger: "axis",
axisPointer : {
lineStyle : {
color: "#57617B"
}
},
formatter: '{b}:{c}%'
},
grid: {
left: 10,
right: 10,
top: "30%",
bottom: "6%",
containLabel: true
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#1e2d4e"
}
},
axisTick: {
show: true,
interval : 0,
lineStyle: {
color: "#1e2d4e"
}
},
axisLabel: {
fontSize : 12,
color: "#657c97",
fontFamily : "#Arial"
},
boundaryGap: false,
data: ['7/19', '7/20', '7/21', '7/22', '7/23', '7/24', '7/25']
},
yAxis: [{
name : "设备正常率(%)",
nameTextStyle : {
color: "#657c97",
padding : [5, 0, 0, 20],
fontFamily : "#Arial",
fontSize : 12
},
axisLine: {
show : false
},
splitLine: {
show: true,
lineStyle: {
color: "#1e2d4e"
}
},
axisTick : {
show : false
},
axisLabel: {
fontSize : 12,
color: "#657c97",
fontFamily : "#Arial"
},
type: "value"
},{
name : "84%",
nameTextStyle : {
color : "#19a1f7",
fontSize : 28, // 这个会影响坐标轴的字体大小,不懂为什么
fontFamily : "微软雅黑"
},
axisLine: {
show : false
},
splitLine: {
show : false
},
axisTick : {
show : false
},
axisLabel: {
show : false
},
type: "value"
}],
lineStyle : {
normal : {
color : "#19a1f7"
}
},
series: [{
name: "设备正常率",
yAxisIndex : 0,
areaStyle : {
normal: {
color: new (0, 0, 0, 1, [{
offset: 0,
color: "rgba(18, 62, 125, 1)"
}, {
offset: 1,
color: ' rgba(14, 30, 83, 0.2)'
}])
}
},
smooth: true,
type: "line",
symbolSize : 0,
data: [90, 50, 39, 50, 19, 82, 80]
}]
};
请问为什么会这样?
或者还有别的可以显示84%的方法吗?
使用title尝试了,不行