|
|
@@ -1,14 +1,12 @@
|
|
|
<template>
|
|
|
<widget-card :bodyStyle="bodyStyle" ref="container">
|
|
|
- <template #header>年度报考考级人数</template>
|
|
|
+ <template #header>年度展演报名数</template>
|
|
|
<div ref="chart" class="chart" style="flex-grow:1"></div>
|
|
|
</widget-card>
|
|
|
</template>
|
|
|
<script>
|
|
|
import WidgetCard from '@/widgets/WidgetCard';
|
|
|
import * as echarts from 'echarts';
|
|
|
-import widget from '@/mixins/widget';
|
|
|
-import { th } from 'date-fns/locale';
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
@@ -18,213 +16,179 @@ export default {
|
|
|
display: 'flex'
|
|
|
},
|
|
|
list: [],
|
|
|
- seriesPar: [],
|
|
|
last2020: {
|
|
|
year: 2020,
|
|
|
programmeNum: [
|
|
|
- { name: '戏曲戏剧', num: 100 },
|
|
|
{ name: '音乐', num: 967 },
|
|
|
+ { name: '舞蹈', num: 124 },
|
|
|
{ name: '美术', num: 875 },
|
|
|
- { name: '舞蹈', num: 124 }
|
|
|
+ { name: '戏曲戏剧', num: 100 },
|
|
|
+ { name: '曲艺', num: 0 }
|
|
|
],
|
|
|
participantNum: [
|
|
|
- { name: '戏曲戏剧', num: 435 },
|
|
|
{ name: '音乐', num: 1198 },
|
|
|
+ { name: '舞蹈', num: 345 },
|
|
|
{ name: '美术', num: 875 },
|
|
|
- { name: '舞蹈', num: 345 }
|
|
|
+ { name: '戏曲戏剧', num: 435 },
|
|
|
+ { name: '曲艺', num: 0 }
|
|
|
]
|
|
|
- }
|
|
|
+ },
|
|
|
+ values: []
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- let names = [];
|
|
|
- let xAxisData = [];
|
|
|
- let music = [];
|
|
|
- let dance = [];
|
|
|
- let art = [];
|
|
|
- let operaDrama = [];
|
|
|
- let folkArt = [];
|
|
|
- let music1 = [];
|
|
|
- let dance1 = [];
|
|
|
- let art1 = [];
|
|
|
- let operaDrama1 = [];
|
|
|
- let folkArt1 = [];
|
|
|
- var emphasisStyle = {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowColor: 'rgba(0,0,0,0.3)'
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- this.$http.get('/report/performanceStatistics').then(res => {
|
|
|
- // this.list = res;
|
|
|
- this.list.push(this.last2020);
|
|
|
- res.forEach(item => {
|
|
|
- this.list.push(item);
|
|
|
- });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$http
|
|
|
+ .get('/report/performanceStatistics')
|
|
|
+ .then(res => {
|
|
|
+ this.list.push(this.last2020);
|
|
|
+ res.forEach(item => {
|
|
|
+ this.list.push(item);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.setChart();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setChart() {
|
|
|
+ let seriesMap = new Map();
|
|
|
+ let names = [];
|
|
|
+ let xAxisData = [];
|
|
|
+ var emphasisStyle = {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: 'rgba(0,0,0,0.3)'
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
for (let i = 0; i < this.list.length; i++) {
|
|
|
xAxisData.push(this.list[i].year);
|
|
|
let programmeNum = this.list[i].programmeNum;
|
|
|
- for (let j = 0; j < programmeNum.length; j++) {
|
|
|
- names.push(programmeNum[j].name);
|
|
|
- if (programmeNum[j].name == '音乐') {
|
|
|
- music.push(programmeNum[j].num);
|
|
|
- } else if (programmeNum[j].name == '舞蹈') {
|
|
|
- dance.push(programmeNum[j].num);
|
|
|
- } else if (programmeNum[j].name == '美术') {
|
|
|
- art.push(programmeNum[j].num);
|
|
|
- } else if (programmeNum[j].name == '戏曲戏剧') {
|
|
|
- operaDrama.push(programmeNum[j].num);
|
|
|
- } else {
|
|
|
- folkArt.push(programmeNum[j].num);
|
|
|
- }
|
|
|
- }
|
|
|
- let participantNum = this.list[i].participantNum;
|
|
|
- for (let j = 0; j < participantNum.length; j++) {
|
|
|
- names.push(participantNum[j].name);
|
|
|
- if (participantNum[j].name == '音乐') {
|
|
|
- music1.push(participantNum[j].num);
|
|
|
- } else if (participantNum[j].name == '舞蹈') {
|
|
|
- dance1.push(participantNum[j].num);
|
|
|
- } else if (participantNum[j].name == '美术') {
|
|
|
- art1.push(participantNum[j].num);
|
|
|
- } else if (participantNum[j].name == '戏曲戏剧') {
|
|
|
- operaDrama1.push(participantNum[j].num);
|
|
|
+ programmeNum.forEach(item => {
|
|
|
+ let key = 'pro' + item.name;
|
|
|
+ if (seriesMap.has(key)) {
|
|
|
+ seriesMap.get(key).data.push(item.num);
|
|
|
} else {
|
|
|
- folkArt1.push(participantNum[j].num);
|
|
|
- }
|
|
|
- }
|
|
|
- // participantNum.forEach(item => {
|
|
|
- // this.seriesPar.push({
|
|
|
- // name: item.name,
|
|
|
- // type: 'bar',
|
|
|
- // stack: 'two',
|
|
|
- // emphasis: emphasisStyle,
|
|
|
- // data: [item.num]
|
|
|
- // });
|
|
|
- // });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.$nextTick(() => {
|
|
|
- var chartDom = this.$refs.chart;
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
- console.log(this.seriesPar);
|
|
|
- var option;
|
|
|
- option = {
|
|
|
- legend: {
|
|
|
- data: names,
|
|
|
- left: '10%'
|
|
|
- },
|
|
|
- brush: {
|
|
|
- // toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
|
|
|
- // xAxisIndex: 0
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {
|
|
|
- magicType: {
|
|
|
- type: ['stack']
|
|
|
- },
|
|
|
- dataView: {}
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {},
|
|
|
- xAxis: {
|
|
|
- data: xAxisData,
|
|
|
- name: '年份',
|
|
|
- axisLine: { onZero: true },
|
|
|
- splitLine: { show: false },
|
|
|
- splitArea: { show: false }
|
|
|
- },
|
|
|
- yAxis: {},
|
|
|
- grid: {
|
|
|
- bottom: 20
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '音乐',
|
|
|
+ seriesMap.set(key, {
|
|
|
+ name: item.name,
|
|
|
type: 'bar',
|
|
|
stack: 'one',
|
|
|
emphasis: emphasisStyle,
|
|
|
- data: music
|
|
|
- },
|
|
|
- {
|
|
|
- name: '舞蹈',
|
|
|
- type: 'bar',
|
|
|
- stack: 'one',
|
|
|
- emphasis: emphasisStyle,
|
|
|
- data: dance
|
|
|
- },
|
|
|
- {
|
|
|
- name: '美术',
|
|
|
- type: 'bar',
|
|
|
- stack: 'one',
|
|
|
- emphasis: emphasisStyle,
|
|
|
- data: art
|
|
|
- },
|
|
|
- {
|
|
|
- name: '戏曲戏剧',
|
|
|
- type: 'bar',
|
|
|
- stack: 'one',
|
|
|
- emphasis: emphasisStyle,
|
|
|
- data: operaDrama
|
|
|
- },
|
|
|
- {
|
|
|
- name: '曲艺',
|
|
|
- type: 'bar',
|
|
|
- stack: 'one',
|
|
|
- emphasis: emphasisStyle,
|
|
|
- data: folkArt
|
|
|
- },
|
|
|
- {
|
|
|
- name: '音乐',
|
|
|
- type: 'bar',
|
|
|
- stack: 'two',
|
|
|
- emphasis: emphasisStyle,
|
|
|
- data: music1
|
|
|
- },
|
|
|
- {
|
|
|
- name: '舞蹈',
|
|
|
- type: 'bar',
|
|
|
- stack: 'two',
|
|
|
- emphasis: emphasisStyle,
|
|
|
- data: dance1
|
|
|
- },
|
|
|
- {
|
|
|
- name: '美术',
|
|
|
- type: 'bar',
|
|
|
- stack: 'two',
|
|
|
- emphasis: emphasisStyle,
|
|
|
- data: art1
|
|
|
- },
|
|
|
- {
|
|
|
- name: '戏曲戏剧',
|
|
|
+ data: [item.num]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let participantNum = this.list[i].participantNum;
|
|
|
+ participantNum.forEach(item => {
|
|
|
+ let key = 'par' + item.name;
|
|
|
+ if (seriesMap.has(key)) {
|
|
|
+ seriesMap.get(key).data.push(item.num);
|
|
|
+ } else {
|
|
|
+ seriesMap.set(key, {
|
|
|
+ name: item.name,
|
|
|
type: 'bar',
|
|
|
stack: 'two',
|
|
|
emphasis: emphasisStyle,
|
|
|
- data: operaDrama1
|
|
|
+ data: [item.num]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ let info = Object.fromEntries(seriesMap.entries());
|
|
|
+ this.values = Object.keys(info).map(item => {
|
|
|
+ return {
|
|
|
+ ...info[item]
|
|
|
+ };
|
|
|
+ });
|
|
|
+
|
|
|
+ var chartDom = this.$refs.chart;
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+ option = {
|
|
|
+ legend: {
|
|
|
+ data: names,
|
|
|
+ left: '10%'
|
|
|
+ },
|
|
|
+ brush: {
|
|
|
+ // toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
|
|
|
+ // xAxisIndex: 0
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ magicType: {
|
|
|
+ type: ['stack']
|
|
|
},
|
|
|
- {
|
|
|
- name: '曲艺',
|
|
|
- type: 'bar',
|
|
|
- stack: 'two',
|
|
|
- emphasis: emphasisStyle,
|
|
|
- data: folkArt1
|
|
|
+ dataView: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
|
+ },
|
|
|
+ formatter: function(params) {
|
|
|
+ //自定义划过显示样式
|
|
|
+ var str = '';
|
|
|
+ for (var i = 0; i < params.length; i++) {
|
|
|
+ // console.log(params);
|
|
|
+ if (i == 0) {
|
|
|
+ str += '<br/>' + '节目数量';
|
|
|
+ str +=
|
|
|
+ '<div style="width:140px;border-top:1px solid #ccc;margin-top:4px;">' +
|
|
|
+ params[i].marker +
|
|
|
+ params[i].seriesName +
|
|
|
+ ':' +
|
|
|
+ params[i].value +
|
|
|
+ '</div >';
|
|
|
+ } else if (i == 5) {
|
|
|
+ str += '报名人数';
|
|
|
+ str +=
|
|
|
+ '<div style="width:140px;border-top:1px solid #ccc;margin-top:4px;">' +
|
|
|
+ params[i].marker +
|
|
|
+ params[i].seriesName +
|
|
|
+ ':' +
|
|
|
+ params[i].value +
|
|
|
+ '</div >';
|
|
|
+ } else {
|
|
|
+ str +=
|
|
|
+ '<div style="width:140px;">' +
|
|
|
+ params[i].marker +
|
|
|
+ params[i].seriesName +
|
|
|
+ ':' +
|
|
|
+ params[i].value +
|
|
|
+ '</div >';
|
|
|
+ }
|
|
|
}
|
|
|
- ]
|
|
|
- };
|
|
|
+ var tooltipHtml =
|
|
|
+ '<div style="width:140px;overflow-y:auto;">' + params[0].axisValue + '年' + str + '</div>';
|
|
|
+ return tooltipHtml;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: xAxisData,
|
|
|
+ name: '年份',
|
|
|
+ axisLine: { onZero: true },
|
|
|
+ splitLine: { show: false },
|
|
|
+ splitArea: { show: false }
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ grid: {
|
|
|
+ bottom: 20
|
|
|
+ },
|
|
|
+ series: this.values
|
|
|
+ };
|
|
|
|
|
|
- option && myChart.setOption(option);
|
|
|
- });
|
|
|
- }, 500);
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ }
|
|
|
},
|
|
|
components: {
|
|
|
WidgetCard
|
|
|
- },
|
|
|
- mixins: [widget]
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped></style>
|