在 webpack 中使用 ECharts
Webpack 是目前比較流行的模塊打包工具，你可以在使用 webpack 的項目中輕松的引入和打包 ECharts。
使用webpack打包ECharts的步驟：
① 使用npm init命令創建一個package.json文件。
② 使用npm install echarts --save命令安裝ECharts。
③ 創建一個webpack.config.js文件，用於配置webpack。
④ 編寫代碼。
⑤ 啟動項目。
相關閱讀：
啟動項目時需要webpack-cli（我對webpack不太了解）。我在本地全局安裝了webpack相關的包。
// package.json
{
"name": "myproject2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open",
"build": "webpack -p"
},
"author": "",
"license": "ISC",
"dependencies": {
"echarts": "^4.6.0"
}
}
// webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
}
};
// index.js
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]
}]
});
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
啟動項目后，在瀏覽器看到如下圖表。
參考：