Echarts給折線圖給橫豎座標軸添加箭頭與標籤文字過長顯示不全處理

本人在做監控數據大屏時曾踩過不少坑，現將踩坑經驗總結如下，數據大屏demo請點擊這裏

一、餅圖處理標籤文字過長而顯示不全的解決方案

在使用echarts的過程中，有時會遇到標籤文字過長導致顯示不全的問題，如下圖：

例如圖中檢查結果和處罰種類都存在標籤文字過長超出顯示區域導致顯示不全的問題，這時候需要用到formatter回調函數對標籤文本進行處理。

處理後效果如下圖：

處理方式：自定義函數設定每行最多可顯示子數，多於設定子數進行換行處理

var pieOption = {
    ......
    series: [{
        ......
        name: '檢查結果',
        label: {
            normal: {
                position: 'outer',
                formatter: handleLabel  // 自定義函數 handleLabel 對標籤文本進行處理
            }
    }]
    ......
}


//處理標籤文本顯示問題
function handleLabel(e){
    let newStr = '';
    let start, end;
    let wordLen = e.name.length;                 //內容文字長度
    let maxWord = 8;                            //單行顯示最多字數
    let rowCount = Math.ceil(wordLen / maxWord);//最多顯示行數
    if (wordLen > maxWord) {
        for(let i = 0; i < rowCount; i++){
            let oldStr = '';
            start = i * maxWord;
            end = maxWord + start;
            if (i == rowCount - 1) {
                oldStr = e.name.substring(start);
            } else {
                oldStr = e.name.substring(start, end) + "\n";
            }
            newStr += oldStr;
        }
    }
    return newStr;
}
    

二、折線圖給橫豎座標軸添加箭頭

下圖爲要實現的最終效果

echarts官方文檔中可通過xAxis.axisLine.symbol，yAxis.axisLine.symbol分別對x，y座標軸線兩邊的箭頭進行設置。

除了arrow外，在 echarts 中 markPoint 的樣式還內置了 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’ 等幾種，如果這些都不太符合需要就必須自定義我們需要的樣式。
代碼如下：

xAxis:{
    type: 'value',
    axisLine: {
        ......
        symbol: ['none', 'arrow'],    //只在末端顯示箭頭
        ......        
    }
},
yAxis: {
    type: 'value',
    axisLine: {
    ......
    symbol:['none', 'arrow'],        //只在末端顯示箭頭
    ......
    }
}

設置後的實現效果（與所要實現的效果有所出入）：

可以看到x,y軸末端的箭頭都停留在最大值處，而所要的效果是箭頭會在最大值處沿軸線延伸一定長度後展示。所以echarts內置的樣式不太符合我們的需求，因此接下來就需要我們自定義我們需要的樣式了

自定義標記的圖形有兩種方式： 
1. 通過 ‘image://url’ 設置爲圖片，其中 URL 爲圖片的鏈接，或者 dataURI。 
2. 通過 ‘path://’ 將圖標設置爲任意的矢量路徑。這種方式相比於使用圖片的方式，不用擔心因爲縮放而產生鋸齒或模糊，而且可以設置爲任意顏色。路徑圖形會自適應調整爲合適的大小。【原文鏈接】

這裏我們通過用svg自定義矢量路徑繪製我們需要的箭頭樣式，然後用“path://”的方式引入

代碼如下：

var lineOption = {
    ......
    xAxis: {
        axisLine:{
            lineStyle: {
                color: '#32FCF7';
            },
            symbol: ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,                  20'],        
            symbolOffset: 10,
            symbolSize: [35, 38]
        },
     },
     yAxis: {
        axisLine:{
            lineStyle: {
                color: '#32FCF7';
            },
            symbol: ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,                  20'],
            symbolOffset: 10,
            symbolSize: [35, 38]
        }
    },
    ......
}

實現效果：