Vue apexcharts Y轴标签隐藏在水平条形图中
Vue apexcharts Y-axis label hiding in horizontal barchart
我正在将 apexcharts 与 vue (vue-apexcharts 1.6.1) 结合使用,并为 UHD 分辨率制作水平条形图。 apexcharts 内部溢出了 100% 的图表宽度。
模板代码如下:
<template>
<div>
<apexchart height="820" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>
这里是图表选项:
options() {
return {
chart: {
type: 'bar',
width: "100%",
height: 820,
toolbar: {
show: false
}
},
legend: {
show: false
},
xaxis: {
categories: this.categoryData,
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
show: false
}
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
},
fill: {
colors: ["#0E5CAD", "#EA5455", "#0396FF", "#7367F0", "#D939CD"],
type: "gradient",
gradient: {
shade: "light",
gradientToColors: [
"#79f1a4",
"#feb692",
"#abdcff",
"#ce9ffc",
"#f6ceec"
],
shadeIntensity: 1,
type: "diagonal1",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
plotOptions: {
bar: {
horizontal: true,
distributed: true,
borderRadius: 10,
barHeight: "70%",
colors: {
ranges: [
{
from: 0,
to: 0,
color: "pink"
}
],
backgroundBarColors: "#272A52",
backgroundBarRadius: 10
}
}
},
dataLabels: {
enabled: false
},
tooltip: {
enabled: false
},
responsive: [
{
breakpoint: 3199,
options: {
chart: {
height: 300
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontsize: "14px"
}
}
},
plotOptions: {
bar: {
borderRadius: 4,
colors: {
backgroundBarRadius: 4
}
}
}
}
}
]
};
}
以上代码的输出如下:
Output of above code
Output of above code with dev tools
预期行为:
Expected behavior design
如何调整图表以使我的网站与设计相匹配?现在标签的字体大小在 UHD 分辨率下是 40px。
谢谢
P.S。我没有在任何祖先元素中使用 flex。
我正在将 apexcharts 与 vue (vue-apexcharts 1.6.1) 结合使用,并为 UHD 分辨率制作水平条形图。 apexcharts 内部溢出了 100% 的图表宽度。
模板代码如下:
<template>
<div>
<apexchart height="820" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>
这里是图表选项:
options() {
return {
chart: {
type: 'bar',
width: "100%",
height: 820,
toolbar: {
show: false
}
},
legend: {
show: false
},
xaxis: {
categories: this.categoryData,
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
show: false
}
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
},
fill: {
colors: ["#0E5CAD", "#EA5455", "#0396FF", "#7367F0", "#D939CD"],
type: "gradient",
gradient: {
shade: "light",
gradientToColors: [
"#79f1a4",
"#feb692",
"#abdcff",
"#ce9ffc",
"#f6ceec"
],
shadeIntensity: 1,
type: "diagonal1",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
plotOptions: {
bar: {
horizontal: true,
distributed: true,
borderRadius: 10,
barHeight: "70%",
colors: {
ranges: [
{
from: 0,
to: 0,
color: "pink"
}
],
backgroundBarColors: "#272A52",
backgroundBarRadius: 10
}
}
},
dataLabels: {
enabled: false
},
tooltip: {
enabled: false
},
responsive: [
{
breakpoint: 3199,
options: {
chart: {
height: 300
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontsize: "14px"
}
}
},
plotOptions: {
bar: {
borderRadius: 4,
colors: {
backgroundBarRadius: 4
}
}
}
}
}
]
};
}
以上代码的输出如下: Output of above code Output of above code with dev tools
预期行为: Expected behavior design
如何调整图表以使我的网站与设计相匹配?现在标签的字体大小在 UHD 分辨率下是 40px。
谢谢
P.S。我没有在任何祖先元素中使用 flex。