데이터 시각화
최첨단:
개념:
도구: E 차트 라이브러리(가장 일반적으로 사용되는 7가지 아이콘)
Echarts의 기본: Echarts 테마, 애니메이션 효과, Echarts API
Echarts의 고급 사용:
프로젝트: 전자상거래 플랫폼 데이터 시각화 실시간 모니터링 시스템
기능 모듈을 실현하십시오:
- 백그라운드 구축 - 차트에 포함된 데이터를 서버에서 가져오기 때문에 백그라운드에 서버를 구축해야 합니다.
- Vue를 결합하여 아이콘 구성요소 개발(프로젝트는 Vue 프레임워크를 기반으로 함)
- WebSocket은 데이터 푸시를 구현합니다(클라이언트처럼 데이터를 푸시하도록 서버 구현).
- 테마 전환/페이지 병합/전체 화면 전환. . .
지식 보유: HTML, CSS, JS, Echarts, vue, vuex, 라우터, webpack, websocket
프로젝트: 프런트엔드 및 백엔드 병렬 개발
명령: npm run server/npm run start
프로젝트 시연: 1. 이 프로젝트는 전자상거래 플랫폼 데이터 시각화를 위한 실시간 모니터링 시스템입니다.
2. 분석을 위한 실시간 데이터 수집이 가능합니다.
3. 대형 스크린 디스플레이, 적응형 해상도 지원
4. 연결 효과, 원엔드 작동, 다중 터미널 연결 표시 지원
데이터 시각화의 개념: 데이터를 보다 직관적인 형태로 표시하고, 데이터와 데이터의 관계를 한눈에 알 수 있습니다(텍스트가 표만큼 좋지 않고, 표가 그림보다 좋지 않음). 그리고 데이터에 숨겨진 정보를 (위 또는 아래) 찾아볼 수 있습니다.
시각화 구현 : 1. 리포트 클래스(excel, Crystal Report) 2. 비즈니스 인텔리전스 BI(Microsoft BI, power-BI) 3. 코딩 클래스(echarts.js, d3.js, 데이터 시각화 라이브러리)
Echarts 소개: 강력한 호환성을 달성하기 위해 js를 사용하여 Baidu에서 개발한 오픈 소스 시각화 라이브러리 활성, 사용자만 생각할 수 없고 사용자가 할 수 없는 것 없음, 수백 개의 그래픽
데이터 시각화: 보다 직관적인 차트를 통해 데이터를 표현하는 것입니다. 아이콘은 표현 방법일 뿐입니다. 핵심은 데이터 그 자체입니다. E 차트는 Key-value 데이터 형식, 2차원 테이블, TypedArray 형식 등 다양한 데이터 형식을 지원합니다. , 대류 데이터 지원: 스트리밍 데이터의 장점: 대규모 데이터 트래픽의 경우에만 데이터 자체에 많은 시간이 걸리고, 데이터가 로드되는 양이 얼마나 되는지, 동적으로 렌더링되며(스트리밍 데이터의 겨울 렌더링), 변경된 데이터만 렌더링됩니다(증분 렌더링 기술).
Echarts의 기본 사용법-1.히스토그램
기본 사용 단계: 1. echarts.js 파일 가져오기 2. 차트를 표시할 상자 준비(세부 사항: 너비와 높이가 필요함)
3. echarts 인스턴스 객체를 초기화합니다. (echarts.init('dom') dom 요소 매개변수는 차트의 최종 표시 위치를 결정합니다.) 4. 구성 항목을 준비합니다. (특히 핵심: 차트의 표시 모드와 표시되는 데이터를 결정합니다. 5. 인스턴스 객체의 .setOption(configuration 객체)을 통해 구성 항목을 Echarts 인스턴스 객체로 설정합니다.
구성 항목 사용 요약: 1. 구성 항목 변경을 제외하고 다른 코드는 수정됩니다.
2. 구성 항목의 학습 및 사용은 공식 문서 및 예제를 참조해야 합니다.
일부 기본 구성 항목:
xAxis: 데카르트 좌표계의 X축 객체 {}
yAxis: 직교 좌표계의 Y축 객체 {}
시리즈: 시리즈 목록, 각 시리즈는 유형[]에 따라 자체 차트 유형 배열을 결정합니다.
const BarArr=[70,80,90]
var 옵션={
제목:{
text:'학년', //주 제목
링크:'http://www.baidu'//메인 제목을 클릭하면 링크가 가리키는 위치로 이동합니다.
textStyle:{fontStyle='normal'} //메인 제목의 글꼴 스타일
}
xAxis:{type:'category', //category는 카테고리 축을 나타냅니다. 즉, 카테고리 축 x의 카테고리를 지정해야 하며, 데이터 속성 data:['Xiaoming',' 샤오홍','리틀 퍼플']}
yAxis:{type:'value'//type은 값 축으로 설정되므로 데이터를 설정할 필요가 없습니다. y축은 x축의 각 범주에 따라 계열의 데이터 값을 자동으로 찾습니다.}
시리즈:[{이름:'언어'//3개의 값은 언어 점수 유형:'bar'//그래픽이 나타내는 것, 데이터: BarArr } 색상:'red'//열 색상], 공통 효과: 마크 markPoint :{ //최대값과 최소값 표시 data: [{type:'max',name:'maximum value'
},{유형:'최소',이름:'최소값'}]
}, markLine:{//평균선
데이터:[{유형:'평균', 이름:'평균'}]
}, 디스플레이는 숫자 표시 라벨: {//숫자 표시(각 숫자 표시) show: true, 회전: 60, //회전 각도, 위치:'inside, //각 숫자 값은 막대에 표시됩니다. Chart }열 너비 표시: barWidth:'30', 가로 히스토그램: x축 및 y축 역할 변경 xAxis:{type:value},yAxis:{type:category,data: BarArr}
}
암호:
요약 히스토그램:
- 기본 세로 막대형 차트: 기본 코드 구조, x축 및 y축 데이터, 계열 유형이 막대로 설정됨
- 히스토그램의 일반적인 효과: 최대/최소값 markPoint, 평균값 markLine, 숫자 표시 레이블, 열 너비 barWidth
- 히스토그램의 특징: 히스토그램은 분류 데이터를 설명하며, 각 카테고리의 번호를 보여주며, 히스토그램을 통해 각 카테고리의 순위를 명확하게 알 수 있습니다.
-
일반 구성 제목: 제목, 프롬프트: 도구 설명(), 도구 버튼(Echarts 제공): 도구 상자, 차트 열: 범례, 모든 유형의 차트에 사용할 수 있는 구성을 나타냅니다.
변수 옵션={
title:{text:'점수 표시', textStyle:{color:'red'}//텍스트 스타일, 제목 위치: 왼쪽:30, 위쪽:30, 제목 테두리: borderWidth, borderColor, borderRadious }
도구 설명:{//마우스를 롤오버하거나 차트를 클릭할 때 표시 상자를 구성하는 데 사용되는 프롬프트 상자 형성, 트리거 트리거 유형, TriggerOn 트리거 타이밍, 포맷터: '표시된 콘텐츠는 일반적으로 템플릿 문자열, 참조 문서 또는 콜백 함수'
Trigger:item: //마우스가 안으로 움직일 때 트리거되고, 마우스가 밖으로 움직일 때는 표시되지 않습니다.
Trigger:axis //마우스가 좌표축에 표시되는 한
TriggerOn:click //마우스가 안으로 들어갈 때는 트리거되지 않고, 클릭하여 프롬프트를 표시할 때만 트리거됩니다.
포맷터: `{b}의 제목은 {c}입니다`
formatter:function(arg){return arg[0].name+' 점수는 '+arg[0].data} //반환 값은 표시된 콘텐츠입니다}
도구 상자: {feature:{saveImae:{} //차트를 클릭하여 다운로드, 사진 내보내기, 데이터 보기:{} 소스 데이터를 볼 수 있고 수정할 수 있음, 데이터 보기, 복원:{} 데이터 재설정, dataZoom:{} Area Zoom , MagicType:{type:['bar','line']} //동적 데이터 표시, 막대 차트와 선 차트 간 전환}
범례: 시리즈를 필터링하는 데 사용되는 차트 열은 시리즈와 함께 사용해야 하며, 범례에 있는 데이터는 배열이고, 범례에 있는 데이터의 값은 시리즈 배열에 있는 데이터 그룹의 이름 값과 일치해야 합니다.
범례:{데이터:['중국어','수학']}
}