이번에는 Webpack에서 EChart를 사용하는 방법에 대해 자세히 설명하겠습니다. Webpack에서 EChart를 사용할 때 주의사항은 무엇인가요?
Webpack은 현재 널리 사용되는 모듈 패키징 도구입니다. webpack을 사용하여 프로젝트에서 EChart를 쉽게 도입하고 패키징할 수 있습니다. 이미 webpack에 대해 어느 정도 이해하고 있으며 자신의 프로젝트에서 사용할 수 있다고 가정합니다.
npm Install ECharts
버전 3.1.1 이전에는 npm의 ECharts 패키지가 비공식적으로 유지 관리되었습니다. 3.1.1부터 공식 EFE는 npm에서 ECharts 및 zrender 패키지를 유지 관리합니다.
다음 명령을 사용하여 npm을 통해 ECharts를 설치할 수 있습니다
npm install echarts --save
ECharts 소개
ECharts와 npm을 통해 설치된 zrender는 node_modules 디렉토리에 배치됩니다. 프로젝트 코드 require('echarts')에서 EChart를 직접 얻을 수 있습니다.
var echarts = require('echarts'); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });
주문형 ECharts 차트 및 구성 요소 소개
기본적으로 require('echarts')를 사용하면 모든 차트와 구성 요소를 로드한 ECharts 패키지가 제공되므로 볼륨이 상대적으로 커집니다. 프로젝트의 볼륨을 변경합니다. 요구 사항이 더 엄격한 경우 필요에 따라 필수 모듈만 도입할 수도 있습니다.
예를 들어 위의 샘플 코드는 막대 차트, 프롬프트 상자 및 제목 구성 요소만 사용하므로 도입 시 이러한 모듈만 도입하면 패키지 크기를 400KB 이상에서 170KB 이상으로 효과적으로 줄일 수 있습니다. .
// 引入 ECharts 主模块 var echarts = require('echarts/lib/echarts'); // 引入柱状图 require('echarts/lib/chart/bar'); // 引入提示框和标题组件 require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
NavigatorIOS 구성 요소 사용에 대한 자세한 설명
위 내용은 웹팩에서 ECharts 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!