为什么 yAxis axisLabel 左对齐是 Apache ECharts 中栏内的结果位置标签
Why yAxis axisLabel align left is resulting position label inside the bar in Apache ECharts
expetacion 结果是这样的 post: How to set labels align left in Horizontal Bar using chart.js? 但它是在 Apache ECharts 中实现的
有什么想法吗?
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var options = {
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {},
xAxis: [{
type: "value",
}],
yAxis: [{
type: "category",
axisLabel: {
align: 'left',
margin: 40
},
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
}],
series: [{
name: "直接访问",
type: "bar",
barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220]
}]
};
myChart.setOption(options);
#main {
height: 400px;
}
<div id="main"></div>
<p>Test</p>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
您可以为 axisLabel 设置 margin
,使标签可见。更新了您的代码片段
expetacion 结果是这样的 post: How to set labels align left in Horizontal Bar using chart.js? 但它是在 Apache ECharts 中实现的
有什么想法吗?
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var options = {
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
grid: {},
xAxis: [{
type: "value",
}],
yAxis: [{
type: "category",
axisLabel: {
align: 'left',
margin: 40
},
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
}],
series: [{
name: "直接访问",
type: "bar",
barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220]
}]
};
myChart.setOption(options);
#main {
height: 400px;
}
<div id="main"></div>
<p>Test</p>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
您可以为 axisLabel 设置 margin
,使标签可见。更新了您的代码片段