在柱狀圖中，X軸類目名如果數據太長；
echarts會默認進行隱藏部分字段；
如果我們想讓每一個類目名都顯示出來，需要進行額外的處理
X軸類目名太長時,默認只顯示一部分類目名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4.9.0</title>
<script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts-en.common.js"></script>
</head>
<body>
<div style="width: 400px;height: 300px;"></div>
<script>
let myChart = echarts.init(document.querySelector('div'))
let colors = ['#4C98FB', '#83CCE7', '#26C7C8', '#73DEBD'];
let option = {
xAxis: {
type: 'category',
data: ['我是字段1cccccccc', '我是字段2', '我是字段3', '我是字段4', '我是字段5', '我是字段6', '我是字段7']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
分析原因
通過上面的現象，我們發現：
展示不出來的原因是水平標簽過多導致；
我們如果可以讓它傾斜的話，說不定可以全部展示出來；
我們可以使用 xAxis下的 axisLabel中的 rotate屬性來解決；
rotate:刻度標簽旋轉角度；這個值在 【90，-90】的范圍類
在類目軸的類目標簽顯示不下的時候可以通過旋轉防止標簽之間重疊。
使用傾斜角度讓每一個類目名顯示出來
xAxis: {
type: 'category',
data: ['我是字段1cccccccc2', '我是字段2', '段3', '我是字段4', '我是字段5', '我', '我是字段7'],
axisLabel: {
interval:0,
rotate:-20 // 表示傾斜的角度
}
},
interval這個屬性的簡單介紹
interval:坐標軸刻度標簽的顯示間隔，在類目軸中有效。
默認會采用標簽不重疊的策略顯示標簽。
可以設置成0表示強制顯示所有標簽。
如果設置為 1，表示『隔一個標簽』
可以用數值表示間隔的數據，也可以通過回調函數控制。
回調函數格式如下：
interval:(index:number, value: string) => {
// index表示該類目名的下標
// string表示該類目名
console.log(index,string)
return 1
},
如果返回的是true,表示顯示該類目名；
也就是說：可以返回數字或者布爾值
let option = {
xAxis: {
type: 'category',
axisLabel: {
interval:2, // x軸間隔2個類目名
},
data: ['我是1', '我是2', '我是3', '我是4', '我是5', '我是6', '我是7']
},
}
換行\n來處理這個問題
我們通過傾斜可以完全的把這個問題處理了；
可是有些時候，我們ui不想傾斜；那還有其他辦法嗎？可以換行
換行的話我們有兩種方式；
第1種:直接在data中通過\n換行
不推薦第1種這樣的方式去做；是因為如果圖表還有tooltip的話，會影響。
第2種：在formatter函數中去處理
xAxis: {
type: 'category',
data: ['我是\n字段1', '我是\n字段2', '段3', '我是\n字段4',
'我是\n字段5', '我是\n字段6', '我是\n字段7'
],
},
tooltip: {
// 使用formatter回調函數自定義顯示內容
formatter: function (params) {
// params是包含數據信息的對象
return params.name + ': ' + params.value;
}
},
xAxis: {
type: 'category',
data: ['我是\n字段1', '我是\n字段2', '段3', '我是\n字段4',
'我是\n字段5', '我是\n字段6', '我是\n字段7'
],
},
我們可以通過xAxis下的axisLabel下的formatter函數來進行換行,
這樣做不會改變原始數組，tooltip也不會出現任何問題；
如果像上面那樣做；改變原始數據；
tooltip: {
// 使用formatter回調函數自定義顯示內容
formatter: function (params) {
// params是包含數據信息的對象
return params.name + ': ' + params.value;
}
},
xAxis: {
interval: 0,
type: 'category',
data: ['我是字段1', '我是字段2', '我是字段3',
'我是字段4', '我是字段5', '我是字段6', '我是字段7'],
axisLabel: {
formatter: function (params) {
console.log('x',params)
return params.substring(0,2) + '\n' + params.substring(2)
}
}
},
超出進行隱藏部分名稱，hover顯示全部
現在我們要做這樣一個效果，
X軸中的類目名默認顯示2個字，超出部分隱藏，hover的時候顯示全部；
我們需要使用到echarts中的 mouseover 事件；
同時設置xAxis中的triggerEvent為true
xAxis: {
triggerEvent: true,
interval: 0,
type: 'category',
...其他配置項...
}
如果我們不設置triggerEvent: true鼠標移入X軸的類名不會被觸發
myChart.on('mouseover', (e) => {
console.log('鼠標移入X軸的類名不會被觸發',e)
})
實現的思路
我們需要動態創建一個dom節點，通過createElement來實現
注冊鼠標移入事件 myChart.on('mouseover',(e)=>{ })
通過e.event可以拿到offsetX和offsetY
緊接著將這個元素賦值(X軸類的全名稱),添加到html頁面中
鼠標的移出事件 myChart.on('mouseout',(e)=>{ })
let option = {
xAxis: {
// X軸的類目名必須設置這個屬性，移入事件才會被觸發
triggerEvent: true,
interval: 0,
type: 'category',
data: ['我是字段111111', '我是字段222222', '我是字段33333', '我是字段4', '我是字段5', '我是字段6', '我是字段7'],
axisLabel: {
formatter: function (params) {
return params.substring(0,2) + '...'
}
}
},
... 其他配置項
}
myChart.setOption(option);
myChart.on('mouseover', (e) => {
console.log('鼠標移入',e)
if(e.componentType === "xAxis"){
// 我們這里先判斷一個創建的dom節點是否存在
let tipNameDom = document.getElementById('tipNameDom')
console.log(1, tipNameDom)
// 如果不存在我們創建一個dom節點
if(!tipNameDom){
// 創建一個元素
var createDivElement = document.createElement('div')
// 給這個元素設置屬性
createDivElement.setAttribute('id', 'tipNameDom')
// // 設置元素的位置
createDivElement.style.display = 'block'
createDivElement.style.position = 'absolute'
// 獲取當前位置
createDivElement.style.top = e.event.offsetY + 15 + 'px'
createDivElement.style.left = e.event.offsetX - 10 + 'px'
// 這里需要使用 innerHTML，因為我們設置了一樣html的屬性
createDivElement.innerHTML = e.value
// document.querySelector('body').appendChild(createDivElement)
document.querySelector('body').appendChild(createDivElement)
}else {
tipNameDom.style.display = 'block'
tipNameDom.style.position = 'absolute'
// 獲取當前位置
tipNameDom.style.top = e.event.offsetY + 15 + 'px'
tipNameDom.style.left = e.event.offsetX - 10 + 'px'
// 這里需要使用 innerHTML，因為我們設置了一樣html的屬性
tipNameDom.innerHTML = e.value
}
}
})
// 移入事件如果被多次觸發，則hover的時候無法顯示全部
myChart.on('mouseout', function(params) {
console.log('移除元素',params )
if (params.componentType === 'xAxis') {
let elementDiv = document.querySelector('#tipNameDom')
console.log('elementDiv', elementDiv)
elementDiv.style.display = 'none'
}
})
是不是這樣就OK了？
其實，并不是的；
如果小伙伴們多次移入移出；
偶爾會出現光標明明是移入的狀態，但是類目名并沒有全部顯示出來；
此時已發現了移入事件被多次觸發；
怎么解決這個問題呢？
目前的我，并不知道如何去解決。我感覺是echarts的bug;
如果知道的大佬；可以解答一下，萬分感激；
作者：晚來南風晚相識
出處：https://www.cnblogs.com/IwishIcould/
該文章在 2024/4/29 17:38:14 編輯過
400 186 1886
