echarts實用筆記（顯示軸標籤、手寫tooltip、柱子間虛線、legend自定義圖片、漸變色）

平常開發echarts實用筆記

開發環境：
echarts 3.7.2
vue 2.5.2

---

一、強制顯示全部x軸標籤

有時候設置xAxis.axisLabel.interval: 0無效，須要設置爲：

formatter: '{a|{value}}',
rich: {
    a: {
        width: 20,//比較小的數值便可
    },
}

---

二、手寫默認tooltip

能夠隨意增長自定義的內容，好比：給全部數值後添加單位%

tooltip: {
    formatter: function(params) {
        var result = '<div>' + params[0].axisValue + '</div>';
        params.forEach(function(item, index) {
            result += '<span style="display:inline-block;margin-right:5px;margin-bottom:2px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
            result += item.seriesName + "：" + item.data + "%<br>";
        });

        return result;
    },
},

---

三、柱子間虛線
js:

let sum1 = 0;//第一根柱子當前總值
let sum2 = 0;//第二根柱子當前總值

option:

//兩個柱子之間的虛線連線
for(let i = 0 ; i < datas.data.length ; i++) {

...

    markLine: {
        symbolSize:0,
        data:[
            [
                {
                    xAxis: (function(){
                        sum1 += parseFloat(datas.data[i][0]);
                        return sum1
                    })(),
                    y: '36.5%'//第一根柱子下邊緣，視具體狀況而定
                },
                {
                    xAxis: (function(){
                        sum2 += parseFloat(datas.data[i][1]);
                        return sum2
                    })(),
                    y: '52%'//第二根柱子上邊緣，視具體狀況而定
                }
            ],
        ]
    }
}

---

四、legend使用自定義圖片

有三種方式設置自定義圖片：
1）'image://' + url
2）'image://' + dataURI （圖片的base64編碼格式）
3）'path://' + 矢量路徑 （使用SVG路徑寫法）

最經常使用第二種，通常都是使用設計師切給個人圖片，以下。

option:

legend: {
    itemWidth: 18,
    itemHeight: 10,
    itemGap: 20,
    padding:0,
    textStyle: {
        color: '#333',
        fontSize: 10,
    },
    data: [{
        name: datas.legend[0],
        icon: 'image://'+require('../../assets/finance/tuli-red@2x.svg'),
        textStyle: {
            padding: [0, 20, 0, 0]
        },
    }, {
        name: datas.legend[2],
        icon: 'image://'+require('../../assets/finance/red&y@2x.svg'),
    }, {
        name: datas.legend[1],
        icon: 'image://'+require('../../assets/finance/tuli-grey2@2x.svg'),
    }]
},

---

五、漸變色的使用

在一些常見的設置顏色的狀況都適用。如上圖，有兩處運用到了漸變色，一處是柱子，一處是紅色折線下的背景。

1）柱子的漸變：
前三根柱子是黃色漸變，第四根是紅色漸變。

option:

series: [{

    ...
    
    type: 'bar',
    itemStyle: {
        normal: {
            color: (item)=>{
                if(item.dataIndex<3) {
                    return {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#F2EB00' //黃色1
                        }, {
                            offset: 1,
                            color: '#F29300' //黃色2
                        }],
                        globalCoord: false
                    }
                }else {
                    return {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#FF6859' //紅色1
                        }, {
                            offset: 1,
                            color: '#F2568E' //紅色2
                        }],
                        globalCoord: false
                    }
                }
                
            },
            barBorderRadius: [4, 4, 0, 0],
        }
    }
}]

2）折線下的漸變：

option:

series: [{

    ...

    type: 'line',
    areaStyle: {
        normal: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 0.8,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(245,24,65,0.12)' //同一個紅色，透明度0.12
                }, {
                    offset: 1,
                    color: 'rgba(245,24,65,0)' //同一個紅色，透明度0
                }],
                globalCoord: false
            }
        },
    }
}]