Web前端笔记-使用Webpack调用echarts画图
生活随笔
收集整理的這篇文章主要介紹了
Web前端笔记-使用Webpack调用echarts画图
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
有如下幾個(gè)步驟，在此記錄下！
1. 安裝npm；
2. 安裝cnpm；
3. 初始化webpack項(xiàng)目：
npm init -y3. 下載依賴：
cnpm i -D webpack webpack-cli4. 下載echarts依賴：
cnpm i -S echarts5. 這個(gè)時(shí)候會(huì)出現(xiàn)node_modules的文件夾，新建src目錄以及src/index.js，新建/index.html及webpack.config.js
這里將package.json中的：
"test": "echo \"Error: no test specified\" && exit 1"改為：
"build": "webpack"完整代碼如下：
{"name": "webpack","version": "1.0.0","description": "","main": "index.js","scripts": {"build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"webpack": "^5.5.0","webpack-cli": "^4.2.0"},"dependencies": {"echarts": "^4.9.0"} }6. 將webpack.config.js配置好，打包的文件改如何輸出：
const path = require('path')module.exports = {entry: path.resolve(__dirname, './src/index.js'),output: {path: path.resolve(__dirname, './dist'),filename: "index-bundle.js"} }7. 對(duì)應(yīng)的文件如下：
index.js
import EChars from 'echarts'const charDom = document.getElementById('chart') const chart = EChars.init(charDom) chart.setOption({title: {text: 'test'},xAxis: {data: ['一個(gè)', '兩個(gè)', '三個(gè)', '四個(gè)']},yAxis: {},series: {type: 'bar',data: [100, 200, 300, 400]} })index.html
<!DOCTYPE html> <html> <head><meta charset="utf-8" /><style>#chart{width: 600px;height: 600px;}</style></head><body> <div id="chart"></div> <script src="dist/index-bundle.js"></script> </body></html>8. 構(gòu)建項(xiàng)目：
npm run build這里要注意
這個(gè)生成的目錄和文件都是和webpack.config.js相關(guān)的
比如這個(gè)index-bundle.js
?
程序運(yùn)行截圖如下：
源碼打包下載地址：
https://github.com/fengfanchen/frontUI/tree/master/webpackEcharts
?
總結(jié)
以上是生活随笔為你收集整理的Web前端笔记-使用Webpack调用echarts画图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： WebQML笔记-qml获取canvas
- 下一篇： Web前端笔记-two.js实现坐标定位