您现在的位置是：主页 > news > 深圳做网站专业公司/推广联盟

深圳做网站专业公司/推广联盟

admin2025/5/18 18:45:26【news】

简介深圳做网站专业公司,推广联盟,wordpress淘客,seo服务的内容一、介绍通过ECharts饼状图展示数据库中的数据信息，通过ajax发送请求从后台获取数据，将数据通过js在ECharts展示出来。主要实现在数据库表中，查询有多少个项目培训类型，参与每一个项目的有多少人，将这些数据通过饼状图…

深圳做网站专业公司,推广联盟,wordpress淘客,seo服务的内容一、介绍通过ECharts饼状图展示数据库中的数据信息，通过ajax发送请求从后台获取数据，将数据通过js在ECharts展示出来。主要实现在数据库表中，查询有多少个项目培训类型，参与每一个项目的有多少人，将这些数据通过饼状图…

一、介绍

通过ECharts饼状图展示数据库中的数据信息，通过ajax发送请求从后台获取数据，将数据通过js在ECharts展示出来。主要实现在数据库表中，查询有多少个项目培训类型，参与每一个项目的有多少人，将这些数据通过饼状图的形式展现出来。

二、java后台代码

//dao层@Select("select traintype,count(traintype) as traintypenum from v_all group by traintype")public List<All> getTrainTypeNuminfo();//service层public List<All> getTrainTypeNuminfo(){return integratedQueryMapper.getTrainTypeNuminfo();}//Controller层   @RequestMapping(value = "/getTrainInforStatic",method = {RequestMethod.GET, RequestMethod.POST})@ResponseBodypublic List<All> getTrainInforStatic(HttpSession session){List<All> getTrainTypeNuminfo = integratedQueryService.getTrainTypeNuminfo();return getTrainTypeNuminfo;}

三、前台代码

3.1 前台代码1

如下的前台代码，js只用来对Echarts的饼状图赋值数据，会产生没有饼状图标题，统计数据信息：

$(function(){var myChart = echarts.init(document.getElementById('main'));/*   data1 表示每个饼状图的名字，每个培训类型data2 表示每个饼状图，即每个培训类型的统计结果*/var data1=[];var data2=[];var array=[];option = {title : {text: '培训信息数据统计',/*subtext: '',*/x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient : 'vertical',x : 'left',/*data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']*/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:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]*/data:[]}]};$.ajax({type:"post",url:"/getTrainInforStatic",data:{},cache:false,async: false,dataType:"json",success : function (result) {for(var i in result){data1.push(result[i].traintype);data2.push(result[i].traintypenum);var map={};map.name=result[i].traintype;map.value=result[i].traintypenum;array[i]=map;}myChart.setOption({ //加载数据图表legend : {data : data1},series : {// 根据名字对应到相应的系列name : ['数量'],type:'pie',data : array}});},error : function(result) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}});})

通过上图可以看出，没有标题，并且将鼠标悬浮在每个饼状图上，无法显示统计的信息。

3.2 前台代码2

为了解决上述情况，将整个option放置在ajax的success函数里，将解决上述问题。

<script>$(function(){var myChart = echarts.init(document.getElementById('main'));/*   data1 表示每个饼状图的名字，每个培训类型data2 表示每个饼状图，即每个培训类型的统计结果*/var data1=[];var data2=[];var array=[];$.ajax({type:"post",url:"/getTrainInforStatic",data:{},cache:false,async: false,dataType:"json",success : function (result) {for(var i in result){data1.push(result[i].traintype);data2.push(result[i].traintypenum);var map={};map.name=result[i].traintype;map.value=result[i].traintypenum;array[i]=map;}myChart.setOption({ //加载数据图表title : {text: '培训信息数据统计',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient : 'vertical',x : 'left',data:data1},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:array}]});},error : function(result) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}});})</script>
<body>
<div id="main" style="height:560px"></div></body>

运行结果如下所示：

四、数据库数据信息

select traintype,count(traintype) as traintypenum from v_all group by traintype

上述的SQL代码运行结果如下：

前台debug测试array和data1数组元素如下：