数据可视化入门实战系列1--项目初始化及柱状图实现

一、前言
1.1背景说明

最近在做数据可视化的项目，从网上找了一下，没有相关的学习资料，打算结合自己的摸索，写一个系列的入门实战课程。

1.2使用框架

1、vue2.x
2、echarts4+
3、threejs
4、vue-cli2.9+
5、nodejs12+

二、实战项目
2.1vue工程创建

0、nodejs和npm安装
vue项目需要安装nodejs和npm，百度搜索nodejs和npm官网，下载对应系统的安装包，默认安装即可。
1、vue-cli工具安装
打开命令行工具，运行以下命令，安装vue-cli工具。
npm install --global vue-cli
2、创建项目
在电脑中创建datav-course文件夹，打开命令行工具，然后进入datav-course文件中，运行以下命令，创建项目。
vue init webpack datav-course
当命令行中出现Project initialization finished!时，在命令行中运行以下命令，一个vue项目工程创建成功。

2.2封装柱状图

1、安装echarts
用vscode打开datav-course工程，在terminal中运行以下命令，安装echarts。
npm install echarts --save
2、安装stylus
在termianl中运行以下命令，安装stylus和stylus-loader插件，便于写css样式。
npm install stylus --save
npm install stylus-loader --save
3、封装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组件，核心代码如下所示：

4、在HelloWorld中引入HelloBar组件

5、重启服务，柱状图即可完成
在终端中运行npm run dev,即可在浏览器中看到柱状图了。

三、源码
码云链接：https://gitee.com/Codexiongda...