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

一、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 + '
' + 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. 完整代码示例

    
        
  
        
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
    
    
        
  

        <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>