起初看到這種需求的時候，我是這個狀態
對，我是拒絕的，人家echats畫出來就是一個canvas，你讓我怎么加...
但是，作為一個“有點追求的”前端，我得想招試試
總結下來，唯一的突破點就是echarts的配置了。
echarts配置項網址：http://echarts.baidu.com/option.html
最后果然被我找到了
一、先說x||y軸的文案處理：
如圖，x軸的配置也就都在這里了
而關於x軸文案的設置，就是這個axisLabel屬性了
而跟內容有關的也就是這個formatter了，他有一個強大的回調函數，其參數value就是軸上顯示的文案，
用這個萬能的回調函數，還怕什么刁鑽的效果是做不出來的！
於是，一頓操作效果就出來了
代碼如下：
1 axisLabel : 2 { 3 formatter : function (value) 4 { 5 let valueTxt = ''; 6 if (value.length > 3) { 7 valueTxt = value.substring(0, 4) + '...'; 8 } 9 else { 10 valueTxt = value; 11 } 12 return valueTxt ; 13 } 14 }
二、圖表上提示文案加“...”
后來，餅圖的數據提示文案也要求這個設置，這次我不慌了。
依照這個思路，我就去餅圖配置項中找答案去了；
同理，負責顯示文案的是label這個屬性，那么提示內容肯定也是歸他管的！
果然，讓我找到了，這個強大的formatter！
他也有強大的回調函數，返回的參數更是多！
其中，參數params的name屬性就是要顯示的文案
所以同理又是一段操作，效果也出來了：
代碼如下：
1 label : 2 { 3 normal : 4 { 5 show : true, position : 'inner', 6 formatter : function (params) 7 { 8 console.log(params) let newName = ''; 9 if (params.name.length > 5) { 10 newName = params.name.substring(0, 5) + '...'; 11 } 12 else { 13 newName = params.name; 14 } 15 return newName; 16 } 17 } 18 },
總結，依照這個思路，以后想要對提示文案啥的做任何"非人類"的創意設置，都是可以的了！
+1+1+1 ^_^
聲明：
請尊重博客園原創精神，轉載或使用圖片請注明：
博主：xing.org1^
出處：http://www.cnblogs.com/padding1015/