집 > 기사 > 웹 프론트엔드 > 웹팩에서 ECharts 사용에 대한 자세한 설명

웹팩에서 ECharts 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-03-23 15:29:101928검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!