Vue.JS에서 전자 차트를 사용하는 방법

이번에는 Vue.JS에서 echart를 사용하는 방법과 Vue.JS에서 echart를 사용할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

이전 기사에서는 webpack에서 ECharts를 사용하는 자세한 예를 소개했습니다. 클릭하여 볼 수 있습니다.

1. NPM 설치(전역 가져오기) 사용

다음 명령을 실행합니다.

npm install echarts--save

echarts 모듈을 소개합니다.

Vue 프로젝트의 main.js에 echarts 모듈을 소개합니다. 다음 코드:

import echarts from 'echarts'
Vue.prototype.$echarts = echarts；

2. 요청 시 가져오기

위의 전역 가져오기는 모든 echarts 차트를 패키지하므로 크기가 너무 커집니다. 이 문제를 해결하려면 requireIntroduce on Demand를 사용할 수 있습니다. 즉, 필요한 것을 가져옵니다. :

는

let echarts = require('echarts/lib/echarts')

3입니다.

를 직접 인용하고 index.html 파일에 전역적으로 소개하고, 스크립트 태그를 사용하여

<script src="/static/js/echarts/echarts.js"></script>

를 소개합니다.

그런 다음 디렉터리에서 webpack.base.conf.js, 구성 파일을 찾아 vue 프로젝트를 빌드하고 externals 속성을 module.exports 객체에 추가한 다음 echarts가 있는 경로를 구성합니다.

module.exports = {
.....
externals: {
// 路径：命名空间
 'echarts/dist/echarts':'echarts',
}
}；

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

서버에서 직접 파일 업로드 진행 상황 가져오기

datepicker 사용 방법

Vue.js에서 ejsExcel 템플릿 사용

위 내용은 Vue.JS에서 전자 차트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!