漏刻有时数据可视化Echarts组件开发(42)动态创建DIV容器

2023-12-16 14:31:35

效果展示

在这里插入图片描述

引入外部文件

    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.5.4.3.min.js"></script>

CSS层叠样式表

实现一行3列效果，自动换行；

   .ecbox {
            height: 300px;
            width: 33.33%;
            float: left;
        }

数据列

演示数据，实际可以根据API返回的数据，确定列数和动态展示数据；

    var dataList = [1, 2, 3, 4, 5];

动态创建DIV容器

 var echartsDiv = '';
    //生成容器
    for (var j = 0; j < dataList.length; j++) {
        echartsDiv += '<div id="container' + j + '" class="ecbox"></div>';
    }

    //容器渲染
    $('body').append(echartsDiv);

遍历生成图表

    //循环遍历图表
    for (var n = 0; n < dataList.length; n++) {
        getLines('container' + n + '', n);
    }

封装Echarts图表函数

    //图表渲染
    function getLines(id, j) {
        var dom = document.getElementById(id);
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });

        var option = {
            title: {
                text: '动态容器图表' + (j + 1)
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);

    }

AIGC的算法

要根据API返回的数据个数自动创建DIV容器并进行图表渲染，你可以使用JavaScript来动态创建DIV元素，并根据返回的数据数量确定创建的DIV数量。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>动态创建DIV并渲染图表</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
    <div id="container"></div>

    <script>
        // 假设API返回的数据
        var apiData = [10, 20, 30, 40, 50];

        // 根据API返回的数据个数创建DIV容器
        for (var i = 0; i < apiData.length; i++) {
            var divContainer = document.createElement('div');
            divContainer.style.width = '200px';
            divContainer.style.height = '200px';
            divContainer.style.margin = '10px';
            divContainer.id = 'chart-' + i;  // 每个DIV的ID，用于ECharts初始化时指定图表容器
            document.getElementById('container').appendChild(divContainer);
        }

        // 根据API返回的数据渲染图表
        var myChart;
        for (var i = 0; i < apiData.length; i++) {
            var chartDiv = document.getElementById('chart-' + i);
            var chartData = apiData[i];  // 每个图表的独立数据，根据API返回的数据来设置
            myChart = echarts.init(chartDiv);
            var option = {
                title: {
                    text: 'Chart ' + i,  // 每个图表的标题，可以根据需求设置
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['Sales']  // 每个图表的图例，可以根据需求设置
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  // 每个图表的x轴数据，可以根据需求设置
                },
                yAxis: {
                    type: 'value'  // 每个图表的y轴类型，可以根据需求设置
                },
                series: [{  // 每个图表的数据系列，根据API返回的数据来设置
                    name: 'Sales',
                    type: 'bar',
                    data: [chartData]  // 每个图表的数据，根据API返回的数据来设置
                }]
            };
            myChart.setOption(option);
        }
    </script>
</body>
</html>

在上述代码中，我们首先假设API返回了一个数组apiData，包含了要显示的数据。然后，我们使用for循环动态创建多个div元素作为ECharts图表的容器，并设置样式和ID。接下来，我们再次使用for循环根据API返回的数据渲染每个图表。在每个循环中，我们使用echarts.init方法初始化ECharts实例，并使用setOption方法设置图表的配置项和数据。请根据你的实际需求调整样式、标题、图例、x轴和y轴的设置。

@漏刻有时

文章来源:https://blog.csdn.net/weixin_41290949/article/details/135031672
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。