一、前言1.1背景描述最近在做一个数据可视化项目。从网上找的，但是没有相关的学习资料。打算结合自己的探索，写出一系列的入门实战课程。1.2使用框架1、vue2.x2、echarts4+3、threejs4、vue-cli2.9+5、nodejs12+2、实际项目2.1Vue项目创建0、nodejs和npm安装vue项目需要安装nodejs和npm，百度搜索nodejs和npm官网，下载对应系统的安装包，默认安装。1、vue-cli工具安装打开命令行工具，运行如下命令安装vue-cli工具。npm安装--globalvue-cli2。创建项目在你的电脑上创建一个datav-course文件夹，打开命令行工具，然后输入datav-course文件，运行如下命令创建一个项目。vueinitwebpackdatav-course当项目初始化完成！命令行出现，在命令行运行如下命令，一个vue项目工程就创建成功了。2.2封装直方图1.安装echarts用vscode打开datav-course项目，在终端运行如下命令安装echarts。npm安装echarts--save2.安装stylus在termianl中运行如下命令安装stylus和stylus-loader插件，方便编写css样式。npminstallstylus--savenpminstallstylus-loader--save3，封装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、重启服务，即可完成直方图绘制。在终端运行npmrundev，就可以在浏览器中看到直方图了。3.源码云链接：https://gitee.com/Codexiongda...
