In recent years, the phenomenon of "graduating but finding insufficient credits" is not uncommon. Learners urgently need a visual data screen that can quickly view academic-related information. This project is based on the Bootstrap framework and Echarts visualization chart, using Visual Studio Code code editor to design the academic early warning data visualization screen, designed to help students more easily and quickly obtain their current student status, credits, studies and other graduation-related information. Through the early warning of student status, students can timely understand the change of student status and the information of the length of study. Through the early warning of credits, students can timely understand the scores of general courses, professional courses, professional elective courses and other sections that have been taken, in-progress, selected and to be selected, the number of credits required for graduation and the number of hours required for the second class. Through academic early warning, students can timely understand the current total GPA and the fluctuation of GPA in the past semester, whether there are any relevant situations such as course punishment, suspension of courses, absenteeism records, etc., and display relevant early warning information. At the same time, teachers can simultaneously obtain the academic situation of class groups so as to remind them in time. In addition, teachers can also learn about students' absenteeism, absenteeism and other relevant information about their learning attitudes from the perspective of their dormitories, so as to make timely interviews with relevant students.