vue+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 데이터 시각 화 스크린 콘 텐 츠 는 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.