最近在做頁面可視化的時候使用到了Echarts的條狀圖，由於信息太長，顯示的空間有限，導致顯示不全。現在的解決方案是超過一定的字符數後面的字符就省略顯示，用“...”代替，當鼠標懸停到相應的條目上時，又全顯示出來，現在就記錄一下解決過程。
如圖
需要的效果
現在上代碼
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script> --> <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script> --> <!-- <script type="text/javascript"src="https://code.jquery.com/jquery-3.1.1.min.js"></script> --> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 50%"></div> </body> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; option = { xAxis: { minInterval: 1, type:'value', axisLabel: { inside: false, textStyle: { color: '#000000', fontSize:12 } }, axisTick: { show: false }, axisLine: { show: false }, splitLine:{ show:true, lineStyle:{ type:'dashed', color:'#E9E9E9' } }, }, yAxis: { triggerEvent: true, data:['MySql數據庫腳本數', 'Oracle數據庫腳本數', 'HIve數據庫腳本數', 'Hbase數據庫腳本數'], type:"category", axisLine: { show: true, lineStyle:{ color:'#E9E9E9' } }, axisTick: { show: true, lineStyle:{ color:'#E9E9E9' } }, axisLabel: { textStyle: { color: '#000' }, formatter: function(value) { var res = value; if(res.length > 6) { res = res.substring(0, 5) + "..."; } return res; } }, splitLine:{ show:false, } }, series: [ { type: 'bar', barWidth:"40%", itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ {offset: 0, color: '#0057B5'}, {offset: 0.5, color: '#0057B5'}, {offset: 1, color: '#0057B5'} ] ) }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ {offset: 0, color: '#0057B5'}, {offset: 0.7, color: '#0057B5'}, {offset: 1, color: '#0057B5'} ] ) } }, data: [120, 200, 150, 80], type: 'bar' } ] }; myChart.setOption(option); extension(myChart); function extension(mychart) { //判斷是否創建過div框,如果創建過就不再創建了 var id = document.getElementById("extension"); if(!id) { var div = "<div id = 'extension' sytle=\"display:none\"></div>" $('#container').append(div); } mychart.on('mouseover', function(params) { if(params.componentType == "yAxis") { $('#extension').css({ "position": "absolute", "color": "black", // "border":"solid 1px blue", "font-family": "PingFangSC", "font-size": "14px", "font-weight":"400", "padding": "5px", "color":"rgba(255,255,255,1)", "display": "inline", "background-color":"#30465A", "line-height":"17px" }).text(params.value); $("html").mousemove(function(event) { var xx = event.pageX - 30; var yy = event.pageY + 20; $('#extension').css('top', yy).css('left', xx); }); } }); mychart.on('mouseout', function(params) { if(params.componentType == "yAxis") { $('#extension').css('display', 'none'); } }); }; </script> </html>