左下角进度数据tooltips,左侧中间数据更改
This commit is contained in:
parent
0f3e5d2182
commit
f2faa9560f
|
@ -8,10 +8,10 @@
|
||||||
<script setup lang="ts" name="chart">
|
<script setup lang="ts" name="chart">
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
const myChart = ref(null)
|
const myChart: any = ref(null)
|
||||||
const chartMax = ref(null)
|
const chartMax: any = ref(0)
|
||||||
const chartValues = ref(null)
|
const chartValues: any = ref(0)
|
||||||
const chartRate = ref(null)
|
const chartRate: any = ref(0)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// window.addEventListener('resize',()=>{this.resize();getRem(1920,100)})
|
// window.addEventListener('resize',()=>{this.resize();getRem(1920,100)})
|
||||||
|
@ -26,8 +26,8 @@ onBeforeUnmount(() => {
|
||||||
const resize = () => {
|
const resize = () => {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
}
|
}
|
||||||
const init = (max, value) => {
|
const init = (max: any, value: any) => {
|
||||||
chartMax.value = max ? max : 100;
|
chartMax.value = max ? max : 0;
|
||||||
chartValues.value = value ? value : 0;
|
chartValues.value = value ? value : 0;
|
||||||
chartRate.value = 0
|
chartRate.value = 0
|
||||||
if (chartMax && chartValues) {
|
if (chartMax && chartValues) {
|
||||||
|
@ -36,11 +36,12 @@ const init = (max, value) => {
|
||||||
if (chartRate.value === "100.0") {
|
if (chartRate.value === "100.0") {
|
||||||
chartRate.value = "100"; // 如果百分比等于100,则更新为整数形式
|
chartRate.value = "100"; // 如果百分比等于100,则更新为整数形式
|
||||||
}
|
}
|
||||||
|
|
||||||
let option = {
|
let option = {
|
||||||
title: {
|
title: {
|
||||||
text: (chartRate.value || '0.0') + '%',
|
text: (chartRate.value || '0.0') + '%',
|
||||||
x: 'center',
|
x: 'center',
|
||||||
y: '20%',
|
y: '25%',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: '18',
|
fontSize: '18',
|
||||||
|
@ -49,7 +50,7 @@ const init = (max, value) => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
angleAxis: {
|
angleAxis: {
|
||||||
axisLine: {
|
axisLine: {
|
||||||
|
@ -83,14 +84,14 @@ const init = (max, value) => {
|
||||||
},
|
},
|
||||||
polar: {
|
polar: {
|
||||||
radius: ['40%', '65%'],
|
radius: ['40%', '65%'],
|
||||||
center: ['50%', '30%'],
|
center: ['50%', '35%'],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [{ name: '预报到填写报到人数', value: chartValues.value }],
|
data: [{ name: '预报到填写报到人数', value: chartValues.value }],
|
||||||
startAngle: 225,
|
startAngle: 225,
|
||||||
z: 1,
|
z: 2,
|
||||||
coordinateSystem: 'polar',
|
coordinateSystem: 'polar',
|
||||||
barMaxWidth: 35,
|
barMaxWidth: 35,
|
||||||
roundCap: 1,
|
roundCap: 1,
|
||||||
|
@ -110,7 +111,18 @@ const init = (max, value) => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [chartMax.value],
|
data: [{ name: "预报到填写总数", value: chartMax.value }],
|
||||||
|
startAngle: 0,
|
||||||
|
z: 1,
|
||||||
|
coordinateSystem: 'polar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
roundCap: 1,
|
||||||
|
color: '#00214d',
|
||||||
|
barGap: '-100%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: [{ name: "预报到填写总数", value: chartMax.value }],
|
||||||
z: 0,
|
z: 0,
|
||||||
silent: true,
|
silent: true,
|
||||||
coordinateSystem: 'polar',
|
coordinateSystem: 'polar',
|
||||||
|
|
|
@ -34,7 +34,7 @@ const init=(max, value) =>{
|
||||||
title: {
|
title: {
|
||||||
text: (chartRate.value || '0.0') + '%',
|
text: (chartRate.value || '0.0') + '%',
|
||||||
x: 'center',
|
x: 'center',
|
||||||
y: '20%',
|
y: '25%',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: '18',
|
fontSize: '18',
|
||||||
|
@ -77,7 +77,7 @@ const init=(max, value) =>{
|
||||||
},
|
},
|
||||||
polar: {
|
polar: {
|
||||||
radius: ['40%', '65%'],
|
radius: ['40%', '65%'],
|
||||||
center: ['50%', '30%'],
|
center: ['50%', '35%'],
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
@ -104,7 +104,18 @@ const init=(max, value) =>{
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [chartMax.value],
|
data: [{ name: "新生总人数", value: chartMax.value }],
|
||||||
|
startAngle: 0,
|
||||||
|
z: 1,
|
||||||
|
coordinateSystem: 'polar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
roundCap: 1,
|
||||||
|
color: '#00214d',
|
||||||
|
barGap: '-100%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
data: [{ name: "新生总人数", value: chartMax.value }],
|
||||||
z: 0,
|
z: 0,
|
||||||
silent: true,
|
silent: true,
|
||||||
coordinateSystem: 'polar',
|
coordinateSystem: 'polar',
|
||||||
|
|
|
@ -160,7 +160,7 @@ const getMapChart = (data) => {
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
areaColor: 'white' // 这里使用了两个颜色值来表示渐变色
|
areaColor: 'white' // 这里使用了两个颜色值来表示渐变色
|
||||||
},
|
},
|
||||||
// data: data,
|
data: data,
|
||||||
|
|
||||||
// data:[
|
// data:[
|
||||||
// {name: '北京', value1: 10,value:5,value:6},
|
// {name: '北京', value1: 10,value:5,value:6},
|
||||||
|
|
|
@ -7,21 +7,25 @@ const rate = (total: any, registers: any) => {
|
||||||
}
|
}
|
||||||
const bkRate = computed(() => {
|
const bkRate = computed(() => {
|
||||||
if (degreeDto.value?.length ) {
|
if (degreeDto.value?.length ) {
|
||||||
return rate(degreeDto.value[2].studentNumber, degreeDto.value[2].reportNumber)
|
const datas = degreeDto.value.filter((item:any) => item.degree === "统招本科");
|
||||||
|
return rate(datas.studentNumber, datas.reportNumber)
|
||||||
} else {
|
} else {
|
||||||
return 0
|
return 0
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const zkRate = computed(() => {
|
const zkRate = computed(() => {
|
||||||
if (degreeDto.value?.length) {
|
if (degreeDto.value?.length) {
|
||||||
return rate(degreeDto.value[0].studentNumber, degreeDto.value[0].reportNumber)
|
const datas = degreeDto.value.filter((item:any) => item.degree === "统招专科");
|
||||||
|
return rate(datas.studentNumber, datas.reportNumber)
|
||||||
} else {
|
} else {
|
||||||
return 0
|
return 0
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const zsbRate = computed(() => {
|
const zsbRate = computed(() => {
|
||||||
if (degreeDto.value?.length) {
|
if (degreeDto.value?.length) {
|
||||||
return rate(degreeDto.value[1].studentNumber, degreeDto.value[1].reportNumber)
|
const datas = degreeDto.value.filter((item:any) => item.degree === "统招专升本");
|
||||||
|
return rate(datas.studentNumber, datas.reportNumber)
|
||||||
} else {
|
} else {
|
||||||
return 0
|
return 0
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,7 +46,7 @@ const option = reactive({
|
||||||
data: yData,
|
data: yData,
|
||||||
type: "bar",
|
type: "bar",
|
||||||
smooth: false,
|
smooth: false,
|
||||||
name: "当日缴费人数",
|
name: "缴费人数",
|
||||||
color: "#2265ff",
|
color: "#2265ff",
|
||||||
label: {
|
label: {
|
||||||
show: true, // 开启显示
|
show: true, // 开启显示
|
||||||
|
|
|
@ -112,7 +112,7 @@ const setOption = async (xData: any[], yData: any[]) => {
|
||||||
smooth: false,
|
smooth: false,
|
||||||
symbol: "circle", // 拐点样式 -- 这里是个圆
|
symbol: "circle", // 拐点样式 -- 这里是个圆
|
||||||
symbolSize: 7, // 拐点大小
|
symbolSize: 7, // 拐点大小
|
||||||
name: "当日缴费人数",
|
name: "缴费人数",
|
||||||
// color: "rgba(9,202,243,.7)",
|
// color: "rgba(9,202,243,.7)",
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
markPoint: {
|
markPoint: {
|
||||||
|
|
Loading…
Reference in New Issue