<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--引入js文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></script>
<div id="charts2" style="width: 99%; height: 390px; margin: 3px auto;"></div>
<script>
window.onload = function () {
var option = {
title: {
text: 'xxxx统计',
x: 'left',
y: 'top',
textStyle: {
fontSize: 14,
fontStyle: 'normal',
fontWeight: 'bold',
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
x: '15%',
textStyle: { //图例文字的样式
fontSize: 12
},
data: ['xxxx']
},
grid: {
left: '3%',
right: '2%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'category',
scale: true,
triggerEvent: true,
//设置文本过长超出隐藏...表示
axisLabel: {
margin: 8,
formatter: function (params) {
var val = "";
if (params.length > 4) {
val = params.substr(0, 4) + '...';
return val;
} else {
return params;
}
}
},
//也可以从后台获取数据
data: ['这是名称 非常长的商品1',
'这是名称比商品1还长很多的商品2', '这同样是名称很长的商品3这同样是名称很长的商品3这同样是名称很长的商品3这同样是名称很长的商品3这同样是名称很长的商品3', '短的商品4']
},
yAxis: {
type: 'value',
},
series: [{
name: 'xxxx',
type: 'bar',
stack: '总量',
barWidth: 3,
label: {
normal: {
show: false,
position: 'insideRight',
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
}
},
data: [123]
}]
};
// 基于准备好的dom，初始化echarts实例
var chart2 = echarts.init(document.getElementById('charts2'));
chart2.clear();
chart2.setOption(option);
// 页面监控宽度的变化
window.addEventListener("resize", function () {
chart2.resize();
});
extension(chart2);//这个方法是用来处理鼠标悬浮显示全部内容的
function extension(chart2) {
//判断是否创建过div框,如果创建过就不再创建了
//该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
var id = document.getElementById("extension");
if (!id) {
var div = "<div id = 'extension' sytle=\"display:block\"></div>";
$("html").append(div);
}
chart2.on('mouseover', function (params) {
console.log(params)
//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
if (params.componentType == "xAxis") {
//设置悬浮文本的位置以及样式
$('#extension').css({
"position": "absolute",
"color": "#333",
"font-size": "12px",
"padding": "5px",
"display": "inline",
'border-radius': '4px',
'background-color': 'rgba(255, 255, 255, 0.5)',
'box-shadow': 'rgba(0, 0, 0, 0.3) 2px 2px 8px'
}).text(params.value);
$("html").mousemove(function (event) {
var xx = event.pageX - 10;
var yy = event.pageY + 15;
$('#extension').css('top', yy).css('left', xx);
});
}
});
chart2.on('mouseout', function (params) {
//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
if (params.componentType == "xAxis") {
$('#extension').css('display', 'none');
}
});
}
}
</script>
</body>
</html>
![[OpenCV-Python] 7 把鼠标当画笔](https://www.kunjuke.com/file/css/thumb/1.jpg/280-180.jpg)
