vue+echarts 데이터 시각 화 스크린 전시 방법 예시

ECharts 를 가 져 오 는 경 로 는 다음 과 같은 몇 가지 가 있 습 니 다.상황 에 따라 선택 하 십시오.
1)가장 직접적인 방법 은 ECharts 의 공식 사이트 에서 귀하 에 게 적합 한 버 전 을 선택 하여 다운로드 하 는 것 입 니 다.서로 다른 포장 다운 로드 는 서로 다른 개발 자의 기능 과 부피 에 대한 수요 에 적용 되 거나 전체 버 전 을 직접 다운로드 할 수 있 습 니 다.개발 환경 은 원본 코드 버 전 을 다운로드 하 는 것 을 권장 합 니 다.일반적인 오류 알림 과 경 고 를 포함 합 니 다.
2)ECharts 의 GitHub 에서 최신 release 버 전 을 다운로드 할 수도 있 고,압축 해 제 된 폴 더 의 dist 디 렉 터 리 에서 최신 버 전의 echarts 라 이브 러 리 를 찾 을 수 있다.
3)또는 npm 를 통 해 echarts,npm install echarts--save 를 가 져 옵 니 다.자세 한 내용 은"webpack 에서 echarts 사용"을 참조 하 십시오.
cdn 에서 도입 하면 cdnjs,npmcdn 또는 국내 bootcdn 에서 ECharts 의 최신 버 전 을 찾 을 수 있 습 니 다.
vue 에 echarts 를 도입 하 는 방법 을 소개 합 니 다.
1.우선 설치 의존

npm install echarts --save

2.1 전역 적 으로 main.js 설정 을 도입 합 니 다(추천 하지 않 고 사용 하면 가방 이 너무 크 고 불필요 합 니 다)

import echarts from 'echarts' //  echarts
Vue.prototype.$echarts = echarts //     ，       this.$echarts  

2.2 구성 요소 내 필요 에 따라 도입(추천)
이런 방식 은 매우 간단 하 다.도표 의 구성 요 소 를 도입 해 야 한다.예 를 들 어 다음 과 같다.구체 적 으로 어떤 모양 의 구성 요 소 를 사용 하려 면 무엇 을 도입 해 야 합 니까?

//         
let echarts = require("echarts/lib/echarts");
//          
require("echarts/lib/chart/bar");

3.전역 도입 을 예 로 들 어 구성 요소 에 예 시 를 사용 합 니 다.

<template>
	<div class="view-content">
		<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
	</div>
</template>

<script>
	export default {
		name: 'Echarts',
		data() {
			return {
			}
		},
		mounted() {
			this.drawLine();
		},
		methods: {
			drawLine() {
				//       dom，   echarts  
				let myChart = this.$echarts.init(document.getElementById('myChart'))
				//       
				let option = {
					tooltip: {},
					xAxis: {
						data: ["  ", "   ", "   ", "  ", "   ", "  "]
					},
					yAxis: {},
					series: [{
						name: '  ',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				};
				//          
				myChart.setOption(option);
				setTimeout(function() {
					window.onresize = function() {
						myChart.resize();
					}
				}, 200)
			}
		}
	}
</script>
<style lang="scss" scoped>
</style>

4.효과

5.상기 효 과 는 정부의 기본 적 인 효과 이다.물론 이렇게 프로젝트 에 응용 하면 수요 에 부합 되 지 않 고 더욱 시 크 하고 과학적 인 느낌 을 가 지 려 면 한 번 의 설정 을 거 쳐 야 한다.그림(아래 프로젝트 는 모두 자신 이 개발 한 것 이다)



vue+echarts 데이터 시각 화 스크린 전시 방법 에 대한 예 시 를 소개 합 니 다.vue+echarts 데이터 시각 화 스크린 콘 텐 츠 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!