在webpack中如何使用ECharts？

這篇文章主要介紹了在webpack 中使用ECharts的實例代碼,需要的朋友可以參考下

Webpack 是目前比較流行的模組打包工具，你可以在使用webpack 的專案中輕鬆的引入和打包ECharts，這裡假設你已經對webpack 有一定的了解並且在自己的專案中使用。

npm 安裝ECharts

#在3.1.1 版本之前ECharts 在npm 上的package 是非官方維護的，從3.1.1 開始由官方EFE 維護npm 上ECharts 和zrender 的package。

你可以使用以下指令透過npm 安裝ECharts

npm install echarts --save

#引入ECharts

透過npm 上安裝的ECharts 和zrender會放在node_modules目錄下。可以直接在專案程式碼中 require('echarts') 得到 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 包，因此體積會比較大，如果在專案中對體積要求比較苛刻，也可以只按需引入需要的模組。

例如上面範例程式碼中只用到了長條圖，提示框和標題組件，因此在引入的時候也只需要引入這些模組，可以有效的將打包後的體積從400 多KB 減小到170 多KB。

// 引入 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樹插件中如何實現全國五級地區點擊後加載

Koa2中有關async&await的用法有哪些？

在vue中靜態資源如何打包

#

以上是在webpack中如何使用ECharts？的詳細內容。更多資訊請關注PHP中文網其他相關文章！