echarts中 設(shè)置x||y軸文案、提示文字等為固定字?jǐn)?shù)，超出顯示"..."

起初看到這種需求的時(shí)候，我是這個(gè)狀態(tài)

對(duì)，我是拒絕的，人家echats畫出來(lái)就是一個(gè)canvas，你讓我怎么加...

但是，作為一個(gè)“有點(diǎn)追求的”前端，我得想招試試

總結(jié)下來(lái)，唯一的突破點(diǎn)就是echarts的配置了。

echarts配置項(xiàng)網(wǎng)址：http://echarts.baidu.com/option.html

最后果然被我找到了~

一、先說(shuō)x||y軸的文案處理：

如圖，x軸的配置也就都在這里了

而關(guān)于x軸文案的設(shè)置，就是這個(gè)axisLabel?屬性了

而跟內(nèi)容有關(guān)的也就是這個(gè)formatter了，他有一個(gè)強(qiáng)大的回調(diào)函數(shù)，其參數(shù)value就是軸上顯示的文案。

用這個(gè)萬(wàn)能的回調(diào)函數(shù)，還怕什么刁鉆的效果是做不出來(lái)的！

于是，一頓操作效果就出來(lái)了

代碼如下：

axisLabel?:?

?{

?????formatter?:?function(value)

?????{

?????????let?valueTxt?=?'';

?????????if(value.length?>?3)?{

?????????????valueTxt?=?value.substring(0,?4)?+?'...';

?????????}

?????????else{

?????????????valueTxt?=?value;

?????????}

?????????returnvalueTxt?;

?????}

?}

二、圖表上提示文案加“...”

后來(lái)，餅圖的數(shù)據(jù)提示文案也要求這個(gè)設(shè)置，這次我不慌了。

依照這個(gè)思路，我就去餅圖配置項(xiàng)中找答案去了；

同理，負(fù)責(zé)顯示文案的是label這個(gè)屬性，那么提示內(nèi)容肯定也是歸他管的！

果然，讓我找到了，這個(gè)強(qiáng)大的formatter！formatter！formatter！

他也有強(qiáng)大的回調(diào)函數(shù)，返回的參數(shù)更是多！

其中，參數(shù)params的name屬性就是要顯示的文案

所以同理又是一段操作，效果也出來(lái)了：

代碼如下：

label?:?

?{

?????normal?:?

?????{

?????????show?:?true,?position?:?'inner',

?????????formatter?:?function(params)

?????????{

?????????????console.log(params)?let?newName?=?'';

?????????????if(params.name.length?>?5)?{

?????????????????newName?=?params.name.substring(0,?5)?+?'...';

?????????????}

?????????????else{

?????????????????newName?=?params.name;

?????????????}

?????????????returnnewName;

?????????}

?????}

?},

效果也就出來(lái)啦！