效果展示
引入外部文件
<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轴的设置。
@漏刻有时
