Echarts y轴(x轴)文本内容太长的解决方案--文本滚动

最新推荐文章于 2024-04-08 16:46:45 发布

D_Jiffy

最新推荐文章于 2024-04-08 16:46:45 发布

阅读量624

点赞数

分类专栏：前端

原文链接：https://blog.csdn.net/zm_miner/article/details/79471361

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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

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>