echart横轴文字显示省略号_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...

最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称

样例:

图二是鼠标移动到名称显示的,怎么带着鼠标一起截图博主不是很清楚,不要在意这些细节好了.

这里来说一下博主的实现方式

1. 设定mychart.on('mouseover',functionx) ,mychart的鼠标悬浮事件,当鼠标移动到x轴的名称时触发这个事件.这里需要把x轴设置为

triggerEvent: true,切记.

2. 声明一个不显示的div框,这个框是用在鼠标移到类目上,显示展开的全部的名称的.

3. 获得鼠标的位置,把这个位置赋给div框

4.添加mychart.on('mouseout',functiony) 鼠标移除事件.

5. 当类目名称长度大于5的时候 博主就把他substring了  再拼接上"..".

下面是源码:

var myChart = echarts.init(document.getElementById('main'));

option = {

xAxis: {

triggerEvent: true,

type: 'category',

data: ['这是名称非常长的商品1', '这是名称比商品1还长很多的商品2', '这同样是名称很长的商品3', '短的商品4'],

axisLabel: {