折线图
效果图
代码
<template>
<div ref="chart" id="main" style="width: 1200px; height: 600px;"></div>
</template>
<script>
import * as echarts from 'echarts';
import {getStatisticsCount} from "@/api/manage/manage";
export default {
name: 'LineChart',
data() {
return {
chart: null,
lineData: null
}
},
mounted() {
this.getStatisticsRepairCount();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
if (this.chart) {
this.chart.dispose();
}
},
methods: {
renderChart() {
const myChart = echarts.init(this.$refs.chart);
const option = {
title: {
text: '次数统计',
left: 'center',
padding: [10, 0, 0, 20], // 上, 右, 下, 左
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: Object.keys(this.lineData),
name: '名称',
},
yAxis: {
type: 'value',
name: '次数',
minInterval: 1
},
color: 'red',
series: [{
data: Object.values(this.lineData).map(value => value.length),
type: 'line'
}],
// grid: {
// top: '50px',
// },
};
myChart.setOption(option);
this.chart = myChart;
},
getStatisticsCount() {
getStatisticsCount().then(res => {
if (res.code === 0) {
this.lineData = res.data;
this.renderChart();
}
}).catch(err => {
})
},
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
}
};
</script>
饼图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>活动侧重点分析</title>
<!-- Favicon icon -->
<link rel="stylesheet" href="../../static/css/bootstrap-select.min.css">
<link href="../../static/css/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../static/css/style.css">
<link rel="stylesheet" href="../../static/css/skin-2.css">
</head>
<body>
<!--*******************
Preloader start
********************-->
<div id="preloader">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
</div>
</div>
<!--*******************
Preloader end
********************-->
<!--**********************************
Main wrapper start
***********************************-->
<div id="main-wrapper">
<!-- row -->
<div class="container-fluid">
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4>统计分析管理</h4>
</div>
</div>
<div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="../../index.html">首页</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">统计分析管理</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">活动侧重点分析</a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills mb-3">
<div class="col-12">
<div class="form-inline" style="margin-bottom: 20px;">
<label class="form-label" style="margin-right: 10px;">党支部选择：</label>
<select class="selected" v-model="selectedOption" @change="getActivityRangeByBranchId()"
aria-label="Default select example">
<option v-for="option in options" :value="option.id">
{{ option.partybranchname }}
</option>
</select>
<label class="form-label" style="margin-left: 10px; margin-right: 10px;">查询年份：</label>
<select class="form-control" v-model="selectedYear" @change="getActivityRangeByBranchId()"
aria-label="Default select example">
<option v-for="year in yearList" :value="year">
{{ year }}
</option>
</select>
<script>
let element = document.getElementsByClassName('selected')[0];
element.style.appearance = 'none';
element.style.webkitAppearance = 'none';
element.style.mozAppearance = 'none';
element.style.backgroundColor = '#f5f5f5';
element.style.border = '1px solid #ccc';
element.style.padding = '8px';
element.style.fontFamily = 'Arial, sans-serif';
element.style.fontSize = '14px';
element.style.color = '#555';
</script>
</div>
</div>
</ul>
</div>
</div>
<div class="row">
<div ref="chart" id="main" style="width:100%;height: auto"></div>
</div>
</div>
</div>
<script src="../../static/js/sweetalert2.min.js"></script>
<!-- Required vendors -->
<script src="../../static/js/global.min.js"></script>
<!-- TODO 加载冲突 -->
<!--<script src="../../static/js/bootstrap-select.min.js"></script>-->
<script src="../../static/js/custom.min.js"></script>
<script src="../../static/js/dlabnav-init.js"></script>
<!-- Svganimation scripts -->
<script src="../../static/js/vivus.min.js"></script>
<script src="../../static/js/svg.animation.js"></script>
<script src="../../static/js/vue.min.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/echarts.min.js"></script>
<script>
axios.defaults.withCredentials = true
// do nothing
let pieDataItemStruct = {
branchId: Number,
branchName: String,
typeId: Number,
typeName: String,
count: Number
}
const content = new Vue({
el: "#main-wrapper",
name: "ManagerAll",
data: {
chart: null,
selectedOption: null,
selectedYear: null,
pieData: [],
options: [],
yearList: []
},
watch: {
pieData: {
handler() {
this.renderChart();
},
deep: true
}
},
mounted() {
// 挂载时获取数据
this.getAbnormalList();
this.getYearList();
// 监听窗口尺寸变更
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
renderChart() {
const chart = echarts.init(document.getElementById('main'));
let option = {
title: {
text: '统计分析管理',
subtext: '活动侧重点分析',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: (params) => {
if (this.pieData && this.pieData.length > 0) {
const dataIndex = params.dataIndex;
const dataItem = this.pieData[dataIndex];
const classifyNames = dataItem.classifyNames;
const classifyNamesStr = classifyNames?.length > 0 ? classifyNames.join('<br/>') : '';
var color = params.color; // 图例颜色
return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color}"></span>${params.seriesName}: ${params.value} (${params.percent}%)<br/>${classifyNamesStr}`;
} else {
return '暂无数据';
}
}
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '活动侧重点分析',
type: 'pie',
radius: '50%',
label: {
show: true,
formatter: "{b} : {c} ({d}%)"
},
data: this.pieData?.length > 0 ? this.pieData.map(({count, typeName}) => ({
value: count,
name: typeName
})) : [{value: 0, name: '暂无数据'}],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option);
this.chart = chart;
},
/**
* 查询年份
*/
getYearList() {
http.get("/sys-message/yearList")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.yearList = res.data.data;
if (this.yearList.length > 0) {
console.log("year", this.yearList);
this.selectedYear = this.yearList[0];
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
/**
* 查询所有党支部信息操作
*/
getAbnormalList() {
http.get("/sys-branch/login_abnormal_list")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.options = res.data.data;
if (this.options.length > 0) {
this.selectedOption = this.options[0]?.id;
this.getActivityRangeByBranchId();
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
/**
* 根据获取党支部id获取该党支部的活动范围
*/
getActivityRangeByBranchId() {
http.get(`/sys-file-info/getActivityRangeByBranchId?branchId=${this.selectedOption}&year=${this.selectedYear}`)
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.pieData = res.data.data || [];
} else {
sweetAlert("后台异常", res.data?.msg, "error");
}
});
}
},
created() {
}
});
</script>
</body>
</html>
折线图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>历年评比统计</title>
<!-- Favicon icon -->
<link rel="stylesheet" href="../../static/css/bootstrap-select.min.css">
<link href="../../static/css/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../static/css/style.css">
<link rel="stylesheet" href="../../static/css/skin-2.css">
</head>
<body>
<!--*******************
Preloader start
********************-->
<div id="preloader">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
</div>
</div>
<!--*******************
Preloader end
********************-->
<!--**********************************
Main wrapper start
***********************************-->
<div id="main-wrapper">
<!-- row -->
<div class="container-fluid">
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4>统计分析管理</h4>
</div>
</div>
<div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="../../index.html">首页</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">统计分析管理</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">历年评比统计</a></li>
</ol>
</div>
</div>
<div class="row">
<div ref="chart" id="main" style="width:100%;height: auto"></div>
</div>
</div>
</div>
<script src="../../static/js/sweetalert2.min.js"></script>
<!-- Required vendors -->
<script src="../../static/js/global.min.js"></script>
<script src="../../static/js/bootstrap-select.min.js"></script>
<script src="../../static/js/custom.min.js"></script>
<script src="../../static/js/dlabnav-init.js"></script>
<!-- Svganimation scripts -->
<script src="../../static/js/vivus.min.js"></script>
<script src="../../static/js/svg.animation.js"></script>
<script src="../../static/js/vue.min.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/echarts.min.js"></script>
<script>
axios.defaults.withCredentials = true
const content = new Vue({
el: "#main-wrapper",
name: "ManagerAll",
data: {
chart: null,
lineData: null
},
watch: {
lineData: {
handler() {
this.renderChart();
},
deep: true
}
},
mounted() {
this.getCalendarYearScore();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
async createChart() {
this.renderChart();
},
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
renderChart() {
const chart = echarts.init(document.getElementById('main'));
const option = {
title: {
text: '统计分析管理',
subtext: '历年评比统计',
left: 'center',
padding: [10, 0, 0, 20], // 上, 右, 下, 左
/* textStyle: {
fontWeight: 'normal',
color: 'MidnightBlue' // 标题颜色
} */
},
/* 提示框组件 */
tooltip: {
trigger: 'axis', // 触发类型，在饼形图中为item
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params, ticket, callback) { // 用formatter回调函数显示多项数据内容
var htmlStr = '';
for (var i = 0; i < params.length; i++) {
var param = params[i];
var xName = param.name; // x轴的名称
var seriesName = param.seriesName; // 图例名称
var value = param.value; // y轴值
var color = param.color; // 图例颜色
if (i === 0) {
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr += '<div>';
//为了保证和原来的效果一样，这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
// 文本颜色设置--(需要设置,请解注释下面一行)
// htmlStr += '<span style="color:'+color+'">';
// 圆点后面显示的文本
htmlStr += seriesName + '：' + value + '   ';
// 文本颜色设置--(需要设置,请解注释下面一行)
// htmlStr += '</span>';
htmlStr += '</div>';
}
return htmlStr;
}
},
xAxis: {
type: 'category',
data: ['2021', '2022', '2023', '2024', '2025']
},
yAxis: {
type: 'category',
data: ['一星级党支部', '二星级党支部', '三星级党支部', '四星级党支部', '五星级党支部']
},
color: ['HotPink', 'DeepSkyBlue', 'LawnGreen', 'Gold'], // 图例及线条的颜色
/* 设置图例样式 */
legend: {
left: 'center', // 位置
padding: [60, 0, 30, 0],
icon: "circle", // 形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 12, // 设置间距
data: ['数科学院教师第一党支部', '数科学院教师第二党支部', '计科教师第一支部', '计科教师第二党支部'],
textStyle: { // 设置图例字体
color: '#000000',
// fontSize: "15"
}
},
grid: {
top: '20%',
bottom: '25%',
containLabel: true
},
series: [
{
name: '数科学院教师第一党支部',
data: ['三星级党支部', '四星级党支部', '三星级党支部', '二星级党支部', '五星级党支部'],
type: 'line',
smooth: true
},
{
name: '数科学院教师第二党支部',
data: ['二星级党支部', '三星级党支部', '五星级党支部', '四星级党支部', '三星级党支部'],
type: 'line',
smooth: true
},
{
name: '计科教师第一支部',
data: ['五星级党支部', '四星级党支部', '四星级党支部', '三星级党支部', '二星级党支部'],
type: 'line',
smooth: true
},
{
name: '计科教师第二党支部',
data: ['四星级党支部', '五星级党支部', '三星级党支部', '五星级党支部', '四星级党支部'],
type: 'line',
smooth: true
}
]
};
// 年份
/**
* const years = [];
* for (const year in this.lineData) {
* years.push(year);
* }
* years.sort();
*/
const years = Object.keys(this.lineData).sort();
option.xAxis.data = years;
const legendData = Array.from(new Set(Object.values(this.lineData).flatMap(yearData => yearData.map(sysBranchStar => sysBranchStar.partybranchname))));
option.legend.data = legendData;
console.log('legendData:', legendData);
const seriesData = legendData.map(legendItem => ({
name: legendItem,
data: years.map(year => {
const yearData = this.lineData[year];
const sysBranchStar = yearData.find(item => item.partybranchname === legendItem);
return sysBranchStar ? sysBranchStar.starrating : null;
}),
type: 'line',
smooth: true
}));
option.series = seriesData;
console.log('seriesData:', seriesData);
/*================debugger ending================*/
chart.setOption(option);
this.chart = chart;
},
getCalendarYearScore() {
http.get("/sys-branch-star/getCalendarYearScore")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.lineData = res.data.data;
} else {
sweetAlert("后台异常", res.data?.msg, "error");
}
});
}
},
created() {
}
});
</script>
</body>
</html>
柱状图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>支撑材料统计</title>
<!-- Favicon icon -->
<link rel="stylesheet" href="../../static/css/bootstrap-select.min.css">
<link href="../../static/css/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../static/css/style.css">
<link rel="stylesheet" href="../../static/css/skin-2.css">
</head>
<body>
<!--*******************
Preloader start
********************-->
<div id="preloader">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
</div>
</div>
<!--*******************
Preloader end
********************-->
<!--**********************************
Main wrapper start
***********************************-->
<div id="main-wrapper">
<!-- row -->
<div class="container-fluid">
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4>统计分析管理</h4>
</div>
</div>
<div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="../../index.html">首页</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">统计分析管理</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">支撑材料统计</a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills mb-3">
<div class="col-12">
<div class="form-inline" style="margin-bottom: 20px;">
<label class="form-label" style="margin-right: 10px;">党支部选择：</label>
<select class="selected" v-model="selectedOption" @change="getProcessStatistics()"
aria-label="Default select example">
<option v-for="option in options" :value="option.id">
{{ option.partybranchname }}
</option>
</select>
<label class="form-label" style="margin-left: 10px; margin-right: 10px;">查询年份：</label>
<select class="form-control" v-model="selectedYear" @change="getProcessStatistics()"
aria-label="Default select example">
<option v-for="year in yearList" :value="year">
{{ year }}
</option>
</select>
<script>
let element = document.getElementsByClassName('selected')[0];
element.style.appearance = 'none';
element.style.webkitAppearance = 'none';
element.style.mozAppearance = 'none';
element.style.backgroundColor = '#f5f5f5';
element.style.border = '1px solid #ccc';
element.style.padding = '8px';
element.style.fontFamily = 'Arial, sans-serif';
element.style.fontSize = '14px';
element.style.color = '#555';
</script>
</div>
</div>
</ul>
</div>
</div>
<div class="row">
<div ref="chart" id="main" style="width:100%;height: auto"></div>
</div>
</div>
</div>
<script src="../../static/js/sweetalert2.min.js"></script>
<!-- Required vendors -->
<script src="../../static/js/global.min.js"></script>
<!--<script src="../../static/js/bootstrap-select.min.js"></script>-->
<script src="../../static/js/custom.min.js"></script>
<script src="../../static/js/dlabnav-init.js"></script>
<!-- Svganimation scripts -->
<script src="../../static/js/vivus.min.js"></script>
<script src="../../static/js/svg.animation.js"></script>
<script src="../../static/js/vue.min.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/echarts.min.js"></script>
<script>
axios.defaults.withCredentials = true
const content = new Vue({
el: "#main-wrapper",
name: "ManagerAll",
data: {
chart: null,
barData: null,
selectedOption: null,
selectedYear: null,
options: [],
yearList: []
},
watch: {
barData: {
handler() {
this.renderChart();
},
deep: true
}
},
mounted() {
this.getAbnormalList();
this.getYearList();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
async createChart() {
this.renderChart();
},
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
renderChart() {
const chart = echarts.init(document.getElementById('main'));
let xAxisData = this.barData ? Object.keys(this.barData) : [];
let option = {
title: {
text: '统计分析管理',
subtext: '支撑材料统计',
left: 'center',
padding: [10, 0, 0, 20], // 上, 右, 下, 左
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter: params => {
if (this.barData) {
let arr = this.barData[params[0].name];
if (arr) {
return arr.map(item => `${item?.classifyName ? item.classifyName : ''}<br/>`).join('');
}
}
return '';
}
},
label: {
show: true,
formatter: '{c}个'
},
xAxis: {
type: 'category',
data: xAxisData,
axisLabel: {
show: true, // 是否显示刻度标签，默认显示
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
inside: false, // 刻度标签是否朝内，默认朝外
margin: 6, // 刻度标签与轴线之间的距离
formatter: '{value}' , // 刻度标签的内容格式器
}
},
yAxis: {
type: 'value',
min: 0,
max: 10
},
grid: {
height: "400px",
},
series: [
{
data: this.barData ? Object.values(this.barData).map(item => item ? item?.length : 0) : Array(xAxisData.length).fill(0),
type: 'bar'
}
]
};
chart.setOption(option);
this.chart = chart;
},
/**
* 查询年份
*/
getYearList() {
http.get("/sys-message/yearList")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.yearList = res.data.data;
if (this.yearList.length > 0) {
console.log("year", this.yearList);
this.selectedYear = this.yearList[0];
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
/**
* 查询所有党支部信息操作
*/
getAbnormalList() {
http.get("/sys-branch/login_abnormal_list")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.options = res.data.data;
if (this.options.length > 0) {
this.selectedOption = this.options[0]?.id;
this.getProcessStatistics();
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
getProcessStatistics() {
http.get(`/sys-file-info/supportingMaterialStatistics?branchId=${this.selectedOption}&year=${this.selectedYear}`)
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.barData = res.data.data;
} else {
sweetAlert("后台异常", res.data?.msg, "error");
}
});
}
},
created() {
}
});
</script>
</body>
</html>
双柱状图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>岗位性别统计</title>
<!-- Favicon icon -->
<link rel="stylesheet" href="../../static/css/bootstrap-select.min.css">
<link href="../../static/css/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../static/css/style.css">
<link rel="stylesheet" href="../../static/css/skin-2.css">
</head>
<body>
<!--*******************
Preloader start
********************-->
<div id="preloader">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
</div>
</div>
<!--*******************
Preloader end
********************-->
<!--**********************************
Main wrapper start
***********************************-->
<div id="main-wrapper">
<!-- row -->
<div class="container-fluid">
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4>统计分析管理</h4>
</div>
</div>
<div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="../../index.html">首页</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">统计分析管理</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">岗位信息统计</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">岗位性别统计</a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills mb-3">
<div class="col-12">
<div class="form-inline" style="margin-bottom: 20px;">
<label class="form-label" style="margin-right: 10px;">党支部选择：</label>
<select class="selected" v-model="selectedOption" @change="getProcessStatistics()"
aria-label="Default select example">
<option v-for="option in options" :value="option.id">
{{ option.partybranchname }}
</option>
</select>
<script>
let element = document.getElementsByClassName('selected')[0];
element.style.appearance = 'none';
element.style.webkitAppearance = 'none';
element.style.mozAppearance = 'none';
element.style.backgroundColor = '#f5f5f5';
element.style.border = '1px solid #ccc';
element.style.padding = '8px';
element.style.fontFamily = 'Arial, sans-serif';
element.style.fontSize = '14px';
element.style.color = '#555';
</script>
</div>
</div>
</ul>
</div>
</div>
<div class="row">
<div ref="chart" id="main" style="width:100%;height: auto"></div>
</div>
</div>
</div>
<script src="../../static/js/sweetalert2.min.js"></script>
<!-- Required vendors -->
<script src="../../static/js/global.min.js"></script>
<!--<script src="../../static/js/bootstrap-select.min.js"></script>-->
<script src="../../static/js/custom.min.js"></script>
<script src="../../static/js/dlabnav-init.js"></script>
<!-- Svganimation scripts -->
<script src="../../static/js/vivus.min.js"></script>
<script src="../../static/js/svg.animation.js"></script>
<script src="../../static/js/vue.min.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/echarts.min.js"></script>
<script>
axios.defaults.withCredentials = true
const content = new Vue({
el: "#main-wrapper",
name: "ManagerAll",
data: {
chart: null,
barData: null,
selectedOption: null,
selectedYear: '',
options: []
},
watch: {
barData: {
handler() {
this.renderChart();
},
deep: true
}
},
mounted() {
this.getAbnormalList();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
async createChart() {
this.renderChart();
},
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
renderChart() {
const chart = echarts.init(document.getElementById('main'));
// let xAxisData = this.barData ? Object.keys(this.barData) : [];
let xAxisData = ['教师', '辅导员', '人力资源'];
var maleCountByPosition = {};
var femaleCountByPosition = {};
for (var position in this.barData) {
var employees = this.barData[position];
var maleCount = 0;
var femaleCount = 0;
for (var i = 0; i < employees.length; i++) {
if (employees[i].sex === "0") {
maleCount++;
}
if (employees[i].sex === "1") {
femaleCount++;
}
}
maleCountByPosition[position] = maleCount;
femaleCountByPosition[position] = femaleCount;
}
console.log("各岗位男性个数：", maleCountByPosition);
console.log("各岗位女性个数：", femaleCountByPosition);
let option = {
title: {
text: '岗位性别统计',
left: 'center',
padding: [10, 0, 0, 20], // 上, 右, 下, 左
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter: function (params) {
var result = params[0].name + '<br/>';
for (var i = 0, l = params.length; i < l; i++) {
result += params[i].seriesName + ' : ' + params[i].value + '<br/>';
}
return result;
}
},
label: {
show: true,
// formatter: '{c}个'
},
xAxis: {
type: 'category',
data: xAxisData,
},
yAxis: {
type: 'value',
// min: 0,
// max: 10
},
grid: {
top: '100px',
height: "400px",
},
legend: {
data: ['男', '女'],
top: 32,
},
series: [
{
data: maleCountByPosition ? Object.values(maleCountByPosition) : Array(xAxisData.length).fill(0),
type: 'bar',
name: '男'
},
{
data: femaleCountByPosition ? Object.values(femaleCountByPosition) : Array(xAxisData.length).fill(0),
type: 'bar',
name: '女'
}
]
};
chart.setOption(option);
this.chart = chart;
},
/**
* 查询所有党支部信息操作
*/
getAbnormalList() {
http.get("/sys-branch/login_abnormal_list")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.options = res.data.data;
if (this.options.length > 0) {
this.selectedOption = this.options[0]?.id;
this.getProcessStatistics();
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
getProcessStatistics() {
http.get(`/sys-user/jobInformationStatistics?branchId=${this.selectedOption}`)
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.barData = res.data.data;
} else {
sweetAlert("后台异常", res.data?.msg, "error");
}
});
}
},
created() {
}
});
</script>
</body>
</html>
层叠柱状图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>活动自评分统计</title>
<!-- Favicon icon -->
<link rel="stylesheet" href="../../static/css/bootstrap-select.min.css">
<link href="../../static/css/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../static/css/style.css">
<link rel="stylesheet" href="../../static/css/skin-2.css">
</head>
<body>
<!--*******************
Preloader start
********************-->
<div id="preloader">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
</div>
</div>
<!--*******************
Preloader end
********************-->
<!--**********************************
Main wrapper start
***********************************-->
<div id="main-wrapper">
<!-- row -->
<div class="container-fluid">
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4>统计分析管理</h4>
</div>
</div>
<div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="../../index.html">首页</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">统计分析管理</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">党支部活动统计</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">活动自评分统计</a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills mb-3">
<div class="col-12">
<div class="form-inline" style="margin-bottom: 20px;">
<label class="form-label" style="margin-right: 10px;">党支部选择：</label>
<select class="selected" v-model="selectedOption" @change="partBranchActivitiesStatistics()"
aria-label="Default select example">
<option v-for="option in options" :value="option.id">
{{ option.partybranchname }}
</option>
</select>
<label class="form-label" style="margin-left: 10px; margin-right: 10px;">查询年份：</label>
<select class="form-control" v-model="selectedYear"
@change="partBranchActivitiesStatistics()"
aria-label="Default select example">
<option v-for="year in yearList" :value="year">
{{ year }}
</option>
</select>
<script>
let element = document.getElementsByClassName('selected')[0];
element.style.appearance = 'none';
element.style.webkitAppearance = 'none';
element.style.mozAppearance = 'none';
element.style.backgroundColor = '#f5f5f5';
element.style.border = '1px solid #ccc';
element.style.padding = '8px';
element.style.fontFamily = 'Arial, sans-serif';
element.style.fontSize = '14px';
element.style.color = '#555';
</script>
</div>
</div>
</ul>
</div>
</div>
<div class="row">
<div ref="chart" id="main" style="width:100%;height: auto"></div>
</div>
</div>
</div>
<script src="../../static/js/sweetalert2.min.js"></script>
<!-- Required vendors -->
<script src="../../static/js/global.min.js"></script>
<!--<script src="../../static/js/bootstrap-select.min.js"></script>-->
<script src="../../static/js/custom.min.js"></script>
<script src="../../static/js/dlabnav-init.js"></script>
<!-- Svganimation scripts -->
<script src="../../static/js/vivus.min.js"></script>
<script src="../../static/js/svg.animation.js"></script>
<script src="../../static/js/vue.min.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/echarts.min.js"></script>
<script>
axios.defaults.withCredentials = true
const content = new Vue({
el: "#main-wrapper",
name: "ManagerAll",
data: {
chart: null,
barData: null,
selectedOption: null,
selectedYear: null,
options: [],
yearList: [],
standScores: []
},
watch: {
barData: {
handler() {
this.renderChart();
},
deep: true
}
},
mounted() {
this.getAbnormalList();
this.getYearList();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
async createChart() {
this.renderChart();
},
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
renderChart() {
const chart = echarts.init(document.getElementById('main'));
var chartData = this.buildChartData(this.standScores);
console.log("chartData", chartData);
let option = {
title: {
text: '党支部活动统计',
subtext: '活动自评分统计',
left: 'center',
padding: [10, 0, 0, 20], // 上, 右, 下, 左
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
},
confine: true,//限制tooltip在图表内显示
formatter: function (params) { // 提示内容太多隔行显示内容
let newList = []//去除null的数据
newList = params.filter(item => {
// console.log("item", item);
if (item.data !== null && item.data !== undefined) {
return item;
}
})
let astr = ''
let isBig = newList.length > 9
newList.forEach((ele, index) => {
astr += `<div style="display: block;height:20px;${index % 2 === 0 ? 'width: ' + (isBig ? '33.33' : '100') + '%;' : 'width: ' + (isBig ? '33.33' : '100') + '%;'}float:left;">
<i style="width: 10px;height: 10px;display: inline-block;background: ${ele.color};border-radius: 10px;"></i>
<span>${ele.seriesName}: ${ele.data}分</span>
</div>`
})
return '<div style="width:' + (isBig ? '50' : '') + 'vw;">' + astr + '<div>'
}
},
xAxis: {
type: 'category',
data: chartData.xAxisData,
axisLabel: {
show: true, // 是否显示刻度标签，默认显示
interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
rotate: -45, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
inside: false, // 刻度标签是否朝内，默认朝外
margin: 6, // 刻度标签与轴线之间的距离
formatter: '{value}', // 刻度标签的内容格式器
}
},
yAxis: {
type: 'value'
},
grid: {
top: '200px',
height: "400px",
},
legend: {
type: 'scroll', //数据过多时分页显示legend
containLabel: true,
top: 60
},
series: chartData.chartData // 使用动态获取的chartData
};
chart.setOption(option);
this.chart = chart;
},
/*构造图表数据*/
buildChartData(data) {
let xAxisData = [];
let chartData = [];
let baseStack = [];
if (data) {
data.map(item => {
if (item.hasOwnProperty('children') && item.children) {
item.children.map(child => {
let has = false//查重
baseStack.find(stack => {
if (stack.name === child.name) {
has = true
}
})
!has && baseStack.push(child)
})
}
xAxisData.push(item.name)
})
let seriesDataList = []
baseStack.map((base, bIndex) => {
let obj = {
name: base.name,
dataList: []
}
data.map((item, cIndex) => {
if (item.children) {
item.children.map((child, pIndex) => {
if (child.name === base.name) {
obj.dataList[cIndex] = child.score
}
})
}
if (!obj.dataList[cIndex]) {
obj.dataList[cIndex] = null
}
})
seriesDataList.push(obj)
})
seriesDataList.forEach(item => {//设置echarts的series数据
let objRealSeries = {
name: item.name,
type: 'bar',
stack: 'stack',
tooltip: {
valueFormatter: function (value) {
return value + '分';
}
},
// barWidth: '18%',
data: item.dataList,
}
chartData.push(objRealSeries)
})
return {
chartData: chartData,
xAxisData: xAxisData
};
}
},
/**
* 查询年份
*/
getYearList() {
http.get("/sys-message/yearList")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.yearList = res.data.data;
if (this.yearList.length > 0) {
console.log("year", this.yearList);
this.selectedYear = this.yearList[0];
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
/**
* 查询所有党支部信息操作
*/
getAbnormalList() {
http.get("/sys-branch/login_abnormal_list")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.options = res.data.data;
if (this.options.length > 0) {
this.selectedOption = this.options[0]?.id;
this.partBranchActivitiesStatistics();
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
partBranchActivitiesStatistics() {
http.get(`/sys-branch-star/partBranchActivitiesStatistics?branchId=${this.selectedOption}&year=${this.selectedYear}`)
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.barData = res.data.data;
this.standScores = this.barData?.standScores;
} else {
sweetAlert("后台异常", res.data?.msg, "error");
}
});
}
},
created() {
}
});
</script>
</body>
</html>
多Y轴柱状、折线图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>历年评分及星级统计</title>
<!-- Favicon icon -->
<link rel="stylesheet" href="../../static/css/bootstrap-select.min.css">
<link href="../../static/css/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../static/css/style.css">
<link rel="stylesheet" href="../../static/css/skin-2.css">
</head>
<body>
<!--*******************
Preloader start
********************-->
<div id="preloader">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
</div>
</div>
<!--*******************
Preloader end
********************-->
<!--**********************************
Main wrapper start
***********************************-->
<div id="main-wrapper">
<!-- row -->
<div class="container-fluid">
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4>统计分析管理</h4>
</div>
</div>
<div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="../../index.html">首页</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">统计分析管理</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">党支部活动统计</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">历年评分及星级统计</a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills mb-3">
<div class="col-12">
<div class="form-inline" style="margin-bottom: 20px;">
<label class="form-label" style="margin-right: 10px;">党支部选择：</label>
<select class="selected" v-model="selectedOption" @change="partBranchActivitiesStatistics()"
aria-label="Default select example">
<option v-for="option in options" :value="option.id">
{{ option.partybranchname }}
</option>
</select>
<!-- <label class="form-label" style="margin-left: 10px; margin-right: 10px;">查询年份：</label>-->
<!-- <select class="form-control" v-model="selectedYear"-->
<!-- @change="partBranchActivitiesStatistics()"-->
<!-- aria-label="Default select example">-->
<!-- <option v-for="year in yearList" :value="year">-->
<!-- {{ year }}-->
<!-- </option>-->
<!-- </select>-->
<script>
let element = document.getElementsByClassName('selected')[0];
element.style.appearance = 'none';
element.style.webkitAppearance = 'none';
element.style.mozAppearance = 'none';
element.style.backgroundColor = '#f5f5f5';
element.style.border = '1px solid #ccc';
element.style.padding = '8px';
element.style.fontFamily = 'Arial, sans-serif';
element.style.fontSize = '14px';
element.style.color = '#555';
</script>
</div>
</div>
</ul>
</div>
</div>
<div class="row">
<div ref="chart" id="main" style="width:100%;height: auto"></div>
</div>
</div>
</div>
<script src="../../static/js/sweetalert2.min.js"></script>
<!-- Required vendors -->
<script src="../../static/js/global.min.js"></script>
<!--<script src="../../static/js/bootstrap-select.min.js"></script>-->
<script src="../../static/js/custom.min.js"></script>
<script src="../../static/js/dlabnav-init.js"></script>
<!-- Svganimation scripts -->
<script src="../../static/js/vivus.min.js"></script>
<script src="../../static/js/svg.animation.js"></script>
<script src="../../static/js/vue.min.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/echarts.min.js"></script>
<script>
axios.defaults.withCredentials = true
const content = new Vue({
el: "#main-wrapper",
name: "ManagerAll",
data: {
chart: null,
barData: [],
selectedOption: null,
selectedYear: null,
options: [],
yearList: [],
},
watch: {
barData: {
handler() {
this.renderChart();
},
deep: true
}
},
mounted() {
this.getAbnormalList();
this.getYearList();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
async createChart() {
this.renderChart();
},
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
renderChart() {
const chart = echarts.init(document.getElementById('main'));
var years = this.barData.map(function (item) {
return item.year;
});
var stars = this.barData.map(function (item) {
return item.star;
});
var commentItems = this.barData.map(function (item) {
return item.commentitems;
});
var scores = this.barData.map(function (item) {
return item.score;
});
const option = {
title: {
text: '党支部活动统计',
subtext: '历年评分及星级统计',
left: 'center',
padding: [10, 0, 0, 20], // 上, 右, 下, 左
/* textStyle: {
fontWeight: 'normal',
color: 'MidnightBlue' // 标题颜色
} */
},
/* 提示框组件 */
tooltip: {
trigger: 'axis', // 触发类型，在饼形图中为item
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params, ticket, callback) { // 用formatter回调函数显示多项数据内容
var htmlStr = '';
for (var i = 0; i < params.length; i++) {
var param = params[i];
var xName = param.name; // x轴的名称
var seriesName = param.seriesName; // 图例名称
var value = param.value; // y轴值
var color = param.color; // 图例颜色
if (i === 0) {
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr += '<div>';
//为了保证和原来的效果一样，这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
// 圆点后面显示的文本
htmlStr += seriesName + '：' + value + '   ';
htmlStr += '</div>';
}
return htmlStr;
}
},
xAxis: {
type: 'category',
data: years
},
yAxis: [
{
type: 'category',
name: '星级',
data: ['一星级党支部', '二星级党支部', '三星级党支部', '四星级党支部', '五星级党支部']
// 可以在这里设置左侧y轴的其他属性
},
{
type: 'value',
name: '评委评分',
position: 'right',
// 在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效。
alignTicks: true,
},
{
type: 'value',
name: '自评总分',
position: 'right',
// 在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效。
alignTicks: true,
// Y 轴相对于默认位置的偏移，在相同的 position 上有多个 Y 轴的时候有用。
offset: 80
}
],
color: ['LawnGreen', 'DeepSkyBlue', 'HotPink'], // 图例及线条的颜色
/* 设置图例样式 */
legend: {
left: 'center', // 位置
padding: [60, 0, 30, 0],
data: ['星级', '评委评分', '自评总分']
},
grid: {
top: '20%',
bottom: '25%',
containLabel: true
},
series: [
{
name: '星级',
type: 'line',
barWidth: '10%',
yAxisIndex: 0, // 这里表示使用数组中的第一个（即左侧）y轴
data: stars
},
{
name: '评委评分',
type: 'bar',
yAxisIndex: 1, // 这里表示使用数组中的第二个（即右侧）y轴
data: commentItems
},
{
name: '自评总分',
type: 'bar',
yAxisIndex: 2, // 这里表示使用数组中的第三个（即右侧）y轴
data: scores
}
],
};
chart.setOption(option);
this.chart = chart;
},
/**
* 查询年份
*/
getYearList() {
http.get("/sys-message/yearList")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.yearList = res.data.data;
if (this.yearList.length > 0) {
console.log("year", this.yearList);
this.selectedYear = this.yearList[0];
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
/**
* 查询所有党支部信息操作
*/
getAbnormalList() {
http.get("/sys-branch/login_abnormal_list")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.options = res.data.data;
if (this.options.length > 0) {
this.selectedOption = this.options[0]?.id;
this.partBranchActivitiesStatistics();
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
partBranchActivitiesStatistics() {
http.get(`/sys-branch-star/partBranchActivitiesStatisticsBatch?branchId=${this.selectedOption}`)
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.barData = res.data.data || [];
} else {
sweetAlert("后台异常", res.data?.msg, "error");
}
});
}
},
created() {
}
});
</script>
</body>
</html>
雷达图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>活动偏好统计</title>
<!-- Favicon icon -->
<link rel="stylesheet" href="../../static/css/bootstrap-select.min.css">
<link href="../../static/css/sweetalert2.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../static/css/style.css">
<link rel="stylesheet" href="../../static/css/skin-2.css">
</head>
<body>
<!--*******************
Preloader start
********************-->
<div id="preloader">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
</div>
</div>
<!--*******************
Preloader end
********************-->
<!--**********************************
Main wrapper start
***********************************-->
<div id="main-wrapper">
<!-- row -->
<div class="container-fluid">
<div class="row page-titles mx-0">
<div class="col-sm-6 p-md-0">
<div class="welcome-text">
<h4>统计分析管理</h4>
</div>
</div>
<div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="../../index.html">首页</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">统计分析管理</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">党支部活动统计</a></li>
<li class="breadcrumb-item active"><a href="javascript:void(0);">活动偏好统计</a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills mb-3">
<div class="col-12">
<div class="form-inline" style="margin-bottom: 20px;">
<!-- <label class="form-label" style="margin-right: 10px;">党支部选择：</label>-->
<!-- <select class="selected" v-model="selectedOption" @change="partBranchActivitiesStatistics()"-->
<!-- aria-label="Default select example">-->
<!-- <option v-for="option in options" :value="option.id">-->
<!-- {{ option.partybranchname }}-->
<!-- </option>-->
<!-- </select>-->
<label class="form-label" style="margin-left: 10px; margin-right: 10px;">查询年份：</label>
<select class="form-control" v-model="selectedYear"
@change="partBranchActivitiesStatistics()"
aria-label="Default select example">
<option v-for="year in yearList" :value="year">
{{ year }}
</option>
</select>
<script>
let element = document.getElementsByClassName('selected')[0];
element.style.appearance = 'none';
element.style.webkitAppearance = 'none';
element.style.mozAppearance = 'none';
element.style.backgroundColor = '#f5f5f5';
element.style.border = '1px solid #ccc';
element.style.padding = '8px';
element.style.fontFamily = 'Arial, sans-serif';
element.style.fontSize = '14px';
element.style.color = '#555';
</script>
</div>
</div>
</ul>
</div>
</div>
<div class="row">
<div ref="chart" id="main" style="width:100%;height: auto"></div>
</div>
</div>
</div>
<script src="../../static/js/sweetalert2.min.js"></script>
<!-- Required vendors -->
<script src="../../static/js/global.min.js"></script>
<!--<script src="../../static/js/bootstrap-select.min.js"></script>-->
<script src="../../static/js/custom.min.js"></script>
<script src="../../static/js/dlabnav-init.js"></script>
<!-- Svganimation scripts -->
<script src="../../static/js/vivus.min.js"></script>
<script src="../../static/js/svg.animation.js"></script>
<script src="../../static/js/vue.min.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/echarts.min.js"></script>
<script>
axios.defaults.withCredentials = true
const content = new Vue({
el: "#main-wrapper",
name: "ManagerAll",
data: {
chart: null,
radarData: [],
selectedOption: null,
selectedYear: null,
options: [],
yearList: [],
standScores: []
},
watch: {
radarData: {
handler() {
this.renderChart();
},
deep: true
}
},
mounted() {
this.getAbnormalList();
this.getYearList();
window.addEventListener("resize", this.handleResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
},
methods: {
async createChart() {
this.renderChart();
},
handleResize() {
if (this.chart) {
this.chart.resize();
}
},
renderChart() {
const chart = echarts.init(document.getElementById('main'));
const processedData = this.radarData.map(entry => ({
value: entry.standScores.map(standScore => standScore.score),
name: entry.branchName
}));
console.log("processedData", processedData);
let option = {
title: {
text: '活动偏好统计',
left: 'center',
padding: [10, 0, 0, 20], // 上, 右, 下, 左
// top: '5%',
},
tooltip: {
trigger: 'item', // 设置触发类型为'item'
},
grid: {
top: '30%',
bottom: '25%',
height: "500px",
containLabel: true
},
legend: {
left: 'center', // 位置
padding: [40, 0, 30, 0],
// top: '10%',
data: this.radarData.map(entry => (entry.branchName))
},
radar: {
// shape: 'circle',
indicator: [
{ name: '主体作用发挥-30分', max: 30 },
{ name: '班子和制度建设-25分', max: 25 },
{ name: '发展党员工作-25分', max: 25 },
{ name: '党员教育管理监督服务和作用发挥-50分', max: 50 },
{ name: '党费收缴、使用与管理-10分', max: 10 },
{ name: '党内民主-10分', max: 10 }
]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: processedData
}
]
};
chart.setOption(option);
this.chart = chart;
},
/**
* 查询年份
*/
getYearList() {
http.get("/sys-message/yearList")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.yearList = res.data.data;
if (this.yearList.length > 0) {
console.log("year", this.yearList);
this.selectedYear = this.yearList[0];
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
/**
* 查询所有党支部信息操作
*/
getAbnormalList() {
http.get("/sys-branch/login_abnormal_list")
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.options = res.data.data;
if (this.options.length > 0) {
this.selectedOption = this.options[0]?.id;
this.partBranchActivitiesStatistics();
}
} else {
sweetAlert("后台异常", "服务器有问题，稍后访问", "error");
}
});
},
partBranchActivitiesStatistics() {
http.get(`/sys-branch-star/partBranchActivitiesStatisticsPower?year=${this.selectedYear}`)
.then(res => {
if (res.status === 200 && res.data.status === 200) {
this.radarData = res.data.data || [];
} else {
sweetAlert("后台异常", res.data?.msg, "error");
}
});
}
},
created() {
}
});
</script>
</body>
</html>
1115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
