下载ECharts
Echarts官网:https://echarts.apache.org/zh/index.html
条形图
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>echarts图表</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/echarts.js"></script><scripttype="text/javascript">$(function(){$("#barBtn").click(function(){var myChart1= echarts.init(document.getElementById('pic_1'));
window.onresize=function(){
myChart1.resize();};//图表显示提示信息
myChart1.showLoading();//定义图表optionsvar 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",//返回数据形式为jsonsuccess:function(result){if(result){//将返回的category和series对象赋值给options对象内的category和series//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options.legend.data= result.legend;
options.xAxis[0].data= result.category;
options.series[0].data= result.serisData;
myChart1.hideLoading();
myChart1.setOption(options);}},error:function(errorMsg){alert("图表请求数据失败啦!");}});})});</script></head><body><!-- 统计图内容占8份 平板和手机统一占12份 --><divclass="col-xs-12 col-sm-12 col-md-9"><buttontype="button"id="barBtn">条形图</button><divclass="tab-content"><divrole="tabpanel"class="tab-pane active"id="k_post_chart"><divid="pic_1"style="width: 100%;height: 400px;"></div></div></div></div></body></html>折线图
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>echarts图表</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/echarts.js"></script><scripttype="text/javascript">$(function(){$("#lineBtn").click(function(){var myChart2= echarts.init(document.getElementById('pic_2'));
window.onresize=function(){
myChart2.resize();};//图表显示提示信息
myChart2.showLoading();//定义图表optionsvar 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:'line',
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",//返回数据形式为jsonsuccess:function(result){if(result){//将返回的category和series对象赋值给options对象内的category和series//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options.legend.data= result.legend;
options.xAxis[0].data= result.category;
options.series[0].data= result.serisData;
myChart2.hideLoading();
myChart2.setOption(options);}},error:function(errorMsg){alert("图表请求数据失败啦!");}});})});</script></head><body><!-- 统计图内容占8份 平板和手机统一占12份 --><divclass="col-xs-12 col-sm-12 col-md-9"><buttontype="button"id="lineBtn">折线图</button><divclass="tab-content"><divrole="tabpanel"class="tab-pane active"id="k_post_chart"><divid="pic_2"style="width: 100%;height: 400px;"></div></div></div></div></body></html>饼图
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>echarts图表</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script><scripttype="text/javascript"src="${pageContext.request.contextPath}/js/echarts.js"></script><scripttype="text/javascript">$(function(){$("#pieBtn").click(function(){var myChart3= echarts.init(document.getElementById('pic_3'));
window.onresize=function(){
myChart3.resize();};//图表显示提示信息
myChart3.showLoading();//定义图表optionsvar options={
title:{
text:"就业城市统计图",
subtext:'各城市的人数/已就业的总人数*100',},
tooltip:{
trigger:'axis'},
legend:{
data:[]},
toolbox:{
show:true,
feature:{
mark:false}},
calculable:true,
series:[{
type:'pie',
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",//返回数据形式为jsonsuccess:function(result){var array=[];var arr= result.serisData;if(result){for(var i=0;i<arr.length;i++){
array[i]={
name:result.category[i],
value:result.serisData[i]};}
console.log(array);//将返回的category和series对象赋值给options对象内series
options.legend.data= result.legend;
options.series[0].data= array;
myChart3.hideLoading();
myChart3.setOption(options);}},error:function(声明：本站所有文章，如无特殊说明或标注，均为网络收集发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
