1.小节概述
数据可视化是将数据转换成图表等形式，以一种更直观的方式呈现数据。通过可视化的方式，将看不懂的数据通过图形化的手段进行有效地表达，准确高效简洁全面地传递某种信息，甚至帮助我们发现某种规律和特征，挖掘数据背后的价值。
ECharts是一款基于JavaScript的数据可视化图表库，提供直观、生动、可交互、可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。在本专栏文章中，我们通过Vue集成ECharts开发可视化小应用并对项目进行完善，了解数据可视化及ECharts的用法。涉及的技术栈包括：前端Vue（2.x）、可视化库ECharts（5.x）、UI框架Element-UI、网络请求库Axios等。磨刀不误砍柴工，本小节将搭建一个Vue项目（2.x），并集成Echarts、Axios等，后续将在此项目基础上持续完善，了解ECharts各个类型图表及其使用。
2.操作步骤
2.1.使用vue-cli创建vue项目
1.准备工作：电脑上安装node.js环境并配置国内镜像，详细步骤可以参考小编软件安装专栏中的文章：Node.js的安装配置。npm全局范围内安装脚手架工具vue/cli（命令行：npm install -g @vue/cli）。所有准备好后可以打开cmd查询版本等信息，如下图。
2.打开cmd，把路径切换到自己要存项目的路径下，使用脚手架工具创建项目，运行 vue create 项目名，进入到项目配置选项中。
3.选择项目配置模板，此处小编选择的第3项，即自主选择项目所需的配置。
4.勾选项目所需要的模块，点击上下键和空格键按需选择即可，包括Babel转码器、Router路由管理、Vuex状态管理、CSS预处理等。
5.选择项目的Vue.js版本，此处小编选择的是2.x。
6.是否用history模式来创建路由，此处小编直接回车默认Y（简单来说history模式的URL地址不带#，而hash模式带#）。
7.选择CSS预处理类型，此处小编直接默认了。
8.选择习惯把一些配置信息存放在哪里，小编此处选择的是 In package.json。
9.是否保存上述配置信息当做后续项目的可选配置，此处小编选择了否（N）。至此配置信息选择完毕，回车等待下载项目完成。
10.启动项目：使用VSCode打开项目（项目结构了解如下图），新建终端，运行 npm run serve 启动项目后浏览器访问，可以看到Home欢迎页。
2.2.集成element-ui
1.针对上述创建的vue项目（itxyh-echarts）进行初始化调整：
-
删除src文件夹下的components文件夹下的Helloword.vue文件。
-
删除views下的AboutView.vue文件。
-
修改路由（router下的index.js），只保留主页指向HomeView页面即可。
-
修改根组件App.vue，去掉默认的样式信息和页面相关内容。
-
修改views下的HomeView.vue，暂时只保留 Hello World！信息。
<!--App.vue-->
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="scss">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
</style>设置完成后启动项目，浏览器访问可以看到项目初始化效果。
2.VSCode中，新建终端，运行指令下载element-ui依赖，下载完成后可以看到package.json中相关依赖信息。
npm i element-ui -S
3.修改main.js入口文件信息，完整引入element-ui使之生效。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
4.主页调整：在HomeView.vue页面中，引用element-ui的栅格布局、按钮等组件，定义页面大致框架，后续创建的ECharts图表内容将在这里呈现；修改后浏览器访问查看效果。
<template>
<div class="home">
<el-row>
<el-col :span="8" class="sideCol">
<div class="chartDiv">
<el-button type="primary">图表1</el-button>
</div>
</el-col>
<el-col :span="8">
<div class="chartDiv">
<el-button type="primary">图表2</el-button>
</div>
</el-col>
<el-col :span="8" class="sideCol">
<div class="chartDiv">
<el-button type="primary">图表3</el-button>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="8" class="sideCol">
<div class="chartDiv">
<el-button type="primary">图表4</el-button>
</div>
</el-col>
<el-col :span="8">
<div class="chartDiv">
<el-button type="primary">图表5</el-button>
</div>
</el-col>
<el-col :span="8" class="sideCol">
<div class="chartDiv">
<el-button type="primary">图表6</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>
<style scoped>
.el-row {
margin-top: 5px;
height: 410px;
}
.el-button {
margin-top: 5px;
}
.sideCol {
padding-left: 6px;
padding-right: 6px;
}
.chartDiv {
border: 1px solid;
height: 410px;
border-radius: 5px;
text-align: center;
}
</style>
2.3.集成Echarts
1.VSCode中，新建终端，运行指令下载echarts依赖，下载完成后可以看到package.json中相关依赖信息。
npm install echarts --save
2.修改main.js入口文件信息，完整引入echarts使之生效：导入echarts所有模块，并挂载到vue原型上，后续使用时可以直接用 this.$echarts.xxx。
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.在components中新增自定义组件ChartBar.vue，用于处理Echarts图表，后续放到主页布局的图表1区域。在ChartBar.vue中：定义DOM容器来承载ECharts图表渲染；然后在初始化页面完成后通过echarts.init方法初始化一个echarts实例并通过setOption方法加载配置项和数据生成一个简单的柱状图，具体代码如下：
<template>
<div class="chartDiv" id="chartBarOne"></div>
</template>
<script>
export default {
name: 'ChartBar',
mounted() {
let myChart = this.$echarts.init(document.getElementById('chartBarOne'))
var option = {
title: {
text: 'ECharts入门示例',
},
tooltip: {},
legend: {
data: ['销量'],
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
},
],
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
},
}
</script>
<style scoped>
.chartDiv {
border: 1px solid;
height: 410px;
border-radius: 5px;
text-align: center;
}
</style>4.修改views下的HomeView.vue页面，引入自定义组件ChartBar.vue，然后放到图表1的地方进行展示。
5.启动项目，浏览器访问查看效果，可以看到一个示例柱状图已经渲染出来了。
2.4.集成Axios
1.准备工作-RAP接口管理：在上述2.3步骤中虽然渲染出来柱状图了，但是里面的x轴、y轴数据都是固定写死的，在实际业务中数据一般是后端提供的，后端应用大致会经过：访问业务系统数据库、数仓或者其他数据源等查询数据->经过筛选、汇总、计算等逻辑处理->最终形成约定的数据格式以接口的形式提供给前端调用获取。当然，本专栏文章重点是介绍ECharts的使用，所以在这里以及后续章节所需的数据小编并未去创建后端应用封装接口，而是通用阿里巴巴的一个免费RAP接口管理平台（http://rap2.taobao.org/）来模拟后端数据接口，该工具使用比较简单（注册账号->登录后创建仓库->在仓库下创建接口->编辑模拟响应数据）。此处，小编模拟一个各市区分公司产品销量的数据接口，效果如下：
2.VSCode中，新建终端，运行指令下载axios依赖，下载完成后可以看到package.json中相关依赖信息。
npm install axios --save
2.修改main.js入口文件信息，引入axios并挂载到vue原型上，后续使用时可以直接用 this.$axios。
import axios from "axios"
Vue.prototype.$axios = axios
3.修改上述的自定义组件ChartBar.vue：在初始化页面完成后先通过axios请求接口数据回来，然后在通过echarts.init方法初始化一个echarts实例并通过setOption方法加载配置项和请求回来的数据渲染柱状图，具体代码如下：
<template>
<div class="chartDiv" id="chartBarOne"></div>
</template>
<script>
export default {
data() {
return {
chartData: {},
}
},
name: 'ChartBar',
mounted() {
this.getChartData().then(() => {
// 数据请求到后渲染图表
this.renderChart()
})
},
methods: {
// 请求数据回来
async getChartData() {
this.chartData = await this.$axios({ url: 'http://rap2api.taobao.org/app/mock/308881/charts/sales' })
},
// 渲染图表
renderChart() {
let myChart = this.$echarts.init(document.getElementById('chartBarOne'))
let chartData = this.chartData
var option = {
tooltip: {},
legend: {
data: ['销量'],
},
xAxis: {
data: chartData.data.dept,
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: chartData.data.salesAmount,
},
],
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
},
},
}
</script>
<style scoped>
.chartDiv {
border: 1px solid;
height: 410px;
border-radius: 5px;
text-align: center;
}
</style>4. 启动项目，浏览器访问查看图表效果（图表渲染的是来源于后端接口请求的数据）。
5.在上述的请求接口数据的getChartData()方法中，接口地址url写的是全路径，后续涉及接口多了非常不方便，鉴于此可以设置基准请求路径：在main.js入口文件中配置axios基准路径。
3.小节总结
本小节记录了如何搭建Vue项目（2.x），集成ElementUI（对页面作简单布局），集成开源图表库Echarts（入门了解图表示例）、网络请求库Axios（配合RAP接口管理平台模拟请求后端接口数据）。
701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
