Echarts 动态实现柱状图、折线图、饼状图的切换

最新推荐文章于 2024-08-03 14:19:02 发布

EviaHp

最新推荐文章于 2024-08-03 14:19:02 发布

阅读量2.1k

点赞数 6

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/wqwq093030/article/details/136508620

文章描述了如何使用JavaScript的Ajax技术从服务器获取数据，结合ECharts库在弹出窗口中动态渲染柱状图和饼状图的过程，以及如何根据数据类型调整图表展示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹窗展示统计图

                            //找到表格对应的名称和后端返回的键对应进行渲染
							var fieldVal= $(this).parents("td").attr("data-field");
							$.ajax({
								url: '',//服务端的请求地址
								type: 'get',//http请求方式 get，post，put，delete，options
								dataType: "json",
								async : false,
								data : {"type":1},
								success: function (res) {
									console.info(res)
									var dataArray = res[fieldVal]; // 根据 fieldVal 的值从 res 中获取相应的数据数组

									// // 使用Layer组件显示柱状图
									layer.open({
										type: 1, // 类型为内容层
										title: '标题', // 弹出层的标题
										area: ['90%', '86%'],
										content: '<div id="chart-container" style="width: 100%; height: 100%; margin: 0px auto" ></div>', // 弹出层的内容，这里是一个容器
										success: function(layero, index) {
											var fieldName = $(".layui-table-header thead").eq(0).find("th[data-field="+fieldVal+"]").text().trim();
											initChart(res,dataArray,"bar",fieldName);
										}
									});