數據可視化入門實戰系列1--項目初始化及柱狀圖實現

1、前言
1.1背景說明

最近在作數據可視化的項目，從網上找了一下，沒有相關的學習資料，打算結合本身的摸索，寫一個系列的入門實戰課程。

1.2使用框架

一、vue2.x
二、echarts4+
三、threejs
四、vue-cli2.9+
五、nodejs12+

2、實戰項目
2.1vue工程建立

0、nodejs和npm安裝
vue項目須要安裝nodejs和npm，百度搜索nodejs和npm官網，下載對應系統的安裝包，默認安裝便可。
一、vue-cli工具安裝
打開命令行工具，運行如下命令，安裝vue-cli工具。
npm install --global vue-cli
二、建立項目
在電腦中建立datav-course文件夾，打開命令行工具，而後進入datav-course文件中，運行如下命令，建立項目。
vue init webpack datav-course
當命令行中出現Project initialization finished!時，在命令行中運行如下命令，一個vue項目工程建立成功。

2.2封裝柱狀圖

一、安裝echarts
用vscode打開datav-course工程，在terminal中運行如下命令，安裝echarts。
npm install echarts --save
二、安裝stylus
在termianl中運行如下命令，安裝stylus和stylus-loader插件，便於寫css樣式。
npm install stylus --save
npm install stylus-loader --save
三、封裝bar組件
建立HelloBar.vue組件，參考echarts官網[5分鐘上手echarts](https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts)
HelloBar.vue代碼以下，按需引入echarts組件，核心代碼以下所示：

四、在HelloWorld中引入HelloBar組件

五、重啓服務，柱狀圖便可完成
在終端中運行npm run dev,便可在瀏覽器中看到柱狀圖了。

3、源碼
碼雲連接：https://gitee.com/Codexiongda...