左下角进度数据tooltips,左侧中间数据更改

This commit is contained in:
张宁 2024-06-21 15:14:27 +08:00
parent 0f3e5d2182
commit f2faa9560f
6 changed files with 47 additions and 20 deletions

View File

@ -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',

View File

@ -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',

View File

@ -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},

View File

@ -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
} }

View File

@ -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, //

View File

@ -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: {