Skip to content

F
fgqyxxlr
Commit 36b95de3 by zhangyuan
Options

修改首页统计页面，新加统计接口

parent a00f7559
Showing with 922 additions and 228 deletions
ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/HomeStatisticsController.java 0 → 100644
package com.ruoyi.web.controller.system;
import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.system.service.IOrhonFgqyService;
import com.ruoyi.system.service.ISysDeptService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.Map;
/**
* 首页统计
*
* @author ruoyi
*/
@Controller
@RequestMapping("/home/statistics")
public class HomeStatisticsController extends BaseController
{
@Autowired
private IOrhonFgqyService orhonFgqyService;
@PostMapping("/chart")
@ResponseBody
public Object chart(){
try {
return AjaxResult.success(orhonFgqyService.chart());
}catch (Exception e){
return AjaxResult.error();
}
}
}
ruoyi-admin/src/main/resources/static/js/radialIndicator.js 0 → 100644
/*
radialIndicator.js v 1.0.0
Author: Sudhanshu Yadav
Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
Demo on: ignitersworld.com/lab/radialIndicator.html
*/
;(function ($, window, document) {
"use strict";
//circumfence and quart value to start bar from top
var circ = Math.PI * 2,
quart = Math.PI / 2;
//function to convert hex to rgb
function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
}
function getPropVal(curShift, perShift, bottomRange, topRange) {
return Math.round(bottomRange + ((topRange - bottomRange) * curShift / perShift));
}
//function to get current color in case of
function getCurrentColor(curPer, bottomVal, topVal, bottomColor, topColor) {
var rgbAryTop = topColor.indexOf('#') != -1 ? hexToRgb(topColor) : topColor.match(/\d+/g),
rgbAryBottom = bottomColor.indexOf('#') != -1 ? hexToRgb(bottomColor) : bottomColor.match(/\d+/g),
perShift = topVal - bottomVal,
curShift = curPer - bottomVal;
if (!rgbAryTop || !rgbAryBottom) return null;
return 'rgb(' + getPropVal(curShift, perShift, rgbAryBottom[0], rgbAryTop[0]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[1], rgbAryTop[1]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[2], rgbAryTop[2]) + ')';
}
//to merge object
function merge() {
var arg = arguments,
target = arg[0];
for (var i = 1, ln = arg.length; i < ln; i++) {
var obj = arg[i];
for (var k in obj) {
if (obj.hasOwnProperty(k)) {
target[k] = obj[k];
}
}
}
return target;
}
//function to apply formatting on number depending on parameter
function formatter(pattern) {
return function (num) {
if(!pattern) return num.toString();
num = num || 0
var numRev = num.toString().split('').reverse(),
output = pattern.split("").reverse(),
i = 0,
lastHashReplaced = 0;
//changes hash with numbers
for (var ln = output.length; i < ln; i++) {
if (!numRev.length) break;
if (output[i] == "#") {
lastHashReplaced = i;
output[i] = numRev.shift();
}
}
//add overflowing numbers before prefix
output.splice(lastHashReplaced+1, output.lastIndexOf('#') - lastHashReplaced, numRev.reverse().join(""));
return output.reverse().join('');
}
}
//circle bar class
function Indicator(container, indOption) {
indOption = indOption || {};
indOption = merge({}, radialIndicator.defaults, indOption);
this.indOption = indOption;
//create a queryselector if a selector string is passed in container
if (typeof container == "string")
container = document.querySelector(container);
//get the first element if container is a node list
if (container.length)
container = container[0];
this.container = container;
//create a canvas element
var canElm = document.createElement("canvas");
container.appendChild(canElm);
this.canElm = canElm; // dom object where drawing will happen
this.ctx = canElm.getContext('2d'); //get 2d canvas context
//add intial value
this.current_value = indOption.initValue || indOption.minValue || 0;
}
Indicator.prototype = {
constructor: radialIndicator,
init: function () {
var indOption = this.indOption,
canElm = this.canElm,
ctx = this.ctx,
dim = (indOption.radius + indOption.barWidth) * 2, //elm width and height
center = dim / 2; //center point in both x and y axis
//create a formatter function
this.formatter = typeof indOption.format == "function" ? indOption.format : formatter(indOption.format);
//maximum text length;
this.maxLength = indOption.percentage ? 4 : this.formatter(indOption.maxValue).length;
canElm.width = dim;
canElm.height = dim;
//draw a grey circle
ctx.strokeStyle = indOption.barBgColor; //background circle color
ctx.lineWidth = indOption.barWidth;
ctx.beginPath();
ctx.arc(center, center, indOption.radius, 0, 2 * Math.PI);
ctx.stroke();
//store the image data after grey circle draw
this.imgData = ctx.getImageData(0, 0, dim, dim);
//put the initial value if defined
this.value(this.current_value);
return this;
},
//update the value of indicator without animation
value: function (val) {
//return the val if val is not provided
if (val === undefined || isNaN(val)) {
return this.current_value;
}
val = parseInt(val);
var ctx = this.ctx,
indOption = this.indOption,
curColor = indOption.barColor,
dim = (indOption.radius + indOption.barWidth) * 2,
minVal = indOption.minValue,
maxVal = indOption.maxValue,
center = dim / 2;
//limit the val in range of 0 to 100
val = val < minVal ? minVal : val > maxVal ? maxVal : val;
var perVal = Math.round(((val - minVal) * 100 / (maxVal - minVal)) * 100) / 100, //percentage value tp two decimal precision
dispVal = indOption.percentage ? perVal + '%' : this.formatter(val); //formatted value
//save val on object
this.current_value = val;
//draw the bg circle
ctx.putImageData(this.imgData, 0, 0);
//get current color if color range is set
if (typeof curColor == "object") {
var range = Object.keys(curColor);
for (var i = 1, ln = range.length; i < ln; i++) {
var bottomVal = range[i - 1],
topVal = range[i],
bottomColor = curColor[bottomVal],
topColor = curColor[topVal],
newColor = val == bottomVal ? bottomColor : val == topVal ? topColor : val > bottomVal && val < topVal ? indOption.interpolate ? getCurrentColor(val, bottomVal, topVal, bottomColor, topColor) : topColor : false;
if (newColor != false) {
curColor = newColor;
break;
}
}
}
//draw th circle value
ctx.strokeStyle = curColor;
//add linecap if value setted on options
if (indOption.roundCorner) ctx.lineCap = "round";
ctx.beginPath();
ctx.arc(center, center, indOption.radius, -(quart), ((circ) * perVal / 100) - quart, false);
ctx.stroke();
//add percentage text
if (indOption.displayNumber) {
var cFont = ctx.font.split(' '),
weight = indOption.fontWeight,
fontSize = indOption.fontSize || (dim / (this.maxLength - (Math.floor(this.maxLength*1.4/4)-1)));
cFont = indOption.fontFamily || cFont[cFont.length - 1];
ctx.fillStyle = indOption.fontColor || curColor;
ctx.font = weight +" "+ fontSize + "px " + cFont;
ctx.textAlign = "center";
ctx.textBaseline = 'middle';
ctx.fillText(dispVal, center, center);
}
return this;
},
//animate progressbar to the value
animate: function (val) {
var indOption = this.indOption,
counter = this.current_value || indOption.minValue,
self = this,
incBy = Math.ceil((indOption.maxValue - indOption.minValue) / (indOption.frameNum || (indOption.percentage ? 100 : 500))), //increment by .2% on every tick and 1% if showing as percentage
back = val < counter;
//clear interval function if already started
if (this.intvFunc) clearInterval(this.intvFunc);
this.intvFunc = setInterval(function () {
if ((!back && counter >= val) || (back && counter <= val)) {
if (self.current_value == counter) {
clearInterval(self.intvFunc);
return;
} else {
counter = val;
}
}
self.value(counter); //dispaly the value
if (counter != val) {
counter = counter + (back ? -incBy : incBy)
}; //increment or decrement till counter does not reach to value
}, indOption.frameTime);
return this;
},
//method to update options
option: function (key, val) {
if (val === undefined) return this.option[key];
if (['radius', 'barWidth', 'barBgColor', 'format', 'maxValue', 'percentage'].indexOf(key) != -1) {
this.indOption[key] = val;
this.init().value(this.current_value);
}
this.indOption[key] = val;
}
};
/** Initializer function **/
function radialIndicator(container, options) {
var progObj = new Indicator(container, options);
progObj.init();
return progObj;
}
//radial indicator defaults
radialIndicator.defaults = {
radius: 50, //inner radius of indicator
barWidth: 5, //bar width
barBgColor: '#eeeeee', //unfilled bar color
barColor: '#99CC33', //filled bar color , can be a range also having different colors on different value like {0 : "#ccc", 50 : '#333', 100: '#000'}
format: null, //format indicator numbers, can be a # formator ex (##,###.##) or a function
frameTime: 10, //miliseconds to move from one frame to another
frameNum: null, //Defines numbers of frame in indicator, defaults to 100 when showing percentage and 500 for other values
fontColor: null, //font color
fontFamily: null, //defines font family
fontWeight: 'bold', //defines font weight
fontSize : null, //define the font size of indicator number
interpolate: true, //interpolate color between ranges
percentage: false, //show percentage of value
displayNumber: true, //display indicator number
roundCorner: false, //have round corner in filled bar
minValue: 0, //minimum value
maxValue: 100, //maximum value
initValue: 0 //define initial value of indicator
};
window.radialIndicator = radialIndicator;
//add as a jquery plugin
if ($) {
$.fn.radialIndicator = function (options) {
return this.each(function () {
var newPCObj = radialIndicator(this, options);
$.data(this, 'radialIndicator', newPCObj);
});
};
}
}(window.jQuery, window, document, void 0));
\ No newline at end of file
ruoyi-admin/target/classes/templates/main.html
......@@ -2,37 +2,92 @@
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('首页统计')"/>
<style>
.rad-prg{
position: relative;
}
.rad-con{
position: absolute;
z-index: 1;
top:0;
left: 0;
text-align: center;
width:90px;
height: 90px;
padding: 21px 0px 0px 20px;
font-family: "microsoft yahei";
}
p {
margin: 6px 0 -6px;
}
</style>
</head>
<body class="gray-bg">
<div class="row border-bottom white-bg dashboard-header">
<div class="col-sm-12">
<h4 class="form-header h4">统计信息</h4>
<div style="float: left ;margin-left: 20px;">
<button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${qyzs}"></span></button>
<span>非公企业总数</span>
<!-- <button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${qyzs}"></span></button>-->
<!-- <span>非公企业总数</span>-->
<div class="prg-cont rad-prg" id="indicatorContainer">
<div class="rad-con">
<p th:text="${qyzs}"></p>
<p>非公企业总数</p>
</div>
</div>
</div>
<div style="float: left ;margin-left: 20px;">
<button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${dzz}"></span></button>
<span>非公企业党组织数</span>
<!-- <button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${dzz}"></span></button>-->
<!-- <span>非公企业党组织数</span>-->
<div class="prg-cont rad-prg" id="indicatorContainer1">
<div class="rad-con">
<p th:text="${dzz}"></p>
<p>非公企业党组织数</p>
</div>
</div>
</div>
<div style="float: left ;margin-left: 20px;">
<button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${fgl}"></span></button>
<span>非公企业党组织覆盖率</span>
<!-- <button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${fgl}"></span></button>-->
<!-- <span>非公企业党组织覆盖率</span>-->
<div class="prg-cont rad-prg" id="indicatorContainer2">
<div class="rad-con">
<p th:text="${fgl}"></p>
<p>非公企业党组织覆盖率</p>
</div>
</div>
</div>
<div style="float: left;">
<div style="float: left ;margin-left: 20px;">
<button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${shzzqyzs}"></span></button>
<span>社会组织总数</span>
<!-- <button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${shzzqyzs}"></span></button>-->
<!-- <span>社会组织总数</span>-->
<div class="prg-cont rad-prg" id="indicatorContainer3">
<div class="rad-con">
<p th:text="${shzzqyzs}"></p>
<p>社会组织总数</p>
</div>
</div>
</div>
<div style="float: left ;margin-left: 20px;">
<button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${shzz}"></span></button>
<span>社会组织党组织数</span>
<!-- <button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${shzz}"></span></button>-->
<!-- <span>社会组织党组织数</span>-->
<div class="prg-cont rad-prg" id="indicatorContainer4">
<div class="rad-con">
<p th:text="${shzz}"></p>
<p>社会组织党组织数</p>
</div>
</div>
</div>
<div style="float: left ;margin-left: 20px;">
<button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${shzzfgl}"></span></button>
<span>社会组织党组织覆盖率</span>
<!-- <button class="btn btn-primary dim btn-large-dim" type="button"><span style="font-size: 26px;" th:text="${shzzfgl}"></span></button>-->
<!-- <span>社会组织党组织覆盖率</span>-->
<div class="prg-cont rad-prg" id="indicatorContainer5">
<div class="rad-con">
<p th:text="${shzzfgl}"></p>
<p>社会组织党组织覆盖率</p>
</div>
</div>
</div>
</div>
</div>
......@@ -40,145 +95,77 @@
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-6">
<h5 style="border-left: 2px solid red;padding-left: 10px;">市直、各旗区非公企业数量分布</h5>
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>近年非公企业和社会组织数量情况变化图</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">选项1</a>
</li>
<li><a href="#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<!-- <div class="ibox-title">-->
<!-- <div class="ibox-tools">-->
<!-- <a class="collapse-link">-->
<!-- <i class="fa fa-chevron-up"></i>-->
<!-- </a>-->
<!-- <a class="dropdown-toggle" data-toggle="dropdown" href="#">-->
<!-- <i class="fa fa-wrench"></i>-->
<!-- </a>-->
<!-- <ul class="dropdown-menu dropdown-user">-->
<!-- <li><a href="#">选项1</a>-->
<!-- </li>-->
<!-- <li><a href="#">选项2</a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <a class="close-link">-->
<!-- <i class="fa fa-times"></i>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<div class="ibox-content">
<div class="echarts" id="echarts-line-chart"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<h5 style="border-left: 2px solid red;padding-left: 10px;">市直、各旗区非社会组织数量分布</h5>
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>非公企业和社会组织发展党员情况图</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">选项1</a>
</li>
<li><a href="#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="echarts" id="echarts-bar-chart"></div>
</div>
</div>
</div>
</div>
<!-- 曲线图-->
<div class="row">
<div class="col-sm-12">
<h5 style="border-left: 2px solid red;padding-left: 10px;">市直、各旗区非公企业与社会组织已建立党组织数量分布</h5>
<div class="ibox float-e-margins">
<div class="ibox-content">
<div class="echarts" id="echarts-curve-chart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h5 style="border-left: 2px solid red;padding-left: 10px;">全市非公企业与社会组织党委、党总支、党支部、联合党支部数量分布</h5>
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>非公企业和社会组织各旗区分布图</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">选项1</a>
</li>
<li><a href="#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="echarts" id="echarts-pie-chart"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<h5 style="border-left: 2px solid red;padding-left: 10px;">市直、各旗区非公企业与社会组织</h5>
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>非公企业和社会组织各个类型分布图</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">选项1</a>
</li>
<li><a href="#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="echarts" id="echarts-radar-chart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5 style="border-left: 2px solid red;padding-left: 10px;">非公企业和社会组织党组织分布图</h5>
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>非公企业和社会组织党组织分布图</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">选项1</a>
</li>
<li><a href="#">选项2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div style="height:600px" id="echarts-map-chart"></div>
</div>
......@@ -189,146 +176,255 @@
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: peity-js"/>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/radialIndicator.js" th:src="@{/js/radialIndicator.js}"></script>
<script src="../static/ajax/libs/report/echarts/echarts-all.js" th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
<script th:inline="javascript">
function toPoint(percent){
var str=percent.replace("%","");
// str= str;
return str;
}
$('#indicatorContainer').radialIndicator({
barColor: '#73e2a7',
barWidth: 5,
initValue: [[${qyzs}]],
roundCorner : true,
percentage: true,
displayNumber: false,
radius: 50
});
$('#indicatorContainer1').radialIndicator({
barColor: '#ee9a4d',
barWidth: 5,
initValue: [[${dzz}]],
roundCorner : true,
percentage: true,
displayNumber: false,
radius: 50
});
$('#indicatorContainer2').radialIndicator({
barColor: '#7d71f6',
barWidth: 5,
initValue: toPoint([[${fgl}]]),
roundCorner : true,
percentage: true,
displayNumber: false,
radius: 50
});
$('#indicatorContainer3').radialIndicator({
barColor: '#e85384',
barWidth: 5,
initValue: [[${shzzqyzs}]],
roundCorner : true,
percentage: true,
displayNumber: false,
radius: 50
});
$('#indicatorContainer4').radialIndicator({
barColor: '#b147f0',
barWidth: 5,
initValue: [[${shzz}]],
roundCorner : true,
percentage: true,
displayNumber: false,
radius: 50
});
$('#indicatorContainer5').radialIndicator({
barColor: '#4b91f9',
barWidth: 5,
initValue: toPoint([[${shzzfgl}]]),
roundCorner : true,
percentage: true,
displayNumber: false,
radius: 50
});
// setTimeout(function(){
// var radObj = $('#indicatorContainer2').data('radialIndicator');
// radObj.animate(100);
// },300);
</script>
<script type="text/javascript">
$(function () {
var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
var lineoption = {
title: {
text: '近年数量变化'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['非公企业', '社会组织']
// legend: {
// show:true,
// data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
// },
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'none'
},
},
grid: {
x: 40,
x2: 40,
y2: 24
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
calculable: true,
xAxis: [
{
splitLine:{show: false},
type: 'category',
boundaryGap: false,
data: ['2014', '2015', '2016', '2017', '2018', '2019', '2020']
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
}
splitLine:{show: false},
type: 'value'
}
],
series: [
{
name: '非公企业',
type: 'line',
data: [11, 11, 15, 17, 20, 21, 25],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '社会组织',
type: 'line',
data: [1, 5, 7, 8, 11, 13, 18],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
stack: '总量',
symbolSize:10,
itemStyle: {
color: '#f8e7cd'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#f8e7cd'
}, {
offset: 1,
color: '#faf3ed'
}])
},
data: [120, 132, 101, 134, 90, 230, 210]
}
]
};
lineChart.setOption(lineoption);
$(window).resize(lineChart.resize);
var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
var baroption = {
title: {
text: '发展党员情况'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['非公企业', '社会组织']
// legend: {
// show:true,
// data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
// },
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'none'
},
},
grid: {
x: 30,
x2: 40,
y2: 24
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
calculable: true,
xAxis: [
{
splitLine:{show: false},
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
splitLine:{show: false},
type: 'value'
}
],
series: [
{
name: '非公企业',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '社会组织',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint: {
data: [
{name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
{name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
type: 'line',
stack: '总量',
symbolSize:10,
itemStyle: {
color: '#c5f4e2'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#c5f4e2'
}, {
offset: 1,
color: '#e8f7f4'
}])
},
data: [120, 132, 101, 134, 90, 230, 210]
}
]
};
barChart.setOption(baroption);
window.onresize = barChart.resize;
var curveChart = echarts.init(document.getElementById("echarts-curve-chart"));
var curveoption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'vertical',
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'right',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'top',
align: 'right',
data: ['预期','假设']
},
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: false
// },
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '假设',
type: 'line',
smooth: 0.5,
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '预期',
type: 'line',
smooth: 0.5,
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
curveChart.setOption(curveoption);
$(window).resize(curveChart.resize);
......@@ -337,35 +433,131 @@
var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
var pieoption = {
title: {
text: '各旗区分布',
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'vertical',
x: 'left',
data: ['东胜区', '达拉特旗', '准格尔旗', '鄂托克前旗', '杭锦旗','乌审旗','伊金霍洛旗']
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'right',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'top',
align: 'right',
data: ['图一', '张三']
},
calculable: true,
radar: [
{
indicator: [
{ text: '指标一' },
{ text: '指标二' },
{ text: '指标三' },
{ text: '指标四' }
],
center: ['25%', '50%'],
radius: 75,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
name: {
// formatter: '【{value}】',
textStyle: {
color: '#000000'
}
},
splitArea: {
areaStyle: {
color: ['rgba(255, 255, 255, 0.2)',
'rgba(255, 255, 255, 0.4)', 'rgba(255, 255, 255, 0.6)',
'rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 1)'],
shadowColor: 'rgba(255, 255, 255, 0)',
shadowBlur: 0
}
}
},
{
indicator: [
{ text: '语文', max: 150 },
{ text: '数学', max: 150 },
{ text: '英语', max: 150 },
{ text: '物理', max: 120 }
],
center: ['75%', '50%'],
radius: 75,
shape: 'circle',
name: {
// formatter: '【{value}】',
textStyle: {
color: '#000000'
}
},
splitArea: {
areaStyle: {
color: ['rgba(255, 255, 255, 0.2)',
'rgba(255, 255, 255, 0.4)', 'rgba(255, 255, 255, 0.6)',
'rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 1)'],
shadowColor: 'rgba(255, 255, 255, 0)',
shadowBlur: 0
}
}
}
],
series: [
{
name: '非公和社会组织',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
name: '雷达图',
type: 'radar',
emphasis: {
lineStyle: {
width: 4
}
},
data: [
{value: 335, name: '东胜区'},
{value: 310, name: '达拉特旗'},
{value: 234, name: '准格尔旗'},
{value: 135, name: '鄂托克前旗'},
{value: 154, name: '杭锦旗'},
{value: 135, name: '乌审旗'},
{value: 154, name: '伊金霍洛旗'}
{
value: [100, 8, 0.40, -80, 2000],
name: '图一',
symbol: 'rect',
symbolSize: 5,
areaStyle: {
opacity: 0.9,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#B8D3E4',
offset: 0
},
{
color: '#72ACD1',
offset: 1
}
])
}
}
]
},
{
name: '成绩单',
type: 'radar',
radarIndex: 1,
data: [
{
value: [120, 118, 130, 100, 99, 70],
name: '张三',
label: {
show: true,
formatter: function(params) {
return params.value;
}
},
areaStyle: {
opacity: 0.9,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#B8D3E4',
offset: 0
},
{
color: '#72ACD1',
offset: 1
}
])
}
}
]
}
]
......@@ -373,6 +565,8 @@
pieChart.setOption(pieoption);
$(window).resize(pieChart.resize);
var radarChart = echarts.init(document.getElementById("echarts-radar-chart"));
var radaroption = {
title: {
......
ruoyi-system/src/main/java/com/ruoyi/system/mapper/OrhonFgqyMapper.java
package com.ruoyi.system.mapper;
import java.util.List;
import java.util.Map;
import com.ruoyi.system.domain.OrhonFgqy;
/**
......@@ -62,4 +64,14 @@ public interface OrhonFgqyMapper
public String findDzz();
public String findQyzs();
public List<Map> selectLineChart();
List<Map> selectBarChart();
List<Map> selectCurveChart();
List<Map> selectPieChart();
List<Map> selectRadarChart();
}
ruoyi-system/src/main/java/com/ruoyi/system/service/IOrhonFgqyService.java
package com.ruoyi.system.service;
import java.util.List;
import java.util.Map;
import com.ruoyi.system.domain.OrhonFgqy;
/**
......@@ -62,4 +64,6 @@ public interface IOrhonFgqyService
public String findQyzs();
public String findDzz();
Object chart();
}
ruoyi-system/src/main/java/com/ruoyi/system/service/impl/OrhonFgqyServiceImpl.java
package com.ruoyi.system.service.impl;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.ruoyi.common.core.domain.AjaxResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.ruoyi.system.mapper.OrhonFgqyMapper;
......@@ -101,4 +105,28 @@ public class OrhonFgqyServiceImpl implements com.ruoyi.system.service.IOrhonFgqy
public String findDzz() {
return orhonFgqyMapper.findDzz();
}
@Override
public Object chart() {
Map resultMap = new HashMap();
try {
List<Map> lineChart = orhonFgqyMapper.selectLineChart();
resultMap.put("lineChart",lineChart);
List<Map> barChart = orhonFgqyMapper.selectBarChart();
resultMap.put("barChart",barChart);
List<Map> curveChart = orhonFgqyMapper.selectCurveChart();
resultMap.put("curveChart",curveChart);
List<Map> pieChart = orhonFgqyMapper.selectPieChart();
resultMap.put("pieChart",pieChart);
List<Map> radarChart = orhonFgqyMapper.selectRadarChart();
resultMap.put("radarChart",radarChart);
}catch (Exception e){
return AjaxResult.error(e+"");
}
return AjaxResult.success(resultMap);
}
}
ruoyi-system/src/main/resources/mapper/system/OrhonFgqyMapper.xml
......@@ -384,4 +384,90 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
</foreach>
</delete>
<!-- 市直、各旗区非公企业分布折线统计-->
<select id="selectLineChart" parameterType="java.util.List" resultType="java.util.Map">
SELECT
d.dict_label name,
count( off.id ) value
FROM
sys_dict_data d
LEFT JOIN orhon_fgqy off ON off.dept_id = d.dict_value
WHERE
d.dict_type = 'orhon_qyfl'
AND d.STATUS = '0'
GROUP BY
d.dict_code
ORDER BY
d.dict_sort
</select>
<!-- 市直、各旗区社会组织分布折线统计-->
<select id="selectBarChart" parameterType="java.util.List" resultType="java.util.Map">
SELECT
d.dict_label name,
count( oz.id ) value
FROM
sys_dict_data d
LEFT JOIN orhon_shzz oz ON oz.dept_id = d.dict_value
WHERE
d.dict_type = 'orhon_qyfl'
AND d.STATUS = '0'
GROUP BY
d.dict_code
ORDER BY
d.dict_sort
</select>
<!-- 市直、各旗区社会组织分布折线统计-->
<select id="selectCurveChart" parameterType="java.util.List" resultType="java.util.Map">
SELECT
d.dict_label name,
(select count(0) from orhon_shzz where dept_id = d.dict_value) shzzValue,
(select count(0) from orhon_fgqy where dept_id = d.dict_value) fgqyValue
FROM
sys_dict_data d
WHERE
d.dict_type = 'orhon_qyfl'
AND d.STATUS = '0'
GROUP BY
d.dict_code
ORDER BY
d.dict_sort
</select>
<!-- 全市非公企业与社会组织党委、党总支、党支部、联合党支部数量分布统计-->
<select id="selectPieChart" parameterType="java.util.List" resultType="java.util.Map">
SELECT
d.dict_label name,
(select count(0) from orhon_shzz where dept_id = d.dict_value) shzzValue,
(select count(0) from orhon_fgqy where dept_id = d.dict_value) fgqyValue
FROM
sys_dict_data d
WHERE
d.dict_type = 'orhon_qyfl'
AND d.STATUS = '0'
GROUP BY
d.dict_code
ORDER BY
d.dict_sort
</select>
<!-- 市直、各旗区非公企业与社会组织统计-->
<select id="selectRadarChart" parameterType="java.util.List" resultType="java.util.Map">
SELECT
d.dict_label name,
(select count(0) from orhon_shzz where dept_id = d.dict_value) shzzValue,
(select count(0) from orhon_fgqy where dept_id = d.dict_value) fgqyValue
FROM
sys_dict_data d
WHERE
d.dict_type = 'orhon_qyfl'
AND d.STATUS = '0'
GROUP BY
d.dict_code
ORDER BY
d.dict_sort
</select>
</mapper>
ruoyi-system/target/classes/mapper/system/OrhonFgqyMapper.xml
......@@ -384,4 +384,90 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
</foreach>
</delete>
<!-- 市直、各旗区非公企业分布折线统计-->
<select id="selectLineChart" parameterType="java.util.List" resultType="java.util.Map">
SELECT
d.dict_label name,
count( off.id ) value
FROM
sys_dict_data d
LEFT JOIN orhon_fgqy off ON off.dept_id = d.dict_value
WHERE
d.dict_type = 'orhon_qyfl'
AND d.STATUS = '0'
GROUP BY
d.dict_code
ORDER BY
d.dict_sort
</select>
<!-- 市直、各旗区社会组织分布折线统计-->
<select id="selectBarChart" parameterType="java.util.List" resultType="java.util.Map">
SELECT
d.dict_label name,
count( oz.id ) value
FROM
sys_dict_data d
LEFT JOIN orhon_shzz oz ON oz.dept_id = d.dict_value
WHERE
d.dict_type = 'orhon_qyfl'
AND d.STATUS = '0'
GROUP BY
d.dict_code
ORDER BY
d.dict_sort
</select>
<!-- 市直、各旗区社会组织分布折线统计-->
<select id="selectCurveChart" parameterType="java.util.List" resultType="java.util.Map">
SELECT
d.dict_label name,
(select count(0) from orhon_shzz where dept_id = d.dict_value) shzzValue,
(select count(0) from orhon_fgqy where dept_id = d.dict_value) fgqyValue
FROM
sys_dict_data d
WHERE
d.dict_type = 'orhon_qyfl'
AND d.STATUS = '0'
GROUP BY
d.dict_code
ORDER BY
d.dict_sort
</select>
<!-- 全市非公企业与社会组织党委、党总支、党支部、联合党支部数量分布统计-->
<select id="selectPieChart" parameterType="java.util.List" resultType="java.util.Map">
SELECT
d.dict_label name,
(select count(0) from orhon_shzz where dept_id = d.dict_value) shzzValue,
(select count(0) from orhon_fgqy where dept_id = d.dict_value) fgqyValue
FROM
sys_dict_data d
WHERE
d.dict_type = 'orhon_qyfl'
AND d.STATUS = '0'
GROUP BY
d.dict_code
ORDER BY
d.dict_sort
</select>
<!-- 市直、各旗区非公企业与社会组织统计-->
<select id="selectRadarChart" parameterType="java.util.List" resultType="java.util.Map">
SELECT
d.dict_label name,
(select count(0) from orhon_shzz where dept_id = d.dict_value) shzzValue,
(select count(0) from orhon_fgqy where dept_id = d.dict_value) fgqyValue
FROM
sys_dict_data d
WHERE
d.dict_type = 'orhon_qyfl'
AND d.STATUS = '0'
GROUP BY
d.dict_code
ORDER BY
d.dict_sort
</select>
</mapper>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment