echar linestyle 实体_echart3 为什么设置nameTextStyle中的fontSize属性后,坐标轴上的标签字体大小都改变了?...

时间:2025-03-10 14:36:06

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尝试了,不行