我前面有寫Echarts x軸文本內容太長的幾種解決方案 裏面有幾種方法,這裏面寫的是y軸的文本內容太長的時候很長很長 ,
滾動
此時y軸上的文本內容就開始想左側開始滾動
首先要把y軸的文本顯示爲false,然後用div代替y軸的文本部分
此文本內容是滾動顯示的 不會錄製gif 可以自行復制代碼查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,html{
width: 100%;
height: 100%;
background: #f1f1f1;
}
</style>
</head>
<body>
<div style="padding-bottom:0px;width:30%;height:30%">
<div style="box-shadow: none;margin-bottom: 0px;width:100%;height:100%;position:relative">
<p class="m10" style="margin: 0; padding:6px 10px;margin-bottom: 5px; border-bottom: 1px solid #f1f1f1; width: 100%;font-size: 14px;"><span>TOP10</span></p>
<div id="itemName" style="height:90%;width:15%;display: inline-block;position:absolute;top:12%"></div>
<div id="topCanvas" style="height:90%;width:85%;display: inline-block;">
</div>
</div>
</div>
<script src="../jquery-1.8.3.js"></script>
<script src="echarts.min.js"></script>
<script>
var data = {
"result":"success",
"nameList":[
"1-0001:我是長字段我要滾動了",
"2-0001:我是長字段我要滾動了1",
"3-0001:我是長字段要滾動了",
"4-0002:我是長字段",
"0", "0", "0", "0", "0", "0"
],
"numList":[
5, 2, 1, 1, 0, 0, 0, 0, 0, 0
]};
getTop();
function getTop() {
initTopChart(data);
var html = "";
for(var i = data.nameList.length-1;i >= 0;i--){
var itemName = "";
if (data.numList[i] != 0) {
itemName = data.nameList[i].split(':')[1];
}
html += '<div class="scrollItem" style="white-space:nowrap;height:9%;overflow: hidden;line-height: 30px;margin-left:10px;font-size: 12px;color:#808080" title="'+itemName+'">'+itemName+'</div>'
}
$("#itemName").html(html);
$(".scrollItem").each( function (index,elem) {
setTimeout(function () {
if (elem.scrollWidth > elem.offsetWidth) {
var div = $(elem);
var text = div.html();
div.empty();
div.append("<div style='margin-left:0;height:100%'>" + text + "</div>");
var childDiv = div.children();
var speed = 100;
var ml = 0;
var distance = elem.scrollWidth - elem.offsetWidth + 20; //額外向左滾動N px
function Marquee() {
if (ml < distance) {
ml++;
childDiv.css("marginLeft", "-" + ml + "px");
} else if (ml < distance + 10) {//到頭後停頓N個週期
ml++;
childDiv.css("marginLeft", "0px");
} else {
ml = 0;
}
}
var inter = setInterval(Marquee, speed);
elem.onmouseover = function(){
clearInterval(inter);
}
elem.onmouseout = function(){
inter = setInterval(Marquee,speed);
}
}
}, 0);
})
}
function initTopChart(data) {
var numList = data.numList.reverse();
var nameList = data.nameList.reverse();
var myChart = echarts.init(document.getElementById('topCanvas'));
var typeOption = {
title: {
text: "目錄使用次數Top10",
show: false,
x: 'left',
textStyle:{ //設置主標題風格
color:'#3d3d3d',//設置主標題字體顏色
fontWeight:"600",
},
},
color: ['#02a7ff'],
tooltip: {
trigger: 'axis',
formatter: function (params) {
if(params[0].name == "0") {
return '暫無數據';
}
var array = params[0].name.split(":");
var res = '編號 : ' + array[0];
res += '<br/>名稱 : ' + array[1];
res += '<br/>數量 : ' + params[0].value;
return res;
},
position:function(pos, params, dom, rect, size){
var top = $("#topCanvas div:last-child").css("top");
var left = $("#topCanvas div:last-child").css("left");
top = top.substring(0, top.length - 2);
left = left.substring(0, left.length - 2);
return [pos[0] + 200 - left, pos[1] + 20 - top];
},
axisPointer: { // 座標軸指示器，座標軸觸發有效
type: 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
}
},
legend: {
data: ['數量'],
show: false
},
grid: {
left: '40',
right: '35',
bottom: '10',
top:'0',
// height: 320,
containLabel: true
},
xAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color:'#999'
}
},
// minInterval:1,
splitLine:{//網格線的格式
// show:false//去掉y軸上的網格線——
lineStyle:{
color: '#999',//網格線顏色
width: 1,//網格線寬度
type: 'dashed'//網格線樣式
}
},
axisTick:{
show:false,
},
axisLabel:{//座標軸文字
color:"#666666",
fontFamily:"Arial"
}
}
],
yAxis: [
{
show:false,
type: 'category',
data:nameList,
axisLabel:{//座標軸文字
color:"#666666",
formatter :'{c}',
textStyle: {
show:false,
align:'left',
baseline:'middle',
}
}
}
],
series: [
{
name: '當前資源',
type: 'bar',
stack: '總量',
barWidth: 8,
data:data.numList,
itemStyle:{
//柱形圖圓角，鼠標移上去效果，如果只是一個數字則說明四個參數全部設置爲那麼多
emphasis: {
barBorderRadius: 30
},
normal: {
//柱形圖圓角，初始化效果
barBorderRadius:[10, 10, 10, 10],
}
},
label: {
normal: {
show: true,
position: 'right',
color:"#666666",
fontFamily:"Arial",
}
},
}
]
};
myChart.resize();
myChart.setOption(typeOption);
};
window.onresize = function(){
getTop();
}
</script>
</body>
</html>