Web前端笔记-使用Webpack调用echarts画图
生活随笔
收集整理的這篇文章主要介紹了
Web前端笔记-使用Webpack调用echarts画图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
有如下幾個步驟，在此記錄下！
1. 安裝npm；
2. 安裝cnpm；
3. 初始化webpack項目：
npm init -y3. 下載依賴：
cnpm i -D webpack webpack-cli4. 下載echarts依賴：
cnpm i -S echarts5. 這個時候會出現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. 對應的文件如下：
index.js
import EChars from 'echarts'const charDom = document.getElementById('chart') const chart = EChars.init(charDom) chart.setOption({title: {text: 'test'},xAxis: {data: ['一個', '兩個', '三個', '四個']},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. 構建項目：
npm run build這里要注意
這個生成的目錄和文件都是和webpack.config.js相關的
比如這個index-bundle.js
?
程序運行截圖如下：
源碼打包下載地址：
https://github.com/fengfanchen/frontUI/tree/master/webpackEcharts
?
總結
以上是生活随笔為你收集整理的Web前端笔记-使用Webpack调用echarts画图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WebQML笔记-qml获取canvas
- 下一篇： Web前端笔记-two.js实现坐标定位