添加柱状图点击事件
This commit is contained in:
parent
0e736b3217
commit
4f2001c9d4
|
|
@ -24,7 +24,15 @@
|
||||||
</template>
|
</template>
|
||||||
<a-row :gutter="24">
|
<a-row :gutter="24">
|
||||||
<a-col :xl="24" :style="{ marginBottom: '24px' }">
|
<a-col :xl="24" :style="{ marginBottom: '24px' }">
|
||||||
<div class="container">
|
<div class="container" >
|
||||||
|
<div id="span" >
|
||||||
|
<div style="display: flex; justify-content: center; align-items: center">
|
||||||
|
<span style="font-size: 18px" >点击柱状图可查看该学院  </span>
|
||||||
|
<span style="font-size: 18px; color: red">各年级四级通过率</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <span style=" font-size: 18px;">  变化</span> -->
|
||||||
|
</div>
|
||||||
<div id="map1" style="width: 100%; height: 600px"></div>
|
<div id="map1" style="width: 100%; height: 600px"></div>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
|
@ -60,6 +68,7 @@ export default {
|
||||||
collegetab2: [],
|
collegetab2: [],
|
||||||
collegeMajorOptions: [],
|
collegeMajorOptions: [],
|
||||||
collegeMajor: [],
|
collegeMajor: [],
|
||||||
|
|
||||||
Url: {
|
Url: {
|
||||||
getBatch: '/cet/getBatch',
|
getBatch: '/cet/getBatch',
|
||||||
getEntrydate: '/cet/getEntrydate',
|
getEntrydate: '/cet/getEntrydate',
|
||||||
|
|
@ -97,26 +106,6 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onMajorChange(value) {
|
|
||||||
console.log(value, 'value');
|
|
||||||
let length = value.length;
|
|
||||||
//遍历value,与this.collegeMajorOptions比较，如果value中的数据在this.collegeMajorOptions中则获得他的children长度
|
|
||||||
for (let i = 0; i < value.length; i++) {
|
|
||||||
for (let j = 0; j < this.collegeMajorOptions.length; j++) {
|
|
||||||
if (value[i] == this.collegeMajorOptions[j].value) {
|
|
||||||
length += this.collegeMajorOptions[j].children.length;
|
|
||||||
length -= 1;
|
|
||||||
}
|
|
||||||
if (length > 5) {
|
|
||||||
message.error('最多选择五个专业');
|
|
||||||
//删除value最后一个数据
|
|
||||||
value.pop();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log(length, 'length');
|
|
||||||
},
|
|
||||||
allQuery() {
|
allQuery() {
|
||||||
this.tab1loading = true;
|
this.tab1loading = true;
|
||||||
let college = ['全校'];
|
let college = ['全校'];
|
||||||
|
|
@ -127,12 +116,11 @@ export default {
|
||||||
this.query(query, college, [this.oneentrydate]);
|
this.query(query, college, [this.oneentrydate]);
|
||||||
},
|
},
|
||||||
async majorQuery() {
|
async majorQuery() {
|
||||||
|
|
||||||
if (this.majorentrydate.length == 0) {
|
if (this.majorentrydate.length == 0) {
|
||||||
message.error('请选择年级');
|
message.error('请选择年级');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (this.collegeMajor.length == 0||this.collegeMajor==null) {
|
if (this.collegeMajor.length == 0 || this.collegeMajor == null) {
|
||||||
message.error('请选择学院');
|
message.error('请选择学院');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -157,44 +145,6 @@ export default {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
collegeQuery() {
|
|
||||||
if (this.collegeentrydate.length == 0) {
|
|
||||||
message.error('请选择年级');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.collegetab2.length == 0) {
|
|
||||||
message.error('请选择学院');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.tab2loading = true;
|
|
||||||
let query = 'tab2';
|
|
||||||
this.query(query, this.collegetab2, this.collegeentrydate);
|
|
||||||
},
|
|
||||||
test(value) {
|
|
||||||
console.log(this.collegeMajor);
|
|
||||||
console.log(value);
|
|
||||||
},
|
|
||||||
//选择全校
|
|
||||||
checkAll(e) {
|
|
||||||
this.college = ['全校'];
|
|
||||||
this.showGroup = !this.showGroup;
|
|
||||||
},
|
|
||||||
|
|
||||||
//选择学院
|
|
||||||
checkOne(e) {
|
|
||||||
console.log(e);
|
|
||||||
this.college = e;
|
|
||||||
this.showBox = true;
|
|
||||||
if (e.length == 0) {
|
|
||||||
this.showBox = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//选择年级
|
|
||||||
checkoneentrydate(e) {
|
|
||||||
console.log(e.target.value, 'e');
|
|
||||||
this.entrydate = [e.target.value];
|
|
||||||
},
|
|
||||||
|
|
||||||
//获取学院专业级联数据
|
//获取学院专业级联数据
|
||||||
async getCollegeMajorData() {
|
async getCollegeMajorData() {
|
||||||
|
|
@ -234,309 +184,6 @@ export default {
|
||||||
console.log(this.collegeOptions, 'collegeOptions');
|
console.log(this.collegeOptions, 'collegeOptions');
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onMajorEntrydateChange(value) {
|
|
||||||
console.log(value, 'value');
|
|
||||||
if (value.length > 5) {
|
|
||||||
//找到value中不在this.lastMajorEntrydate中的数据
|
|
||||||
for (let i = 0; i < value.length; i++) {
|
|
||||||
if (!this.lastMajorEntrydate.includes(value[i])) {
|
|
||||||
message.error('最多选择五个');
|
|
||||||
//删除value[i]
|
|
||||||
value.splice(i, 1);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.lastMajorEntrydate = value;
|
|
||||||
},
|
|
||||||
//学院对比 学院选项回调函数
|
|
||||||
onCollegeChange(value) {
|
|
||||||
console.log(value, 'value');
|
|
||||||
if (value.length > 5) {
|
|
||||||
message.error('最多选择五个');
|
|
||||||
//和lastCollege比较，如果value中的数据不在lastCollege中则删除
|
|
||||||
for (let i = 0; i < value.length; i++) {
|
|
||||||
if (!this.lastCollege.includes(value[i])) {
|
|
||||||
value.splice(i, 1);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.lastCollege = value;
|
|
||||||
},
|
|
||||||
//学院对比 年级选项回调函数
|
|
||||||
onCollegeEntrydateChange(value) {
|
|
||||||
console.log(value, 'value');
|
|
||||||
if (value.length > 5) {
|
|
||||||
message.error('最多选择五个');
|
|
||||||
//和lastCollegeEntrydate比较，如果value中的数据不在lastCollegeEntrydate中则删除
|
|
||||||
for (let i = 0; i < value.length; i++) {
|
|
||||||
if (!this.lastCollegeEntrydate.includes(value[i])) {
|
|
||||||
value.splice(i, 1);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.lastCollegeEntrydate = value;
|
|
||||||
},
|
|
||||||
//专业选项回调函数
|
|
||||||
onCollegeMajorChange(value) {
|
|
||||||
//将value中的数据与this.lastCollegeMajor比较，如果value中的有this.lastCollegeMajor中没有的数据则添加,反之寻找在this.majorOptions中并且在this.lastCollegeMajor中但是不在value中的数据删除
|
|
||||||
for (let i = 0; i < value.length; i++) {
|
|
||||||
if (!this.lastCollegeMajor.map((item) => item[1]).includes(value[i])) {
|
|
||||||
if (this.majorLength == 5) {
|
|
||||||
message.error('最多选择五个');
|
|
||||||
//从value中删除value[i]
|
|
||||||
value.splice(i, 1);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.lastCollegeMajor.push([this.collegeMajor, value[i]]);
|
|
||||||
this.majorLength++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (let i = 0; i < this.lastCollegeMajor.length; i++) {
|
|
||||||
if (!value.includes(this.lastCollegeMajor[i][1])) {
|
|
||||||
//查看该数据是都在this.majorOptions中
|
|
||||||
if (this.majorOptions.find((item) => item.value == this.lastCollegeMajor[i][1])) {
|
|
||||||
this.lastCollegeMajor.splice(i, 1);
|
|
||||||
console.log('splice');
|
|
||||||
this.majorLength--;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log(value, 'value');
|
|
||||||
},
|
|
||||||
removeTag(index) {
|
|
||||||
if (this.majorCheckOn.includes(this.lastCollegeMajor[index][1])) {
|
|
||||||
let index1 = this.majorCheckOn.indexOf(this.lastCollegeMajor[index][1]);
|
|
||||||
this.majorCheckOn.splice(index1, 1);
|
|
||||||
}
|
|
||||||
this.lastCollegeMajor.splice(index, 1);
|
|
||||||
this.majorLength--;
|
|
||||||
},
|
|
||||||
//学院选项回调函数
|
|
||||||
onMajorCollegeChange(value) {
|
|
||||||
let val = value.target.value;
|
|
||||||
console.log(val, 'value');
|
|
||||||
console.log(this.collegeMajorOptions.find((item) => item.value == val).children, 'majorOptions');
|
|
||||||
this.majorOptions = this.collegeMajorOptions.find((item) => item.value == val).children;
|
|
||||||
//将this.majorCheckOn中的数据与this.lastCollegeMajor比较，如果this.lastCollegeMajor中有this.majorCheckOn中没有的数据则删除,反之添加
|
|
||||||
// for (let i = 0; i < this.majorCheckOn.length; i++) {
|
|
||||||
// if (!this.lastCollegeMajor.includes(this.majorCheckOn[i])) {
|
|
||||||
// this.lastCollegeMajor.push(this.majorCheckOn[i]);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// for (let i = 0; i < this.lastCollegeMajor.length; i++) {
|
|
||||||
// if (!this.majorCheckOn.includes(this.lastCollegeMajor[i])) {
|
|
||||||
// this.lastCollegeMajor.splice(i, 1);
|
|
||||||
// console.log("splice")
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// this.lastCollegeMajor = this.majorCheckOn;
|
|
||||||
console.log(this.lastCollegeMajor, 'lastCollegeMajor');
|
|
||||||
this.majorCheckOn = this.lastCollegeMajor.map((item) => item[1]);
|
|
||||||
console.log(this.majorCheckOn, 'majorCheckOn');
|
|
||||||
},
|
|
||||||
|
|
||||||
clearMajor() {
|
|
||||||
this.majorCheckOn = [];
|
|
||||||
this.lastCollegeMajor = [];
|
|
||||||
this.majorLength = 0;
|
|
||||||
},
|
|
||||||
clearCollege() {
|
|
||||||
this.collegetab2 = [];
|
|
||||||
this.collegeentrydate = [];
|
|
||||||
this.lastCollege = [];
|
|
||||||
this.lastCollegeEntrydate = [];
|
|
||||||
},
|
|
||||||
//tab2\3图标
|
|
||||||
drawChart(data, tab) {
|
|
||||||
let seriesData = [];
|
|
||||||
|
|
||||||
let xData = this.majorentrydate.sort((a, b) => a - b);
|
|
||||||
if (tab == 'tab2') {
|
|
||||||
xData = this.collegeentrydate.sort((a, b) => a - b);
|
|
||||||
}
|
|
||||||
let k = 0;
|
|
||||||
let legendData = [];
|
|
||||||
let colors = [
|
|
||||||
'#5370c5',
|
|
||||||
'#91CC75',
|
|
||||||
'#fac858',
|
|
||||||
'#ee6666',
|
|
||||||
'#73c0de',
|
|
||||||
'#FF6A6A',
|
|
||||||
'#FFA500',
|
|
||||||
'#EE2C2C',
|
|
||||||
'#90EE90',
|
|
||||||
'#008B8B',
|
|
||||||
'#FFC0CB',
|
|
||||||
'#FFDAB9',
|
|
||||||
'#FFDEAD',
|
|
||||||
'#FFE4B5',
|
|
||||||
'#FFE4C4',
|
|
||||||
'#FFE4E1',
|
|
||||||
'#FFEBCD',
|
|
||||||
'#FFEFD5',
|
|
||||||
'#FFFAF0',
|
|
||||||
'#FFFAFA',
|
|
||||||
'#FFFFE0',
|
|
||||||
'#FFFFF0',
|
|
||||||
'#FFFFFF',
|
|
||||||
'#F0F8FF',
|
|
||||||
'#FAEBD7',
|
|
||||||
'#FAF0E6',
|
|
||||||
'#FAFAD2',
|
|
||||||
'#F5FFFA',
|
|
||||||
'#F8F8FF',
|
|
||||||
'#F0FFF0',
|
|
||||||
'#F0FFFF',
|
|
||||||
'#F0E68C',
|
|
||||||
'#F0F8FF',
|
|
||||||
'#F0FFF0',
|
|
||||||
'#F0FFFF',
|
|
||||||
'#F4A460',
|
|
||||||
'#F5DEB3',
|
|
||||||
'#F5F5DC',
|
|
||||||
'#F5F5F5',
|
|
||||||
'#F5FFFA',
|
|
||||||
'#F8F8FF',
|
|
||||||
'#F9EBEA',
|
|
||||||
'#FAD7A0',
|
|
||||||
'#FAF0E6',
|
|
||||||
'#FAFAD2',
|
|
||||||
'#FAF0E6 ',
|
|
||||||
];
|
|
||||||
let isJK = false;
|
|
||||||
for (let i in data) {
|
|
||||||
console.log(i, 'i');
|
|
||||||
legendData.push(i);
|
|
||||||
let yData = [];
|
|
||||||
// legendData=[];
|
|
||||||
console.log(data[i], 'data[i]');
|
|
||||||
|
|
||||||
for (let j in data[i]) {
|
|
||||||
console.log(data[i][j].college, 'data[i][j].college111');
|
|
||||||
// if(data[i][j].college == ''){
|
|
||||||
yData.push(data[i][j].passRate);
|
|
||||||
// legendData.push(data[i][j].college);
|
|
||||||
}
|
|
||||||
console.log(yData, 'yData');
|
|
||||||
seriesData.push({
|
|
||||||
name: i,
|
|
||||||
type: 'bar',
|
|
||||||
//设置柱状图大小
|
|
||||||
barWidth: 25,
|
|
||||||
data: yData,
|
|
||||||
//柱子间距
|
|
||||||
barGap: '30%',
|
|
||||||
//颜色
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
label: {
|
|
||||||
show: true, //开启显示
|
|
||||||
position: 'top', //在上方显示
|
|
||||||
formatter: '{c}%',
|
|
||||||
textStyle: {
|
|
||||||
//数值样式
|
|
||||||
color: 'black',
|
|
||||||
fontSize: 13,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
color: colors[k++],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
console.log(legendData, 'legendData');
|
|
||||||
console.log(seriesData, 'dasaaseriresdata');
|
|
||||||
// debugger
|
|
||||||
let myChart = null;
|
|
||||||
console.log(tab, 'tab');
|
|
||||||
if (tab == 'tab2') {
|
|
||||||
myChart = document.getElementById('map2');
|
|
||||||
if (myChart) {
|
|
||||||
myChart = echarts.getInstanceByDom(myChart);
|
|
||||||
if (myChart) {
|
|
||||||
myChart.dispose();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
myChart = echarts.init(document.getElementById('map2'));
|
|
||||||
} else if (tab == 'tab3') {
|
|
||||||
myChart = document.getElementById('map3');
|
|
||||||
if (myChart) {
|
|
||||||
myChart = echarts.getInstanceByDom(myChart);
|
|
||||||
if (myChart) {
|
|
||||||
myChart.dispose();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
myChart = echarts.init(document.getElementById('map3'));
|
|
||||||
}
|
|
||||||
// 指定图表的配置项和数据
|
|
||||||
let option = {
|
|
||||||
title: {
|
|
||||||
text: '本批次学院四级通过率排名',
|
|
||||||
},
|
|
||||||
legend: {},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
},
|
|
||||||
formatter: function (params) {
|
|
||||||
//生成tooltip,加上小圆球
|
|
||||||
let result = params[0].name + '级通过率<br>';
|
|
||||||
for (let i = 0; i < params.length; i++) {
|
|
||||||
result += params[i].marker + legendData[i] + ' : ' + params[i].value + '%' + '<br>';
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
toolbox: {
|
|
||||||
show: true,
|
|
||||||
feature: {
|
|
||||||
magicType: { show: true, type: ['line', 'bar'] },
|
|
||||||
restore: { show: true },
|
|
||||||
saveAsImage: { show: true },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
data: xData,
|
|
||||||
axisLabel: {
|
|
||||||
interval: 0, //代表显示所有x轴标签显示
|
|
||||||
rotate: 0, //代表倾斜0度显示
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
name: '通过率',
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value} %',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: seriesData,
|
|
||||||
};
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
console.log(option, 'option');
|
|
||||||
console.log(myChart, 'myChart');
|
|
||||||
setTimeout(() => {
|
|
||||||
myChart.setOption(option);
|
|
||||||
}, 1);
|
|
||||||
},
|
|
||||||
|
|
||||||
dataChart(data, tab) {
|
dataChart(data, tab) {
|
||||||
let seriesData = [];
|
let seriesData = [];
|
||||||
let xData = [];
|
let xData = [];
|
||||||
|
|
@ -664,12 +311,8 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let myChart = null;
|
let myChart = null;
|
||||||
if (tab == 'tab2') {
|
if (tab == 'tab1') {
|
||||||
myChart = echarts.init(document.getElementById('map2'));
|
|
||||||
} else if (tab == 'tab1') {
|
|
||||||
myChart = echarts.init(document.getElementById('map1'));
|
myChart = echarts.init(document.getElementById('map1'));
|
||||||
} else if (tab == 'tab3') {
|
|
||||||
myChart = echarts.init(document.getElementById('map3'));
|
|
||||||
}
|
}
|
||||||
// 指定图表的配置项和数据
|
// 指定图表的配置项和数据
|
||||||
// const college1 = this.college;
|
// const college1 = this.college;
|
||||||
|
|
@ -792,9 +435,128 @@ export default {
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
myChart.setOption(option, true);
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.on('click', async (params) => {
|
||||||
|
let name = params.name;
|
||||||
|
//将name的换行符去掉
|
||||||
|
name = name.replace(/\n/g, '');
|
||||||
|
console.log(
|
||||||
|
this.collegeOptions.map((item) => item.value),
|
||||||
|
'collegeOptions'
|
||||||
|
);
|
||||||
|
console.log(name, 'params');
|
||||||
|
console.log(this.collegeOptions.map((item) => item.value).includes(name), 'bool');
|
||||||
|
if (params != null && params != undefined && params.name != '' && this.collegeOptions.map((item) => item.value).includes(name)) {
|
||||||
|
console.log(params, 'params');
|
||||||
|
let entrydate = this.entrydateOptions.map((item) => item.value);
|
||||||
|
let queryParams = {
|
||||||
|
college: [name],
|
||||||
|
entrydate: entrydate,
|
||||||
|
level: 'cet4',
|
||||||
|
};
|
||||||
|
let url = this.Url.getCollegeRate;
|
||||||
|
console.log(queryParams, 'queryParams');
|
||||||
|
let result = await defHttp.post({ url: url, data: queryParams });
|
||||||
|
|
||||||
myChart.setOption(option);
|
console.log(myChart, 'mychart');
|
||||||
|
if (!result) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log(result.data, 'result');
|
||||||
|
result = result.data[name];
|
||||||
|
let collegeOption = {
|
||||||
|
title: {
|
||||||
|
text: name + '四级通过率',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: result.map((item) => item.entrydate),
|
||||||
|
},
|
||||||
|
//显示数据
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
formatter: function (params) {
|
||||||
|
//生成tooltip,加上小圆球
|
||||||
|
let result = params[0].name + '<br>';
|
||||||
|
for (let i = 0; i < params.length; i++) {
|
||||||
|
result += params[i].marker + name + ' : ' + params[i].value + '%' + '<br>';
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
type: 'line',
|
||||||
|
data: result.map((item) => item.passRate),
|
||||||
|
label: {
|
||||||
|
show: true, // 开启标签显示
|
||||||
|
position: 'top', // 设置标签显示的位置为上方
|
||||||
|
formatter: function (params) {
|
||||||
|
// 在标签文本后面添加百分号
|
||||||
|
return params.value + '%';
|
||||||
|
},
|
||||||
|
// 你可以设置其他的标签样式选项，如颜色、字体大小等
|
||||||
|
},
|
||||||
|
universalTransition: {
|
||||||
|
// enabled: true,
|
||||||
|
// divideShape: 'clone',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
|
||||||
|
animationDurationUpdate: 500,
|
||||||
|
graphic: [
|
||||||
|
{
|
||||||
|
type: 'rect',
|
||||||
|
left: 20,
|
||||||
|
top: 40,
|
||||||
|
z: 1, // 确保矩形在文本下方
|
||||||
|
shape: {
|
||||||
|
width: 70, // 矩形的宽度
|
||||||
|
height: 35, // 矩形的高度
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: 'rgba(24, 144, 255)', // 矩形的填充色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
left: 38,
|
||||||
|
top: 50,
|
||||||
|
z: 2, // 确保文本在矩形上方
|
||||||
|
style: {
|
||||||
|
text: '返 回',
|
||||||
|
fontSize: 15,
|
||||||
|
fill: 'white', // 设置文本颜色为白色
|
||||||
|
},
|
||||||
|
onclick: function () {
|
||||||
|
|
||||||
|
myChart.setOption(option, true);
|
||||||
|
let spanElement = document.getElementById('span');
|
||||||
|
|
||||||
|
// 隐藏 span 元素
|
||||||
|
spanElement.style.display = 'block';
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
console.log(collegeOption, 'collegeOption');
|
||||||
|
|
||||||
|
let spanElement = document.getElementById('span');
|
||||||
|
|
||||||
|
// 隐藏 span 元素
|
||||||
|
spanElement.style.display = 'none';
|
||||||
|
|
||||||
|
myChart.setOption(collegeOption, true);
|
||||||
|
console.log(myChart, 'mychart');
|
||||||
|
// this.college = [params];
|
||||||
|
|
||||||
|
// this.query(tab, this.college, this.entrydate);
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
// 获取批次数据
|
// 获取批次数据
|
||||||
async getBatch() {
|
async getBatch() {
|
||||||
|
|
@ -846,8 +608,6 @@ export default {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (query == 'tab1') {
|
if (query == 'tab1') {
|
||||||
this.dataChart(result.data, query);
|
this.dataChart(result.data, query);
|
||||||
} else if (query == 'tab2') {
|
|
||||||
this.drawChart(result.data, query);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -865,7 +625,7 @@ export default {
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
// display: flex;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue