英文:
echart horizontal bar make chart label outside bar
问题
In echarts version:5.3.3，你是否可以使标签（参见数字 630230、131744 等）位于柱形图之外，就像图片中显示的那样？
我能够使用这个 codesandbox https://codesandbox.io/s/echart-demo-histogram-manage-forked-ujjwvs?file=/src/App.tsx 实现下面的图像，标签显示在柱形图之后，
我想保持标签位于图表之外，就像第一张图片那样，有人之前能做到吗？
提前感谢任何帮助。
英文:
In echarts version:5.3.3
Is it possible to make the label(see the numbers 630230, 131744 etc..) outside of the bar like here in the image
I am able to do with this codesandbox https://codesandbox.io/s/echart-demo-histogram-manage-forked-ujjwvs?file=/src/App.tsx like the below image, where the label is coming after the bar,
I like to keep the label outside of the chart like the first image, anyone able to do it before?
thanks in advance for any help.
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const options = {
title: {
text: "World Populationss",
show: false
},
tooltip: {
trigger: "axis",
show: false,
axisPointer: {
type: "none"
}
},
legend: { show: false },
grid: null,
xAxis: {
type: "value",
show: false,
axisLine: {
show: false
},
z: 2,
axisTick: {
show: false
},
axisLabel: {
formatter: "{value}",
color: "#FFF", //var(--primary-text-color)
inside: false,
// ...
show: true
}
// boundaryGap: [0, 0.01]
},
yAxis: {
type: "category",
data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
show: true,
position: "left",
axisLine: {
show: false
},
z: 3,
axisTick: {
show: false
},
axisLabel: {
color: "#FFF", //var(--primary-text-color)
inside: true,
// ...
show: true
},
nameLocation: "start"
},
series: [
{
name: "2022",
type: "bar",
data: [18203, 23489, 29034, 104970, 131744, 630230],
label: {
show: true,
position: "top",
formatter: "{c}",
// position:"insideRight",
position: ["100%", "50%"]
},
yAxis: {
position: "top"
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#008D8E" // --histogram-item-gradient-background
},
{
offset: 1,
color: "#24C1C3" // color at 100%
}
],
global: false // default is false
},
borderRadius: 4,
normal: {
label: {
show: true,
position: "outside"
}
}
}
}
]
};
const App: React.FC = () => {
return (
<ReactECharts
theme={"dark"}
style={{ height: 400, width: 400 }}
option={options}
opts={{ renderer: "svg" }}
/>
);
};
export default App;
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
答案1
得分: 2
以下是翻译的内容：
就我所看到的情况，标签始终相对于柱形位置，因此没有将它们放在右侧的选项。
但是，您可以通过创建一个次要Y轴来实现您所寻找的效果，将该轴放置在绘图的右侧，并将该轴的标签设置为值本身。
还需要进行一些其他调整：
- 将X轴的
max设置为数据的最大值，以避免将最大值设置为一个会在右侧创建间隙的圆整值。 - 将
grid.containLabel设置为true，以确保绘图被缩放，以便次要Y轴的标签不被截断。
英文:
As far as I can see the labels are always positioned relative to the bars, so there's no option to place them to the right.
However, the effect you are looking for can be achieved by creating a secondary y axis, have that axis placed to the right of the plot and set the labels of that axis to the values themselves.
There are some other tweaks required:
- setting the
maxof the x axis to the maximum value of data to avoid setting the max to a round value that will create a gap to the right. - setting the
grid.containLabeltotrueto ensure the plot is scaled such that the labels of the secondary y axis are not cut off.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const data = [18203, 23489, 29034, 104970, 131744, 630230];
const myChart = echarts.init(document.querySelector('#chart'), 'dark');
const options = {
title: {
text: "World Populationss",
show: false
},
tooltip: {
trigger: "axis",
show: false,
axisPointer: {
type: "none"
}
},
legend: { show: false },
grid: {containLabel: true},
xAxis: {
type: "value",
show: false,
axisLine: {
show: false
},
max: Math.max(...data),
z: 2,
axisTick: {
show: false
},
axisLabel: {
formatter: "{value}",
color: "#FFF", //var(--primary-text-color)
inside: false,
show: true
},
boundaryGap: [0, 0.01]
},
yAxis: [{
type: "category",
data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
show: true,
position: "left",
axisLine: {
show: false
},
z: 3,
axisTick: {
show: false
},
axisLabel: {
color: "#FFF", //var(--primary-text-color)
inside: true,
// ...
show: true
},
nameLocation: "start"
},
{
type: "category",
data: data,
position: "right",
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: "#FFF", //var(--primary-text-color)
inside: false,
show: true
},
}],
series: [
{
name: "2022",
type: "bar",
data: data,
label: {
show: false,
formatter: "{c}",
position: "right",
distance: 0
},
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#008D8E" // --histogram-item-gradient-background
},
{
offset: 1,
color: "#24C1C3" // color at 100%
}
],
global: false // default is false
},
borderRadius: 4
// normal: {
// label: {
// show: true,
// position: ["100%", "50%"]
// }
// }
}
}
]
};
myChart.setOption(options);
<!-- language: lang-html -->
<div id="chart" style="width: 400px;height: 400px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
<!-- end snippet -->
Here's a fork of your react app
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论