数据可视化入门实战系列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组件,核心代码如下所示:

hexinEcharts.png

4、在HelloWorld中引入HelloBar组件

yinruHelloBar.png

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

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

阅读 737

推荐阅读
目录