您的位置:

echarts自定义tooltip

一、echarts自定义tooltips

tooltip是指当鼠标移动到图表上时显示的信息窗口。echarts默认的tooltip样式已经非常美观和实用,但有时候我们需要根据实际需求自定义tooltip。这时候我们需要用到echarts的formatter函数来自定义tooltip的内容和样式。

下面是一个简单的例子。首先定义一个包含所有数据的数组,然后使用formatter函数将tooltip内容设置为数据数组中对应的值。

var data = [
    {name:"北京", value:"123"},
    {name:"上海", value:"234"},
    {name:"广州", value:"345"}
];

option = {
    ...
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            return params.name+': '+params.value;
        }
    },
    ...
};

这段代码中的formatter函数会接收到一个params参数,包含了当前鼠标所在的数据项的各种信息。我们可以根据需要选择需要的信息来格式化tooltip的内容。

二、echarts自定义tooltip带symbol

有时候我们需要在tooltip中显示一个符号来标注数据项,这时候我们可以使用rich属性来自定义symbol。先来看一个简单的例子:

option = {
    ...
    series: [{
        type: 'line',
        data: [10, 22, 32, 45, 38, 56, 74],
        markPoint: {
            label: {
                formatter: '{b}'
            },
            data: [{
                type: 'max',
                name: '最大值'
            },{
                type: 'min',
                name: '最小值'
            }]
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: function(params) {
                var dataIndex = params[0].dataIndex;
                var value = params[0].value;
                return '第'+dataIndex+'个数据项:'+value;
            },
            position: function(pos, params, el, elRect, size) {
                var obj = {top: 10};
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                return obj;
            },
            extraCssText: 'background-color: rgba(255, 255, 255, 0.8);border-radius:3px'
        },
        itemStyle: {
            color: '#1C86EE'
        },
        lineStyle: {
            color: '#1C86EE'
        }
    }],
    ...
};

这个例子中,我们使用了echarts的rich属性来自定义一个symbol,在formatter中将其插入到tooltip中。

三、echarts自定义tooltip带图形

有时候我们需要在tooltip中显示一个图形来表示数据项,这时候我们可以使用formatter函数和echarts.graphic来自定义图形。下面是一个简单的例子:

option = {
    ...
    series: [{
        type: 'line',
        data: [10, 22, 32, 45, 38, 56, 74],
        markPoint: {
            label: {
                formatter: '{b}'
            },
            data: [{
                type: 'max',
                name: '最大值'
            },{
                type: 'min',
                name: '最小值'
            }]
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: function(params) {
                var dataIndex = params[0].dataIndex;
                var value = params[0].value;
                return '第'+dataIndex+'个数据项:'+value;
            },
            position: function(pos, params, el, elRect, size) {
                var obj = {top: 10};
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                return obj;
            },
            extraCssText: 'background-color: rgba(255, 255, 255, 0.8);border-radius:3px',
            formatter: function(params) {
                var dataIndex = params[0].dataIndex;
                var value = params[0].value;
                var iconSize = 20;
                var icon = new echarts.graphic.Rect({
                    shape: {
                        x: -iconSize / 2,
                        y: -iconSize / 2,
                        width: iconSize,
                        height: iconSize
                    },
                    style: {
                        fill: '#1C86EE',
                        stroke: '#fff',
                        lineWidth: 2
                    }
                });
                return icon + '第'+dataIndex+'个数据项:'+value;
            }
        },
        itemStyle: {
            color: '#1C86EE'
        },
        lineStyle: {
            color: '#1C86EE'
        }
    }],
    ...
};

在这个例子中,我们在formatter函数中使用了echarts.graphic.Rect来自定义了一个矩形。同样,我们可以使用其他的图形来自定义tooltip。

四、echarts自定义图例css

我们可以使用echarts.graphic来自定义图例的样式,来达到修改图例样式的目的。这个样式的图例可以居中显示,有动画效果。

