1、在電腦指定文件夾下，滑鼠右鍵選擇Git Bash Here，然後輸入命令
cnpm install --global vue-cli 安裝vue-cli
cnpm install --global vue-cli
2、接著使用命令：vue init webpack wanm，創建一個基於webpack模板的新項目
vue init webpack wanm
3、切換工作目錄cd wanm/，然後運行項目：npm run dev
運行項目：npm run dev
4、如果要在vue框架項目中使用echarts，需要安裝echarts
npm install echarts -S
npm install echarts -S
5、打開HBuilderX開發工具，導入項目wanm
導入項目wanm
6、在src/components文件路徑下，新建vue文件ColumnChart.vue
新建vue文件ColumnChart.vue
7、在組件ColumnChart.vue文件中，插入一個div，帶有id屬性和style
<div id="columnChart" ：style="{width: width, height: height}"></div>
插入圖形容器
8、接著在script標籤中，導入echarts，然後初始化變量width和height
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
export default {
data() {
return {
width: '1800px',
height: '900px'
}
}
}
導入echarts，初始化變量width和height
9、初始化圖形，綁定圖形數據源和相關屬性
初始化圖形，綁定圖形數據源和屬性
10、打開項目中的index.js文件，導入組件ColumnChart，並配置路由
導入組件ColumnChart，並配置路由
11、保存代碼並使用命令運行項目，結果出現報錯；檢查代碼發現，沒有導入vue
導入vue模塊
12、修改代碼後，刷新瀏覽器，可以查看到一個柱狀圖
打開瀏覽器，預覽柱狀圖效果