echarts实用笔记（显示轴标签、手写tooltip、柱子间虚线、legend自定义图片、渐变色）...

日常开发echarts实用笔记

开发环境：
echarts 3.7.2
vue 2.5.2

---

1、强制显示所有x轴标签

有时候设置xAxis.axisLabel.interval: 0无效，需要设置为：

formatter: '{a|{value}}',
rich: {
    a: {
        width: 20,//比较小的数值即可
    },
}

---

2、手写默认tooltip

可以随意增加自定义的内容，比如给所有数值后添加单位%

tooltip: {
    formatter: function(params) {
        var result = '<p>' + params[0].axisValue + '</p>';
        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;
    },
},

---

3、柱子间虚线
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%'//第二根柱子上边缘，视具体情况而定
                }
            ],
        ]
    }
}

---

4、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'),
    }]
},

---

5、渐变色的使用

在一些常见的设置颜色的情况都适用。如上图，有两处运用到了渐变色，一处是柱子，一处是红色折线下的背景。

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
            }
        },
    }
}]