在echarts版本:5.3.3
是否可以像图中这样在酒吧外制作标签(参见数字 630230、131744 等)
我可以用这个 codesandbox https://codesandbox.io/s/echart-demo-histogram-manage-forked-ujjwvs?file=/src/App.tsx 就像下图一样,标签是来到酒吧后,
我喜欢把标签放在图表外面,就像第一张图片一样,以前有人能做到吗?
在此先感谢您的帮助。
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;
<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>