这次给大家带来ajax实现动态饼图和柱形图的图文详解，ajax实现动态饼图和柱形图的注意事项有哪些，下面就是实战案例，一起来看一下。
本文以柱形图和饼形图ajax动态赋值为例
一、饼形图赋值步骤
（1）jsp页面
<!-- 引入echarts官方js --> <script src="js/echarts.js"></script> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 饼形图 --> <p id="first" style="width: 600px;height:400px;"></p> [html] view plain copy </body>
（2）js页面
//饼图模板
var dom = document.getElementById("first");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: '用户位置记录',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[]
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
//饼图动态赋值
var year = $("#year-search").val();
var mouth = $("#mouth-search").val();
$.ajax({
type: "get",
url: rootPath+"/wxbound/getPieDataByMouth.action",
data : {"year":year,"mouth":mouth},
cache : false, //禁用缓存
dataType: "json",
success: function(result) {
var names=[];//定义两个数组
var nums=[];
$.each(result,function(key,values){ //此处我返回的是list<String,map<String,String>>循环map
names.push(values.province_name);
var obj = new Object();
obj.name = values.province_name;
obj.value = values.count;
nums.push(obj);
});
myChart.setOption({ //加载数据图表
legend: {
data: names
},
series: {
// 根据名字对应到相应的系列
name: ['数量'],
data: nums
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
（3）后台代码根据你自己的代码就好
（4）显示样式
二、柱型图赋值步骤
（1）jsp页面
<!-- 引入echarts官方js --> <script src="js/echarts.js"></script> <body> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 柱形图 --> <p id="second" style="width: 600px;height:400px;"></p> </body>
（2）js页面
//柱形图模板
var domLong = document.getElementById("second");
var myChartSecond = echarts.init(domLong);
var app = {};
option = null;
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : [],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[]
}
]
};
if (option && typeof option === "object") {
myChartSecond.setOption(option, true);
}
//给柱形图赋值
var year = $("#year-search").val();
$.ajax({
type: "post",
url: rootPath+"/wxbound/getWxboundList.action",
data : {"year":year},
cache : false, //禁用缓存
dataType: "json",
success: function(result) {
console.log(result);
var linNames=[];
var linNums=[];
$.each(result.lin,function(key,values){
linNames.push(values.mouth);
linNums.push(values.count);
});
//柱形图赋值
myChartSecond.setOption({ //加载数据图表
xAxis: {
data: linNames
},
series: {
// 根据名字对应到相应的系列
name: ['数量'],
data: linNums
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
}
（3）后台代码部分根据自己需要就好。。。
（4）图片样式
可以去试试你的echarts图标了。。。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是ajax实现动态饼图和柱形图的图文详解的详细内容。更多信息请关注PHP中文网其他相关文章！
Scrapy基于Ajax异步加载实现方法Jun 22, 2023 pm 11:09 PMScrapy是一个开源的Python爬虫框架，它可以快速高效地从网站上获取数据。然而，很多网站采用了Ajax异步加载技术，使得Scrapy无法直接获取数据。本文将介绍基于Ajax异步加载的Scrapy实现方法。一、Ajax异步加载原理Ajax异步加载：在传统的页面加载方式中，浏览器发送请求到服务器后，必须等待服务器返回响应并将页面全部加载完毕才能进行下一步操
如何使用CakePHP中的AJAX？Jun 04, 2023 pm 08:01 PM作为一种基于MVC模式的PHP框架，CakePHP已成为许多Web开发人员的首选。它的结构简单，易于扩展，而其中的AJAX技术更是让开发变得更加高效。在本文中，将介绍如何使用CakePHP中的AJAX。什么是AJAX?在介绍如何在CakePHP中使用AJAX之前，我们先来了解一下什么是AJAX。AJAX是“异步JavaScript和XML”的缩写，是指一种在
jquery ajax报错403怎么办Nov 30, 2022 am 10:09 AMjquery ajax报错403是因为前端和服务器的域名不同而触发了防盗链机制，其解决办法：1、打开相应的代码文件；2、通过“public CorsFilter corsFilter() {...}”方法设置允许的域即可。
ajax传递中文乱码怎么办Nov 15, 2023 am 10:42 AMajax传递中文乱码的解决办法：1、设置统一的编码方式；2、服务器端编码；3、客户端解码；4、设置HTTP响应头；5、使用JSON格式。详细介绍：1、设置统一的编码方式，确保服务器端和客户端使用相同的编码方式，通常情况下，UTF-8是一种常用的编码方式，因为它可以支持多种语言和字符集；2、服务器端编码，在服务器端，确保将中文数据以正确的编码方式进行编码，再传递给客户端等等。
Nginx中404页面怎么配置及AJAX请求返回404页面May 26, 2023 pm 09:47 PM404页面基础配置404错误是www网站访问容易出现的错误。最常见的出错提示：404notfound。404错误页的设置对网站seo有很大的影响，而设置不当，比如直接转跳主页等，会被搜索引擎降权拔毛。404页面的目的应该是告诉用户：你所请求的页面是不存在的，同时引导用户浏览网站其他页面而不是关掉窗口离去。搜索引擎通过http状态码来识别网页的状态。当搜索引擎获得了一个错误链接时，网站应该返回404状态码，告诉搜索引擎放弃对该链接的索引。而如果返回200或302状态码，搜索引擎就会为该链接建立索引
什么是ajax重构Jul 01, 2022 pm 05:12 PMajax重构指的是在不改变软件现有功能的基础上，通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更合理，提高软件的扩展性和维护性；Ajax的实现主要依赖于XMLHttpRequest对象，由于该对象的实例在处理事件完成后就会被销毁，所以在需要调用它的时候就要重新构建。
在Laravel中如何通过Ajax请求传递CSRF令牌？Sep 10, 2023 pm 03:09 PMCSRF代表跨站请求伪造。CSRF是未经授权的用户冒充授权执行的恶意活动。Laravel通过为每个活动用户会话生成csrf令牌来保护此类恶意活动。令牌存储在用户的会话中。如果会话发生变化，它总是会重新生成，因此每个会话都会验证令牌，以确保授权用户正在执行任何任务。以下是访问csrf_token的示例。生成csrf令牌您可以通过两种方式获取令牌。通过使用$request→session()→token()直接使用csrf_token()方法示例<?phpnamespaceApp\Http\C
使用HTML5文件上传与AJAX和jQuerySep 13, 2023 am 10:09 AM当提交表单时，捕获提交过程并尝试运行以下代码片段来上传文件-//File1varmyFile=document.getElementById('fileBox').files[0];varreader=newFileReader();reader.readAsText(file,'UTF-8');reader.onload=myFunc;functionmyFunc(event){ varres
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
SublimeText3汉化版
中文版，非常好用
Dreamweaver CS6
视觉化网页开发工具
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中
