코드를 사용할 준비가 되었습니다. 아래 단계에 따라 바보 같은 스타일의 튜토리얼을 구성하면 몇 분 안에 완료할 수 있습니다.
코드 소스 파일이 필요한 경우 gzh [Li Qiaoyan], s Xin [Visualization]으로 이동하십시오.
시각화 효과 맵
운영 환경: VScode
"Large Screen Visualization System"의 소스코드 획득 방법은 글 말미에 첨부합니다~
1. 여는 방법
1. zip 소스 코드 파일을 얻은 후 로컬에 저장하고 압축을 풉니다.
2. 소스 코드 파일 구조 소개;
3. VScode 편집기를 열고 메뉴 표시줄 [파일] —> [폴더 열기]를 클릭합니다.
4. 원본 파일의 위치를 찾아 폴더를 선택합니다.
5. 신뢰를 확인하고 [예]를 클릭합니다.
2. 도구 패키지 설치
1. [Big-Screen] 폴더를 마우스 오른쪽 버튼으로 클릭하고 [통합 터미널에서 열기]를 선택합니다.
2. 터미널에 npm i -g @vue/cli를 입력하고 Enter 키를 누릅니다.
npm i -g @vue/cli
현재 vue 스캐폴딩은 webpack에 의해 패키징됩니다. 현재 vue2 => vue-cli 5.0.8
3. 시각적 적응
큰 화면 아래의 디스플레이는 일반적으로 16:9 크기 1920*1080이며 이 비율을 기준으로 적응이 이루어집니다.
1. [bigping] 폴더를 마우스 오른쪽 버튼으로 클릭 —> [통합 터미널에서 열기];
2. 터미널에 npm i lib-flexible을 입력하고 Enter 키를 누릅니다.
npm i lib 유연한
넷째, 플러그인 구성
1. 1곳을 클릭합니다.
2. 2곳에서 [px to rem & rpx & vw(cssrem)] 검색;
3. 플러그인의 우측 하단에 있는 설치를 클릭합니다(아래 그림에서 동그라미 ③).
4. 플러그인을 설치한 후 플러그인의 오른쪽 하단에 원형 기어가 있을 것입니다. [기어] --> [확장 설정]을 클릭합니다.
5. 마우스를 아래로 밀어 Cssrem:Root Font Size 옵션을 찾고 값을 80으로 변경합니다(아래 그림 참조).
다섯, vue에서 echarts 사용
1. [bigping] 폴더를 마우스 오른쪽 버튼으로 클릭 —> [통합 터미널에서 열기];
2. echarts를 다운로드하고 터미널에 npm i echarts를 입력한 다음 Enter 키를 누릅니다.
npm i 이차트
여섯, 달려라
1. [bigping] 폴더를 마우스 오른쪽 버튼으로 클릭 —> [통합 터미널에서 열기];
2. 터미널에 npm run serve 를 입력하여 프로젝트를 실행하고 Enter 키를 누릅니다.
npm 실행 서브
2. 파란색 주소는 이 프로젝트의 실행 결과 주소입니다. [Ctrl 키 + 클릭] 프로젝트를 열기 위한 로컬 URL.
-
Local은 로컬 주소입니다. 주소에 액세스하려면 [Ctrl + 마우스 클릭을 길게 누르십시오]
-
네트워크는 로컬 영역 주소이며 통합 LAN에 액세스할 수 있습니다.
렌더링
지금은 여기까지입니다.
보충: 이 시각화 시스템의 각 이미지는 사용자 요구에 따라 임의로 수정할 수 있습니다.
코드 소스 파일이 필요한 경우 gzh [Li Qiaoyan], s Xin [Visualization]으로 이동하십시오.
더 많은 유형의 echarts (공간이 제한되어 코드가 하나씩 표시되지 않음)
산포도
지리적 좌표/지도
3D 히스토그램
관계 차트
