87,902
社区成员
发帖
与我相关
我的任务
分享[ECharts]柱状图label数值被柱子遮挡了，怎么处理？
如图，当数值比较长时，超出部分的数会被后面的柱子遮挡，我想让文字显示在柱子的上层，请高手指点，谢谢。
...全文
请发表友善的回复…
发表回复
泡泡鱼_ 2021-04-20
- 打赏
- 举报
你找找看相关的资料，这个东东是不是有默认的保留小数点后一位？泡泡鱼_ 2021-04-20
- 打赏
- 举报
我怎么看着感觉不像是被挡住了。倒像是数值本身做了精度取舍。依据是：大家都是柱子，为什么前面的蓝绿没挡住数字？你
你
jio可 2021-04-20
- 打赏
- 举报
右键数字看看样式，确定是被挡住？不是被截取了？
Hello World, 2021-04-20
- 打赏
- 举报
建议用新版本的，好像优化了标签的显示，不会挡住
ksig188 2021-04-20
- 打赏
- 举报
如果红色柱子的数值也很长的话，会不会被覆盖？
Hello World, 2021-04-20
- 打赏
- 举报
老版本的话可以设置z的值，值大的显示在上面，但只能设置系列的，不能设置label的
ksig188 2021-04-20
- 打赏
- 举报
我改了Serias里的zlevel是可以实现某个柱子的优先级的，但是如果优先级低柱子上的数字太长的话这样又不行了……
Hello World, 2021-04-20
- 打赏
- 举报
在线示例没有问题，你换个新版本好了
jio可 2021-04-20
- 打赏
- 举报
修改显示文字dom的层级z-index应该可以
ksig188 2021-04-20
- 打赏
- 举报
以下是代码：
// 柱状图模块1
(function () {
// 1实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 2. 指定配置项和数据
var option = {
color: ["blue", "green","red"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['订单吨数', '发货吨数', '生产产量'],
orient:'horizontal',
align:'auto',
textStyle:{
color:'yellow'
}
},
// 修改图表的大小
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis: [
{
type: "category",
data: [
"大铝排",
"大铜排",
"封闭母线",
"高端软连接",
"机械加工",
"其他",
"金融行业",
"软连接"
],
axisTick: {
alignWithLabel: true
},
// 修改刻度标签 相关样式
axisLabel: {
color: "rgba(255,255,255,.6) ",
fontSize: "10"
},
// 不显示x坐标轴的样式
axisLine: {
show: false
}
}
],
yAxis: [
{
type: "value",
// 修改刻度标签 相关样式
axisLabel: {
color: "rgba(255,255,255,.6) ",
fontSize: 12
},
// y轴的线条改为了 2像素
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 2
}
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
series: [
{
name: "订单吨数",
type: "bar",
barWidth: "20%",
data: [920, 828, 64, 6, 35, 54, 1158, 1222],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5
},
label: {
show: true,
position: 'top',
color:'white',
fontSize:8,
Animation: true
}
},
{
name: "发货吨数",
type: "bar",
barWidth: "20%",
data: [1051.888111222, 670.123456, 60, 6, 8, 44, 484, 1096],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5
},
label: {
show: true,
position: 'inside',
color:'white',
fontSize:8,
Animation: true
}
},
{
name: "生产产量",
type: "bar",
barWidth: "20%",
data: [1009, 616, 75, 7, 8, 0, 435, 1052],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5
},
label: {
show: true,
position: 'top',
color:'white',
fontSize:8,
Animation: true
}
}
]
};
// 3. 把配置项给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
ksig188 2021-04-20
- 打赏
- 举报
ksig188 2021-04-20
- 打赏
- 举报
如果是多位数整数，也是被挡着了，奇怪的是右面的柱子能挡住数字，左边的不挡；
而且也没有进行四舍五入，我设置的Label的位置是inside；
