ECharts动态实现图表——折线图、条形图、饼图

最新推荐文章于 2025-01-07 12:55:42 发布

沐小侠

最新推荐文章于 2025-01-07 12:55:42 发布

阅读量1.9k

点赞数 1

分类专栏：学习笔记文章标签： echarts ajax json java

本文链接：https://blog.youkuaiyun.com/weixin_41092938/article/details/115915569

版权

下载ECharts

Echarts官网:https://echarts.apache.org/zh/index.html
在这里插入图片描述

条形图

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts图表</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/echarts.js"></script>
<script type="text/javascript">
	$(function() {
     
		$("#barBtn").click(function(){
     
			var myChart1 = echarts.init(document.getElementById('pic_1'));
			 window.onresize = function(){
     
					myChart1.resize();
				};
			//图表显示提示信息
			myChart1.showLoading();
			//定义图表options
			var options = {
     
					title : {
     
						text : "就业城市统计图",
						subtext:'各城市的人数/已就业的总人数*100',
					},
					tooltip : {
     
						trigger : 'axis'
					},
					legend : {
     
						data : []
					},
					toolbox : {
     
						show : true,
						feature : {
     
							mark : false
						}
					},
					calculable : true,
					xAxis : [ {
     
						type : 'category',
						data : []
					} ],
					yAxis : [ {
     
						type : 'value',
						splitArea : {
     
							show : true
						}, 
					}],
						series : [{
     
							type: 'bar',
							itemStyle: {
     
								normal: {
     
									//定义一个list，然后根据所以取得不同的值，这样就实现了，
									color: function(params) {
     
										var colorList = [
										      '#FF99CC','#330000','#66CC00','#33CCFF','#999900',
										      '#FF0099','#C1232B','#663333','#E87C25','#FF0033',
										      '#0000FF','#9BCA63','#993333','#FF6600','#7F7F7F',
										      '#660066','#339966','#FF0000','#383838','#336600',
										      '#336666','#990000','#CCCCFF','#FFFF00','#330033',
										      ];
										return colorList[params.dataIndex];
										},
										//以下为是否显示，显示位置和显示格式的设置了
										label: {
     
											show: true,
											position: 'top',
										}
								}
							},
							//设置柱的宽度，要是数据太少，柱子太宽不美观~
							barWidth : '60%',
							data : []
						}]	
					};
			//通过Ajax获取数据
			$.ajax({
     
				type: "post",
				url: "cityChart.do",
				data : {
     
					session: '2018'
				},
				dataType : "json", //返回数据形式为json
				success : function(result) {
     
					if (result) {
     
						//将返回的category和series对象赋值给options对象内的category和series
						//因为xAxis是一个数组 这里需要是xAxis[i]的形式
						options.legend.data = result.legend;
						options.xAxis[0].data &#