如圖，當數值比較長時，超出部分的數會被后面的柱子遮擋，我想讓文字顯示在柱子的上層，請高手指點，謝謝。
uj5u.com熱心網友回復：
右鍵數字看看樣式，確定是被擋住？不是被截取了？uj5u.com熱心網友回復：
我怎么看著感覺不像是被擋住了。倒像是數值本身做了精度取舍。依據是：大家都是柱子，為什么前面的藍綠沒擋住數字？
你
uj5u.com熱心網友回復：
你找找看相關的資料，這個東東是不是有默認的保留小數點后一位？
uj5u.com熱心網友回復：
如果是多位數整數，也是被擋著了，奇怪的是右面的柱子能擋住數字，左邊的不擋；而且也沒有進行四舍五入，我設定的Label的位置是inside；
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
以下是代碼：// 柱狀圖模塊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();
});
uj5u.com熱心網友回復：
修改顯示文字dom的層級z-index應該可以uj5u.com熱心網友回復：
在線示例沒有問題，你換個新版本好了
uj5u.com熱心網友回復：
我改了Serias里的zlevel是可以實作某個柱子的優先級的，但是如果優先級低柱子上的數字太長的話這樣又不行了……
uj5u.com熱心網友回復：
老版本的話可以設定z的值，值大的顯示在上面，但只能設定系列的，不能設定label的
uj5u.com熱心網友回復：
如果紅色柱子的數值也很長的話，會不會被覆寫？
uj5u.com熱心網友回復：
建議用新版本的，好像優化了標簽的顯示，不會擋住轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/278318.html
標籤：JavaScript