1.首先在option中写入以下代码:
yAxis: {
data: [],
inverse: true,
interval: 0,
axisLine: {
lineStyle: {
color: '#333'
}
},
axisLabel: {
formatter: function (params) {
let index = params.indexOf('#');
let num = params.slice(index + 1);
let newParams = params.slice(0, index);
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = newParams.length;// 实际标签的个数
if(paramsNameNumber<=9){
newParamsName = newParams;
}else{
newParamsName = newParams.substring(0,7) + "...";
}
return '{value|' + newParamsName + '}' +'\n'+'{param|(' + num + ')}';
},
color: '#333',
rich: {
value: {
align: 'left',
height: 16,
lineHeight: 16,
width: 50
},
param: {
align: 'left',
height: 16,
lineHeight: 16,
fontSize: '10px',
width: 50,
color: '#36cebc',
}
}
},
axisTick: {
interval: 0
},
triggerEvent: true,// 设置为true后具有x轴文字过长,显示省略号,hover上去显示全部的功能
},
2.在文件中引入Echarts:
<Echart options={echartsData}
height={echartHeight}
/>
<div className={`x-axis-tip`}></div>
2.写入样式:
.x-axis-tip{
display: none;
position: absolute;
padding: 5px 5px;
font-size: 12px;
line-height: 18px;
color: #575757;
background: #FFFFFF;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.20);
border-radius: 4px;
}
3.在echarts文件中插入事件:
const chart = echarts.init(chartDom);
chart.setOption(this.props.options);
chart.on('mouseover', function (params) {
if( params.componentType == 'yAxis' ){
let offsetX = params.event.event.offsetX
let offsetY = params.event.event.offsetY
let xAxisTip = document.querySelector('.x-axis-tip')
xAxisTip.innerText = params.value.split("#")[0];
xAxisTip.style.left = offsetX + "px"
xAxisTip.style.top = offsetY + 10 + "px"
xAxisTip.style.display = 'block';
}
});
chart.on('mousemove', function (params) {
if( params.componentType == 'yAxis' ){
let offsetX = params.event.event.offsetX
let offsetY = params.event.event.offsetY
let xAxisTip = document.querySelector('.x-axis-tip')
xAxisTip.innerText = params.value.split("#")[0];
xAxisTip.style.left = offsetX + 30 + "px";
xAxisTip.style.top = offsetY + 10 + "px";
xAxisTip.style.display = 'block';
}
});
chart.on('mouseout', function (params) {
let xAxisTip = document.querySelector('.x-axis-tip')
xAxisTip.style.display = 'none';
});
this.chart = chart