option = {
    ...
    legend: {
        data: ['商品1', '商品2', '商品3'],
        bottom: '5%',
        textStyle: {
            color: '#fff'
        },
        icon: 'none',
        selectedMode: 'single',
        selected: {
            '商品1': true
        },
        animationDelay: 1500,
        animationDuration: 800,
        animationEasing: 'elasticOut',
        formatter: function(name) {
            var iconSize = 10;
            var icon = new echarts.graphic.Rect({
                shape: {
                    x: -iconSize / 2,
                    y: -iconSize / 2,
                    width: iconSize,
                    height: iconSize
                },
                style: {
                    fill: '#1C86EE',
                    stroke: '#fff',
                    lineWidth: 2
                }
            });
            return icon + '  ' + name;
        }
    },
    ...
};

五、echarts自定义图形

我们可以使用echarts.graphic来自定义图形,例如圆、矩形等。下面是一个简单的例子,画出一个圆形:

option = {
    ...
    graphic: [{
        type: 'circle',
        shape: {
            cx: 250,
            cy: 150,
            r: 100
        },
        style: {
            fill: 'transparent', 
            stroke: '#1C86EE',
            lineWidth: 4
        }
    }],
    ...
};

这个例子中,我们使用echarts.graphic创建了一个圆形,并将其添加到了option的graphic属性中。在style中可以对图形进行样式设置。

六、echarts自定义图例

echarts默认的图例是按照数据系列自动生成的,我们可以使用formatter函数来自定义图例。下面是一个简单的例子:

option = {
    ...
    legend: {
        data: ['男性用户数', '女性用户数'],
        textStyle: {
            color: '#fff'
        },
        formatter: function(name) {
            if (name == '男性用户数') {
                return '♂ ' + name;
            }
            else {
                return '♀ ' + name;
            }
        }
    },
    series: [{
        data: [152, 64],
        ...
    },{
        data: [113, 85],
        ...
    }],
    ...
};

在这个例子中,我们使用了formatter函数来自定义图例,对男性用户数添加了♂标志,对女性用户数添加了♀标志。

七、echarts自定义icon

我们可以使用echarts.graphic自定义icon来代替默认的图例标记。下面是一个简单的例子:

option = {
    ...
    legend: {
        data: ['男性用户数', '女性用户数'],
        textStyle: {
            color: '#fff'
        },
        icon: 'none',
        formatter: function(name) {
            if (name == '男性用户数') {
                var iconSize = 15;
                var icon = new echarts.graphic.Rect({
                    shape: {
                        x: -iconSize / 2,
                        y: -iconSize / 2,
                        width: iconSize,
                        height: iconSize
                    },
                    style: {
                        fill: '#1C86EE',
                        stroke: '#fff',
                        lineWidth: 2
                    }
                });
                return icon + '  ' + name;
            }
            else {
                var iconSize = 15;
                var icon = new echarts.graphic.Polygon({
                    shape: {
                        points: [[-iconSize / 2, -iconSize / 2], [iconSize / 2, -iconSize / 2], [0, iconSize / 2]],
                    },
                    style: {
                        fill: '#FFA07A',
                        stroke: '#fff',
                        lineWidth: 2
                    }
                });
                return icon + '  ' + name;
            }
        }
    },
    series: [{
        data: [152, 64],
        ...
    },{
        data: [113, 85],
        ...
    }],
    ...
};

在这个例子中,我们对每个图例都使用了不同的图标来表示不同的数据系列。使用不同的echarts.graphic来绘制出我们需要的图标。

八、echarts自定义y轴刻度间距选取

有时候我们需要更细致地控制y轴刻度之间的间距,比如在数据范围比较小的情况下,我们需要将y轴刻度之间距离增加,否则会非常拥挤难以阅读。下面是一个简单的例子:

option = {
    ...
    yAxis: {
        type: 'value',
        interval: 20,
        splitNumber: 6
    },
    ...
};

在这个例子中,我们将y轴刻度之间的距离设置为20,刻度数目为6,这样就可以有效地控制y轴的刻度间距,使图表更易读。