Echarts 饼状图和柱状图_echarts饼状图-CSDN博客

本文链接：https://blog.csdn.net/TylorMin/article/details/84844363

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="xpm" uri="http://www.xinhuagroup.com/xpm" %>
<%@ page isELIgnored="false" %>
<div class="easyui-layout" data-options="fit:true,border:true">
   <div data-options="region:'north',border:false,height:250">
       <table class="xpm-table">
           <tr>
               <th style="text-align: center;border-left: 1px solid rgb(202, 202, 202);" colspan="16">${prjName}项目费用明细</th>
           </tr>
           <tr>
               <th>项目名称</th>
   <td colspan="5">${prjName}</td>
   <th>合同号</th>
   <td colspan="2">${contractNo}</td>
   <th>结算类型</th>
   <td>${sttleleTypeDes}</td>
           <th>统计时间</th>
   <td colspan="2">
       <jsp:useBean id="now" class="java.util.Date" scope="page"/>
               <fmt:formatDate value="${now}" pattern="yyyy-MM-dd"/>
   </td>
   <th>统计人</th>
   <td><xpm:user/></td>
       </tr>
       <tr id="settleTitle">
           <th rowspan="3">费用明细</th>
       </tr>
       <tr id="feeDetail">
           <td>预算</td>
           <td>实际</td>
           <td>执行</td>
           <td>预算</td>
           <td>实际</td>
           <td>执行</td>
           <td>预算</td>
           <td>实际</td>
           <td>执行</td>
           <td>预算</td>
           <td>实际</td>
           <td>执行</td>
           <td>预算</td>
           <td>实际</td>
           <td>执行</td>
       </tr>
       <tr id="settleData"></tr>
       </table>
   </div>
   <div data-options="region:'west',border:false,width:'55%'">
       <div id="charts_div" style="width:600px;height: 290px;"></div>
   </div>
   <div data-options="region:'east',border:false,width:'45%'">
       <div id="pieChart" style="width:600px;height: 290px;"></div>
   </div>
</div>
<script src="sta/js/echarts-2.2.7/build/dist/echarts.min.js"></script>
<script>
$(function () {
   /* 获取项目结算柱状图数据 */
       $.getAjaxJson("project/settle/findSettleReport/${contractNo}/${settleType}", '',function(jsonData){
           initBarData(jsonData);
           buildSettleTabel(jsonData);
           initSettleTableData(jsonData);
       });
       /* 获取项目结算饼状图数据 */
       $.getAjaxJson("project/settle/findSettleReportPieData/${contractNo}/${settleType}", '', function(jsonData){
           buildPieChart(jsonData);
       });
       addExportBth();
       $('#feeDetail td').css({
           'text-align': 'center',
           'border-right': '1px solid rgb(202, 202, 202)'
       });
});
/*添加导出按钮*/
function addExportBth(){
   var link ='<a href="javascript:exportSettleData()" class="xpm-btn-green l-btn l-btn-small" group="" id=""><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">导出Excel</span><span class="l-btn-icon fa fa-download"> </span></span></a>';
       $('.dialog-button').prepend(link);
}
/*
   构建结算表格标题
*/
function buildSettleTabel(data){
   var html = '';
   for (var key in data) {
       html += '<td colspan="3" style="text-align: center;border-right: 1px solid rgb(202, 202, 202);">'+key+'(万元)</td>';
   }
   $('#settleTitle').append(html);
}
function initSettleTableData(data){
   var html = '';
   for (var key in data) {
       for (var i = 0; i < data[key].length; i++) {
           html += '<td style="text-align: center;border-right: 1px solid rgb(202, 202, 202);">'+parseFloat(data[key][i])+'</td>';
       }
   }
   $('#settleData').append(html);
}
/* 初始化柱状图数据 */
function initBarData(data){
   debugger
   var legendData = ['预算', '实际','执行'];
var bgColorList = ['#FBB730', '#31BDF2','#6197fb'];
var axisLabel = [];
   for (var key in data) {
       axisLabel.push(key);
   }
var seriesValue = [];
for (var i = 0; i < legendData.length; i++) {
var arrData = [];
var seriesDataVal = null;
for (var j = 0; j < axisLabel.length; j++) {
arrData.push(parseFloat(data[axisLabel[j]][i]));
}
seriesDataVal = {
barWidth: 25,//柱状条宽度
name:legendData[i],
type:'bar',
itemStyle: {
normal: {
show: true,//鼠标悬停时显示label数据
//barBorderRadius: [10, 10, 10, 10],//柱形图圆角，初始化效果
// color: bgColorList[i]
}
},
label: {
normal: {
show: true, //显示数据
//position: 'insideBottom'//显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'inside'
}
} ,
data:arrData
};
seriesValue.push(seriesDataVal);
}
buildBarChart(legendData, axisLabel, seriesValue);
}
//生成Echarts柱状图形
function buildBarChart(legendData, axisLabel, seriesValue) {
var chart = document.getElementById('charts_div');
var echart = echarts.init(chart);
var option = {
        title: {
    text: '项目成本组成各阶段对比柱图(单位:万元)',
       x: "center", //标题水平方向位置
    },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'//阴影，若需要为直线，则值为'line'
}
},
toolbox: {
show: true,
x: '500',
feature: {
saveAsImage: {show: true}
}
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 0,
data: legendData
},
xAxis: [{
min: 0,
type: 'category', //纵向柱状图，若需要为横向，则此处值为'value'，下面 yAxis 的type值为'category'
data: axisLabel
}],
yAxis: [{
min: 0,
type: 'value',
splitArea: {show: false}
}],
label: {
normal: { //显示bar数据
show: true,
position: 'top'
}
},
series: seriesValue
};
echart.setOption(option);
}
//生成echart饼状图
function buildPieChart(json){
   var chart = document.getElementById('pieChart');
   var echart = echarts.init(chart);
   var option = {
           title: {
    text: '项目各阶段合计费用占比饼图(单位:万元)',
       x: "center", //标题水平方向位置
    },
       tooltip : {
       trigger: 'item',
       formatter: "{a} <br/>{b} : {c} ({d}%)"
       },
       toolbox: {
show: true,
x: '500',
feature: {
saveAsImage: {show: true}
}
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 0,
data: json.map(function(data){
   return data.name;
}),
},
       series : [
       {
           name:'',
       type:'pie',
       radius : '60%',//饼图的半径大小
       label: {
                       normal: {
                           formatter : '{b} : {c} \n ({d}%)'
       }
                   },
       data:json
       }
       ]
       };
   echart.setOption(option);
}
/*导出结算数据*/
function exportSettleData(){
   window.location.href = "project/settle/export/${prjName}/${contractNo}/${settleType}";
}
</script>