数据可视化入门实战系列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...