本文章篇幅略长,内容有点多,大佬可根据目录选择性查阅,新人可一步步来阅读。
1、 前言
1.1 业务场景
突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图,类似于数据可视化的方式。
本人之前从未接触过Echarts
,然后需要2周拿出成果,有点慌😂😂
1.2 业务分析
拿到需求看了一下。
支持用户名、密码登录,默认显示一个维度数据,然后点击可钻取进入第二维度数据,再点击进入第三维度数据展示。
大致估摸着。。。
系统搭建
vue-cli
vuex
记录登录信息
vue-router
路由跳转3个维度的页面,提取出共用的组件
各个组件开发
调节样式,增加UI
加入后台接口数据
优化显示
测试
上线
当然这不是要2周内,全做完。应该是完成步骤6。
相对于公司就我一个前端,没接触过Echarts
,有问题都没人讨论的情况下。。。
心里还是忍不住想吐槽一下😒😒😒
1.3 效果展示
这里列出了第一维度页面的样式。文字请无视,哈哈。
、2 、系统安装
吐槽归吐槽,活还是要干的。😎
因为本人最熟悉的还是vue,所以还是选择了用vue全家桶来做。这部分可参考 vue build
2.1 安装node环境
-
下载安装
node
环境,直接去官网下载即可 node.js
安装完后可在命令行运行node -v
npm -v
查看是否安装成功以及版本
2.2 安装Vue项目
2.2.1 安装vue
官方文档:vuejs
这里我们使用npm
的方式
-
npm i vue
2.2.2 安装Vue CLI
官方文档:vue CLI
-
npm i -g @vue/cli
安装之后,你就可以在命令行中访问 vue 命令。你可以用这个命令来查看其版本。vue -V
2.2.3 创建项目
这里安装的时候,注意将我们要使用的安装上。vuex
、vue-router
,其他可根据需要添加。
-
方法一
-
vue create hello-world
这里参照官方网站,有很详细的介绍。参照:vue create
-
方法二
使用图形化界面
-
vue ui
界面含中文,很好操作。参照:vue ui
2.2.4 安装插件
-
方法一
最直接也是推荐的 npm i xxx
这里介绍一下 -S -D -g
的区别
npm i -S xxx 文件写入dependencies,用于工程中开发时使用到的插件,会发布到生产环境如UI,JS等。
npm i -D xxx 文件写入devDependencies,用于工程支持类插件,不会发布到生产环境,如gulp等压缩打包工具。
npm i -g xxx 全局安装,如vue、ncu等。安装目录为:C:Users用户AppDataRoamingnpm
-
方法二
vue ui
图像化界面中包含了若干插件,可点击安装,但不一定是最新版本。
同时会在hello中引入。其他和方法一没区别。
2.3 安装Echarts
这里我们为了方便,使用了npm
全量引用,后期为了精简项目可单个引用。
-
npm i echarts -S
然后在main.js
中添加
这里建议提前自定义echarts
的样式,并引入到项目中。官方自定义地址:theme-builder
在页面中我们可以如下引用:var myChart = this.$echarts.init(document.getElementById("myid"),'temp')
myid
是我们要展示的echarts
的id
。
temp
是我们的自定义的样式,同时官方提供了几个样式例子,可以node_modules\echarts\theme
中找到。
2.4 安装element-ui
这里我们为了方便,使用了npm
全量引用,后期为了精简项目可单个引用。
-
npm i element-ui -S
然后在main.js
中添加
2.5 安装百度地图
一般vue使用百度地图有2种方式,
-
一种是像官网那样去应用。如:BMap
-
第二种是使用
vue-baidu-map
不管是哪一种都要去申请账号和密钥。申请地址为:百度地图密钥(ak)
这里我使用了第二种。vue-baidu-map文档
-
npm i vue-baidu-map -S
然后在main.js
中添加。
xxxxxxxx
这里填写自己申请的密钥。
在页面中,参照文档,可使用标签<baidu-map/>
来调用。
2.6 初始化样式
css
样式初始化,简单来说就是为了各个浏览器能统一什么的。
这里我使用的是 normalize.css
下载下来后,在main.js
中添加
基本上的准备工作都做好了,接下来就是具体的代码了。
3 、项目搭建
3.1 router、vuex
我这里新建了一个router.js
、store.js
,大致如下:
哦哈,这里路由定义是为了方便看哈,具体还是根据业务来定义。
这里的router.beforeEach
路由卫士用于是否登录校验。
然后我们在main.js
中来引用。
更多请参考官方文档:Vue Router Vuex
3.2 Login页面
登录页面没啥,就是个form提交,由于路由中判断user.id
。所以我们储存一下,然后跳转到Index页面就行。
这里只是一种方式,也可以使用Cookie
和Session
3.3 Index页面
分析页面分成了2个大部分
-
第一部分是 头部
-
第二部门是 主体
我们将头部当做一个组件进行复用。
组件的复用可参考官方文档:https://cn.vuejs.org/v2/guide...
3.4 header页面
头部比较简单,除了一些显示外,还有一个显示当前时间。
这里我们使用了setInterval
,每隔1秒去获取一下当前时间赋值给你定义的v-model
就行。
同时在离开页面时,我们清理掉定时器。
这里需要我们对Vue
的生命周期有一定的了解。
获取当前时间的方法可参考:data-module.js
3.5 主体页面
这里分析一下页面,主要分成了3块。
-
左边,包含了2个折线图。
-
中间,包含了数字和地图。
-
右边,包含了柱状图和表格。
接下来主要介绍一下,自己这2周摸索出来的一些Echarts
配置,适合新手,大佬轻喷。
这里需要经常翻阅 Echarts配置项 和 API 了
3.5.1 Echarts基本
这里列出基本的渲染写法,具体的图形和数据只要修改option
就可以了。
<template>
<div id="myecharts" class="myecharts">
</template>
<script>
export default {
mounted(){
this.drawECharts()
},
methods:{
drawECharts(){
// temp 是我们的自定义样式,上面安装Echarts时有介绍
var myChart = this.$echarts.init(document.getElementById("myecharts"),'temp')
var option = {}
option = {
// 吧啦吧啦 一堆配置
}
// 执行渲染图形和数据的操作
if (option && typeof option === "object") {
myChart.setOption(option, true)
}
}
}
}
</script>
<style>
// 一定要设置大小,不然不出来,这玩意和canvas一样
.myecharts{
width : 500px;
height : 300px;
}
</style>
3.5.2 线形图
多多实践,就会发现每个配置和其参数的作用了。
option = {
// 提示框(就是鼠标放上去后出现的框)
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
// 右上角的组件,用于说明,也可进行点击筛选
legend: {
align : 'right',
x : 'right',
top : 25,
selectedMode : 'single', // 我这里设置的单选模式
data:['好','坏'] // 显示的第一项和第二项,这里的颜色是根据自定义主题的颜色顺序来定的
},
// x、y轴显示一些设置,比如刻度颜色显示什么的,可在自定义主题设置一部分
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
// 具体配置项,根据具体项目查看官网配置项说明
series: [
{
name : '好',
data: [150, 132, 201, 534, 290, 530, 820],
type: 'line',
smooth: true, // 是否平滑曲线
areaStyle: {},
},
{
name : '坏',
data: [82, 93, 90, 93, 129, 333, 432],
type: 'line',
smooth: true,
areaStyle: {},
}
]
}
// 查看Echarts的API,我们需要显示默认的一些数据,配置如下
// 默认显示坏的数据
myChart.dispatchAction({
type: 'legendSelect',
name: '坏',
})
// 默认显示第7个数据
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: 6,
})
预览: