Echarts示例

IKUNzhenin
已于 2024-03-25 14:35:18 修改
阅读量119
点赞数 2
分类专栏： js练手功能 js如何学习文章标签： okhttp
于 2024-03-21 19:25:25 首次发布
本文链接：https://blog.csdn.net/IKUNzhenin/article/details/136917871
版权
js练手功能同时被 2 个专栏收录
59 篇文章 0 订阅
订阅专栏
js如何学习
17 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一页</title>
	</head>
	<script src="./js/jquery-3.7.1 .js"></script>
	<script src="./js/echarts.js"></script>
	<body>
		<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
		<div style="display: flex;">
			<div id="main"  style="width: 500px;height:500px;"></div>
			<div id="main1" style="width: 500px;height:500px;"></div>
			<div id="main2" style="width: 500px;height:500px;"></div>
			<div id="main3" style="width: 500px;height:500px;"></div>
		</div>
		<div id="container" style="height: 400px; width: 100%;"></div>
	</body>
	<script type="text/javascript">
		item();

		// 基于准备好的dom，初始化echarts实例
		var container = echarts.init(document.getElementById('container'));
		var myChart = echarts.init(document.getElementById('main'));
		var myChart1 = echarts.init(document.getElementById('main1'));
		var myChart2 = echarts.init(document.getElementById('main2'));
		var myChart3 = echarts.init(document.getElementById('main3'));

		// 发起AJAX请求的函数  
		function item() {
			$.ajax({
				type: "post",
				url: "http://bas.xingyuncm.cn/fastapi/index/index", // 替换为你的API地址  
				data: {},
				success: function(data) {
					console.log(data);
					up = data.goods_up; // 已审核商品up
					down = data.goods_down; // 待审核商品down
					ting = data.accounting; //会计
					lawyer = data.lawyer; //律师
					bond = data.bond; //律师
					user_up = data.user_up //已审核会员
					user_down = data.user_down //待审核会员
					need_up = data.need_up //已审核需求
					need_down = data.need_down //待审核需求
					main(data); //商品数量
					main1(data); //事务所数量
					main2(data); //客户数量
					main3(data); //需求数量
					proc(data.bar); //
				},
				error: function(e) {
					console.log(e); // 打印错误信息  
				},
			});
		}
		// 全局变量
		let up = 0; // 已审核商品  
		let down = 0; // 待审核商品  
		let ting = 0; //会计
		let lawyer = 0; //律师
		let bond = 0; //证券
		let user_up = 0; //已审核会员
		let user_down = 0; //待审核会员
		let need_up = 0; //已审核需求
		let need_down = 0; //待审核需求
		let names=[]//名字
		let goods = [];//产品
		let supply = []; // 供应
		let need=[];//需求
		function proc(data) {
			for (let i = 0; i < data.length; i++) {
				goods.push(data[i].goods);//产品
				supply.push(data[i].supply); //产品
				need.push(data[i].need);//需求
				names.push(data[i].name);//名字
				// 对象id
			}
			datas(); // 数据处理完后设置图表选项
		}
		// 指定图表的配置项和数据  
		function main() {
			var option = {
				title: {
					text: '商品数量',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '10%',
					orient: 'vertical',
					left: 'center',
				},
				series: [{
					name: '审核状态',
					type: 'pie',
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '20',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: true
					},
					data: [{
						value: down,
						name: '待审核商品',
						itemStyle: {
							borderRadius: 10,
							borderColor: '#5470c7',
							borderWidth: 2
						}
					}, {
						value: up,
						name: '已审核商品',
						itemStyle: {
							borderRadius: 10,
							color: '#a1fa91',
							borderWidth: 2
						}
					}]
				}]
			};
			// 使用刚指定的配置项和数据显示图表。  
			myChart.setOption(option);
		}


		function main1() {
			var option = {
				title: {
					text: '事务所数量',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '10%',
					orient: 'vertical',
					left: 'center',
				},
				series: [{
					name: '审核状态',
					type: 'pie',
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '20',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [{
							value: lawyer,
							name: '律师',
							itemStyle: {
								color: '#ffc300',
								borderRadius: 10,
							}
						},
						{
							value: ting,
							name: '会计',
							itemStyle: {
								color: '#ff7070',
								borderRadius: 10,
							}
						}, {
							value: bond,
							name: '证券',
							itemStyle: {
								color: '#2ccd43',
								borderRadius: 10,
							}
						}
					]
				}]
			};
			// 使用刚指定的配置项和数据显示图表。  
			myChart1.setOption(option);
		}
		main2()

		function main2() {
			var option = {
				title: {
					text: '客户数量',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '10%',
					orient: 'vertical',
					left: 'center',
				},
				series: [{
					name: '审核状态',
					type: 'pie',
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '20',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [{
							value: user_up,
							name: '已审核会员',
							itemStyle: {
								color: '#5599ef',
								borderRadius: 10,
							}
						},
						{
							value: user_down,
							name: '待审核会员',
							itemStyle: {
								color: '#2ccd43',
								borderRadius: 10,
							}
						}
					]
				}]
			};
			// 使用刚指定的配置项和数据显示图表。  
			myChart2.setOption(option);
			//
		}


		function main3() {
			var option = {
				title: {
					text: '需求数量',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '10%',
					orient: 'vertical',
					left: 'center',
				},
				
				series: [{
					name: '审核状态',
					type: 'pie',
					radius: ['50%', '70%'],
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '20',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [{
							value: need_up,
							name: '已审核需求',
							itemStyle: {
								color: '#ffc300',
								borderRadius: 10,
							}
						},
						{
							value: need_down,
							name: '待审核需求',
							itemStyle: {
								color: '#ff7070',
								borderRadius: 10,
							}
						}
					]
				}]
			};
			// 使用刚指定的配置项和数据显示图表。  
			myChart3.setOption(option);
			//
		}

		function datas() { // 重命名以避免冲突
			var option = {
				title:{
					text:'产品管理',
					left:'left'
				},
				xAxis: {
					type: 'category',
					data: names // 底部名称  
				},
				yAxis: {
					type: 'value'
				},
				dataZoom: [{
					type: 'inside'
				}, {
					type: 'slider'
				}],
				data: [{
						value: goods,
						name: '产品',
						itemStyle: {
							color: '#5470c6',
							borderRadius: 10,
						}
					},
					{
						value: supply,
						name: '供应',
						itemStyle: {
							color: '#91cc75',
							borderRadius: 10,
						}
					},
					{
						value: need,
						name: '需求',
						itemStyle: {
							color: '#fac858',
							borderRadius: 10,
						}
					}
				],
				 legend: {
				    data: ['产品', '供应', '需求']
				  },
				series: [{
					name:'产品',
					data: goods, // 表格数据  
					type: 'bar'
				},{
					data: supply, // 表格数据  
					type: 'bar',
					name:'供应'
				},{
					data: need, // 表格数据  
					type: 'bar',
					name:'需求'
				}]
			};
			container.setOption(option);
			//调用初始化属性，并显示图形
		}
	</script>
	<!-- 三个按钮用来切换不同的效果 -->
	<!-- 注意要引入echarts文件 -->
	<!-- 其中id是必须的 -->
	<!-- 首先要初始化div -->
	<!-- 因为要放在div里面 -->
	<!-- 如果要切换图表可以设置一个全局变量用来存储图表的数据 -->
	<!-- 函数要有意义 -->
</html>