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 = "";
$("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');
}
});
}
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章