用layui +echarts 曲线图实现子页面向父页面传值，点击曲线图表上的点后删除该点，并在删除后自动刷新 layui 表格列表，并且按子页面传值和起止时间刷新父页面

战族狼魂

于 2024-08-12 17:12:18 发布

阅读量138

点赞数 7

分类专栏： JSON layUI 前端文章标签： layui echarts

本文链接：https://blog.csdn.net/nndsb/article/details/141136866

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

JSON

4 篇文章 0 订阅

订阅专栏

layUI

2 篇文章 0 订阅

订阅专栏

下面是一个完整的示例，展示了如何使用 layui 和 ECharts 实现以下功能：

子页面向父页面传值。
点击曲线图上的点后删除该点。
删除后自动刷新 layui 表格列表。
根据子页面传值和起止时间刷新父页面。

文件结构

假设你有两个文件：

父页面 (index.html)
子页面 (child.html)

1. 子页面 (`child.html`)

这是一个简单的子页面，包含一个输入框和一个按钮，点击按钮后将输入框的值传递给父页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
</head>
<body>

<label>输入值: <input type="text" id="inputValue"></label>
<button onclick="sendValue()">传值给父页面</button>

<script>
    function sendValue() {
        var value = document.getElementById('inputValue').value;

        // 使用 postMessage 传值给父页面
        window.parent.postMessage({ value: value }, '*');
    }
</script>

</body>
</html>

2. 父页面 (`index.html`)

父页面包含 ECharts 图表、起止时间选择、layui 表格，以及一个用于嵌入子页面的 iframe。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-v2.6.8/dist/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/layui-v2.6.8/dist/layui.all.js"></script>
</head>
<body>

<div>
    <label>起始时间: <input type="date" id="startTime"></label>
    <label>结束时间: <input type="date" id="endTime"></label>
</div>
<div id="chart" style="width: 600px; height: 400px;"></div>
<table class="layui-table" id="dataTable"></table>

<iframe src="child.html" style="width: 100%; height: 100px;"></iframe>

<script>
    var myChart = echarts.init(document.getElementById('chart'));
    var data = [];

    // 初始化数据
    function initData(filterValue) {
        // 模拟数据检索
        var allData = [
            { name: 'A', value: [1, 10], date: '2024-08-01' },
            { name: 'B', value: [2, 20], date: '2024-08-02' },
            { name: 'C', value: [3, 30], date: '2024-08-03' },
            { name: 'D', value: [4, 40], date: '2024-08-04' }
        ];

        // 获取时间过滤范围
        var startTime = new Date(document.getElementById('startTime').value);
        var endTime = new Date(document.getElementById('endTime').value);

        data = allData.filter(function(item) {
            // 通过传值进行过滤
            var isValid = item.name.includes(filterValue);

            // 通过时间范围进行过滤
            var itemDate = new Date(item.date);
            var inTimeRange = (!isNaN(startTime) && !isNaN(endTime)) ? (itemDate >= startTime && itemDate <= endTime) : true;

            return isValid && inTimeRange;
        });

        refreshChart();
        refreshTable();
    }

    // 监听来自子页面的消息
    window.addEventListener('message', function(event) {
        var filterValue = event.data.value;
        initData(filterValue);
    }, false);

    // 刷新图表
    function refreshChart() {
        myChart.setOption({
            xAxis: { type: 'value' },
            yAxis: { type: 'value' },
            series: [{
                type: 'line',
                data: data.map(function (item) {
                    return item.value;
                })
            }]
        });
    }

    // 刷新表格
    function refreshTable() {
        layui.use('table', function () {
            var table = layui.table;

            // 渲染表格
            table.render({
                elem: '#dataTable',
                cols: [[
                    { field: 'name', title: 'Name' },
                    { field: 'value', title: 'Value' }
                ]],
                data: data
            });
        });
    }

    // 点击事件删除点并刷新表格
    myChart.on('click', function (params) {
        var index = params.dataIndex;
        if (index !== undefined) {
            // 从数据中删除该点
            data.splice(index, 1);

            // 更新图表和表格
            refreshChart();
            refreshTable();
        }
    });

    // 初次加载数据
    initData('');
</script>

</body>
</html>

3. 功能说明

传值机制：子页面通过 postMessage 向父页面传递值，父页面监听 message 事件接收传递的值并更新数据。
时间范围过滤：父页面根据起止时间和传递的值过滤数据。
图表点删除：点击 ECharts 图表上的点会删除相应的数据点，并自动刷新图表和 layui 表格。

4. 运行步骤

打开 index.html 作为父页面。
在子页面的输入框中输入值，点击按钮将值传递给父页面。
父页面根据传递的值和选择的时间范围进行数据过滤并更新图表和表格。
点击图表中的点，会删除该点对应的数据并刷新表格。

战族狼魂

关注

7
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
用layui +echarts 曲线图实现子页面向父页面传值，点击曲线图表上的点后删除该点，并在删除后自动刷新 layui 表格列表，并且按子页面传值和起止时间刷新父页面

用layui +echarts 曲线图实现子页面向父页面传值，点击曲线图表上的点后删除该点，并在删除后自动刷新 layui 表格列表，并且按子页面传值和起止时间刷新父页面
复制链接

扫一扫