웹팩에서 EChart를 어떻게 사용하나요?

이 글은 주로 webpack에서 ECharts를 사용하는 예제 코드를 소개하고 있으니 필요한 친구들은 참고하시면 됩니다.

Webpack은 현재 널리 사용되는 모듈 패키징 도구로, 여기서는 webpack을 사용하여 ECharts를 쉽게 소개하고 패키징할 수 있다고 가정합니다. 귀하는 이미 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 디렉터리에 배치됩니다. EChart를 얻으려면 프로젝트 코드에서 직접 require('echarts')를 사용할 수 있습니다.

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]
  }]
});

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

zTree 트리 플러그인에서 전국 5단계 지역의 클릭 로딩을 구현하는 방법

Koa2에서 async & wait의 사용법은 무엇입니까?

vue에서 정적 리소스를 패키징하는 방법

위 내용은 웹팩에서 EChart를 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!