Echarts折线图鼠标移动到点显示数据

发布时间：2023-05-20

一、Echarts折线图简介

Echarts是一个由百度开源的基于JavaScript的数据可视化库，具有良好的兼容性和交互性。在数据处理、图表制作方面提供了便捷的API

二、折线图鼠标移动显示数据功能的介绍

折线图是常用于展示数据的一种图表，鼠标移动到折线上的数据点可以用于展示该数据点的数值，从而增加数据的可视化效果和易用性。

三、实现步骤

1. 创建基本折线图

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    title: {
        text: '销售数据'
    },
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line'
    }]
});

2. 添加鼠标移动事件

myChart.on('mousemove', function(params) {
    var dataIndex = params.dataIndex;
    var seriesIndex = params.seriesIndex;
    // 显示数据
    myChart.setOption({
        tooltip: {
            show: true,
            trigger: 'axis',
            position: params.event.event.pageY - 10,
            formatter: function(params) {
                return params[seriesIndex].name + '<br>' + params[seriesIndex].data;
            },
        },
        series: [{
            itemStyle: {
                borderColor: 'transparent', //取消圆点边框
                borderWidth: 1
            },
            lineStyle: {
                color: 'gray'
            },
            markLine: {
                silent: true,
                data: [{
                    yAxis: params[0].data
                }]
            },
            data: [{ // 渲染圆点
                name: params.name,
                value: params.value,
                itemStyle: {
                    color: 'red', // 圆点颜色
                },
                label: {
                    show: true,
                    position: [params.event.offsetX + 10, params.event.offsetY - 30],
                    formatter: params.value
                },
                emphasis: {
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: 'green',
                        color: 'red'
                    },
                    label: {
                        show: true,
                        formatter: params.value
                    }
                }
            }]
        }]
    });
});

3. 添加鼠标移出事件

myChart.on('mouseout', function(params) {
    myChart.setOption({
        tooltip: {
            show: false
        },
        series: [{
            data: []
        }]
    });
});

4. 完整代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Echarts折线图鼠标移动到点显示数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="height: 400px; width: 100%;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
            title: {
                text: '销售数据'
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'line'
            }]
        });
        myChart.on('mousemove', function(params) {
            var dataIndex = params.dataIndex;
            var seriesIndex = params.seriesIndex;
            // 显示数据
            myChart.setOption({
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    position: params.event.event.pageY - 10,
                    formatter: function(params) {
                        return params[seriesIndex].name + '<br />' + params[seriesIndex].data;
                    },
                },
                series: [{
                    itemStyle: {
                        borderColor: 'transparent', //取消圆点边框
                        borderWidth: 1
                    },
                    lineStyle: {
                        color: 'gray'
                    },
                    markLine: {
                        silent: true,
                        data: [{
                            yAxis: params[0].data
                        }]
                    },
                    data: [{ // 渲染圆点
                        name: params.name,
                        value: params.value,
                        itemStyle: {
                            color: 'red', // 圆点颜色
                        },
                        label: {
                            show: true,
                            position: [params.event.offsetX + 10, params.event.offsetY - 30],
                            formatter: params.value
                        },
                        emphasis: {
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: 'green',
                                color: 'red'
                            },
                            label: {
                                show: true,
                                formatter: params.value
                            }
                        }
                    }]
                }]
            });
        });
        myChart.on('mouseout', function(params) {
            myChart.setOption({
                tooltip: {
                    show: false
                },
                series: [{
                    data: []
                }]
            });
        });
    </script>
</body>
</html>
推荐文章