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. 完整代碼示例

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/159927.html