(下)Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享(附源码)
回顾
作者用心写作,请动动你可爱的小手点亮大拇指
。你的鼓励是作者继续创作的动力…
前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要的是提高自己的项目经验,对于找工作而言有着大大的帮助。
阅读本篇文章之前,可以先看看上一篇分享的内容,主要讲大数据可视化的由来,与前端的渊源,主题风格设计,选择比较流行的可视化第三方库。
一个基于Vue前端框架和第三方图表库Echarts构建的可视化大数据平台,通过vue项目构建、指令的灵活运用、组件封装、组件之间通信,使内部图表组件库可实现自由替换和组合。以及一些功能模块的设计及代码实现。
老规矩先上效果图(可视化酷屏展示公司品牌),后面会讲这个实例。
线上体验:https://jackchen0120.github.io/vueDataV/#/brand
下面接着继续分享上一篇未讲完的内容。
自定义全局模态框
先看效果图:
自定义模态框已注册全局小组件在/components/modal目录文件,代码如下(含注解):
<template><transition name="fade"><div class="modal-backdrop" v-if="visible"><div class="modal"><div class="modal-header">{{ title }}<i class="iconfont icon-close close" @click="close"></i></div><div class="modal-body">{{ content }}</div><div class="modal-footer"><button type="button" class="btn-close" @click="close" v-if="showCancle">{{cancleText ? cancleText : '取消'}}</button><button type="button" class="btn-confirm" @click="confirm">{{confirmText ? confirmText : '确定'}}</button></div></div></div></transition>
</template><script>export default {name: 'Modal',props: {// modal标题title: {type: String,default: '提示'},// modal内容content: {type: String,default: ''},// 是否显示visible: {type: Boolean,default: false},// 是否显示取消按钮showCancle: {type: Boolean,default: true},// 确认按钮文字confirmText: {type: String,default: '确认'},// 取消按钮文字cancleText: {type: String,default: '取消'}},watch: {visible (curVal) {// 监听visible值的变化 console.log(curVal)}},methods: { // 关闭按钮事件close() {this.$emit('update:visible', false);},// 确定按钮事件confirm() {this.close();this.$emit('confirm');} }
}
</script>
在components/index.js目录文件中注册全局组件,如下图:
完整代码如下:
// 引入自定义全局模态框组件
import modal from './modal' const components = {modal,
};// install 是默认的方法。当外界在 Vue.use() 这个组件的时候,就会调用本身的 install 方法,同时传一个 Vue 这个类的参数。
const install = (Vue = {}) => {if (install.installed) return;Object.keys(components).forEach(component => {Vue.component(components[component].name, components[component]);});install.installed = true;
};install.installed = false;if (typeof window !== "undefined" && window.Vue) {install(window.Vue);install.installed = true;
}// 定义组件库和install对象
const Vcomp = {...components,install
};// 导出
export default Vcomp
在main.js中全局引用,如下图:
可在任意页面调用,代码如下:
<template><div class="page"><modal title="提示" :content="modalContent":visible.sync="visible" @confirm="confirm"></modal></div>
</template>export default {data() {return {visible: true, // 显示模态框modalContent: '这是一段自定义模态框消息'}},methods: {confirm() {this.visible = false;console.log('点击确定')}}
}
参数名 | 类型 | 说明 |
---|---|---|
visible | Boolean | 是否显示,默认false |
title | String | 标题 |
content | String | 内容 |
confirmText | String | 确认按钮文字,默认“确认” |
cancleText | String | 取消按钮文字,默认“取消” |
showCancle | Boolean | 是否显示,默认true |
update:visible | Boolean |
更新visible, 使用:visible.sync 实现动态绑定
|
数字滚动组件
推荐一款简单好用的数字滚动组件,vue-count-to
是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn。你可以设置 startVal 和 endVal,它会自动判断计数或倒计时。支持vue-ssr,vue-countTo参考于countUp.js。
- npm安装依赖
npm install -D vue-count-to
- 示例代码:
<template><countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template><script>import countTo from 'vue-count-to';export default {components: { countTo },data () {return {startVal: 0,endVal: 2020}}}
</script>
- 选项:
属性 | 描述 | 数据类型 | 默认值 |
---|---|---|---|
startVal | 开始值 | Number | 0 |
endVal | 结束值 | Number | 2020 |
duration | 持续时间,以毫秒为单位 | Number | 3000 |
autoplay | 自动播放 | Boolean | true |
decimals | 要显示的小数位数 | Number | 0 |
decimal | 十进制分割 | String | .(点) |
separator | 分隔符 | String | ,(逗号) |
prefix | 前缀 | String | ‘’(空字符串) |
suffix | 后缀 | String | ‘’(空字符串) |
useEasing | 使用缓和功能 | Boolean | true |
easingFn | 缓和回调 | Function | — |
*注意:当autoplay:true时,它将在startVal或endVal更改时自动启动
- 功能:
函数名 | 描述 |
---|---|
mountedCallback | 挂载以后返回回调 |
start | 开始计数 |
pause | 暂停计数 |
reset | 重置countTo |
首页动态列表组件显示的数据,就引用了数字滚动特效,如下图:
代码如下图:
如需查看完整源代码请移步到作者的github仓库
讲讲炫酷展示公司品牌实例
功能模块
- 天气和当前日期
- 自定义词云图
- 模拟飞机航线动效
- 自动切换tab选项卡
- 柱状图、饼图、折线图、南丁格玫瑰图
技术栈
- 基于 flexible.js + rem 智能大屏适配
之前首页大屏布局采用的是绝对定位,加上整体屏幕缩放进行适配(简单粗暴,不是很优雅
)。
现在推荐一种智能大屏适配方式,选用flexible.js是淘宝移动端自适应解决方案,源码含注解如下:
// 首先是一个立即执行函数,执行时传入的参数是window和document
(function flexible(window, document) {// 返回文档的root元素var docEl = document.documentElement; // 获取设备的dpr,即当前设置下物理像素与虚拟像素的比值var dpr = window.devicePixelRatio || 1; // 设置默认字体大小,默认的字体大小继承自bodyfunction setBodyFontSize() {if (document.body) {// 调整body标签的fontSize,fontSize = (12 * dpr) + 'px'document.body.style.fontSize = 12 * dpr + 'px';} else {document.addEventListener('DOMContentLoaded', setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 24function setRemUnit() {// 设置root元素的fontSize = 其clientWidth / 24 + 'px'var rem = docEl.clientWidth / 24;docEl.style.fontSize = rem + 'px';}setRemUnit();// 当页面展示或重新设置大小的时候,触发重新window.addEventListener('resize', setRemUnit);window.addEventListener('pageshow', function(e) {if (e.persisted) {setRemUnit();}});// 检测0.5px的支持,支持则root元素的class中有hairlinesif (dpr >= 2) {var fakeBody = document.createElement('body');var testElement = document.createElement('div');testElement.style.border = '.5px solid transparent';fakeBody.appendChild(testElement);docEl.appendChild(fakeBody);if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines');}docEl.removeChild(fakeBody);}
})(window, document);
设计稿尺寸是1920px*1080px,所以将屏幕分成24等份。
- sublime text 3 cssrem插件
// 先下载插件到本地
git clone https://github.com/flashlizi/cssrem
进入packages目录:Sublime Text -> Preferences -> Browse Packages… 如下图:
将下载到本地的cssrem目录复制到packges目录里,如下图:
然后重启Sublime Text,参数配置如下图:
如果小伙伴使用的vscode编辑器,也可以安装此插件,打开扩展,搜索cssrem,点击安装,如下图:
配置设置,如下图:
改完后重启,插件效果如图:
- Flex 布局
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。可以简便、完整、响应式地实现各种页面布局。这里推荐阮一峰老师的Flex布局教程。
动手之前,先来分析一下整个页面设计布局,整体布局分为上(头部模块)和下(主体模块),主体模块又分为左中右三部分。主体中间又分为上(数字滚动模块)和下(地图模块)。
头部布局样式采用的是定位position,主体模块column列容器,分三列,占比 3 : 5 : 3。主体代码如下:
<section class="mainbox"><div class="item left">flex: 3;</div><div class="item center">flex: 5;</div><div class="item right">flex: 3;</div>
</section>
.mainbox {min-width: 1024px;max-width: 1920px;padding: 0.125rem 0.125rem 0;display: flex;.item {flex: 3;&.center {flex: 5;margin: 0 0.125rem 0.1rem;overflow: hidden;}}
}
全屏设置背景图及头部布局样式,可以直接在/src/views/Brand.vue目录文件查看源代码。
补充说明头部有展示天气和当前时间,天气数据实时展示,通过axios的get方法调用第三方免费天气API接口,并且设置每小时获取一次最新数据。代码实现如下:
mounted() {this.getWeather();this.timer = setInterval(() => {this.getWeather();}, 1000 * 60 * 60)
},
methods: {getWeather() { // 第三方天气api接口axios.get('https://www.tianqiapi.com/api/', {params: {appid: '26148275',appsecret: '2id6H48Y',version: 'v6'}}).then(res => {if (res.data) {if (res.data.wea_img == 'xue') {this.imgSrc = require('../assets/img/brand/xue.png');} else if (res.data.wea_img == 'yin') {this.imgSrc = require('../assets/img/brand/yin.png');} else if (res.data.wea_img == 'yu' || res.data.wea_img == 'bingbao') {this.imgSrc = require('../assets/img/brand/yu.png');} else if (res.data.wea_img == 'yun') {this.imgSrc = require('../assets/img/brand/yun.png');} else if (res.data.wea_img == 'wu') {this.imgSrc = require('../assets/img/brand/wu.png');} else if (res.data.wea_img == 'shachen') {this.imgSrc = require('../assets/img/brand/shachen.png');} else if (res.data.wea_img == 'lei') {this.imgSrc = require('../assets/img/brand/lei.png');} else {this.imgSrc = require('../assets/img/brand/qing.png');}this.weatcherData = res.data;}}).catch(err => {console.log(err)})}
}
当前时间代码实现如下:
mounted() {this.nowTimes();
},
methods: {timeFormate(timeStamp) { //显示当前时间let newDate = new Date(timeStamp);let year = newDate.getFullYear();let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();let week = newDate.getDay();let weeks = ['日', '一', '二', '三', '四', '五', '六'];let getWeek = '星期' + weeks[week];this.week = getWeek;this.date = year + '.' + month + '.' + date;this.nowTime = hh + ':' + mm + ':' + ss;},nowTimes() {this.timeFormate(new Date());setInterval(this.nowTimes, 1000);this.clear();},clear() {clearInterval(this.nowTimes)this.nowTimes = null;},
}
- Echarts 图表和地图的基本使用
1)Echarts使用五部曲
- 本项目采用cdn引入echarts.js文件(图表依赖这个js库)
index.html引入cdn
vue.config.js配置webpack
- 准备一个具备大小的容器(生成的图表会放入这个容器内)
<div class="chart" id="chart" style="width: 480px; height: 240px;"></div>
- 初始化echarts实例对象(实例化echarts对象)
let myChart = echarts.init(document.getElementById('chart'));
- 指定配置项和数据 option(根据具体需求修改配置选项)
let option = {xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',areaStyle: {},smooth: true}]
};
- 将配置项设置给echarts实例对象(让echarts对象根据修改好的配置生效)
myChart.setOption(option);// 让图表跟随屏幕自适应
window.addEventListener("resize", () => {myChart.resize();
});
2)了解echarts基础配置
如需了解更多,请移步到Echarts官网查看相关文档。
3)制作柱状图图表
一般直接去echarts官网查找类似实例,适当分析,并且引入到页面中,再根据需求定制图表。官方实例地址:https://echarts.apache.org/examples/zh/index.html#chart-type-bar
比如上图的效果是如何实现的呢?
作者悄悄地告诉你,其实有个很简单的方法,直接在Echarts社区查找,因为社区有很多活跃的Echarts使用者,经常贡献一些非常棒的图表示例。
本项目参考实例地址:https://gallery.echartsjs.com/editor.html?c=xgqdKhn5c,经过修改调整,最终呈现的效果如上图。已封装注册全局小组件,源代码在/src/components/companySummary/business.vue目录文件,请自行查看。
4)Echarts map地图使用
也是参考社区例子:模拟飞机航线动效
实现步骤:
- 首先下载引入中国地图china.js文件(文件存放路径:/src/assets/js/china.js)
- 其次使用社区实例的配置即可,修改图例,标题,背景色,地图放大比例等达到你想要的效果。
这个例子是扩展案例,大家以后可以多看看社区里面的实例。
/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {html {font-size: 42px !important;}
}
@media screen and (min-width: 1920) {html {font-size: 80px !important;}
}
5)自定义词云图
先上效果图
上图效果,作者已封装注册全局小组件,源代码在/src/components/companySummary/wordCloud.vue目录文件,请自行查看。
首先下载echarts-wordcloud.min.js压缩文件(存放路径:/src/assets/js),并导入到wordCloud.vue模板文件中。代码如下:
<template><div class="word-container"> <div class="chart" id="chart_right1"></div></div>
</template><script>
import '@/assets/js/echarts-wordcloud.min'export default {name: "wordCloud",data() {return {timer: null}},mounted() {this.getEchartRight1();this.timer = setInterval(() => {this.getEchartRight1();}, 5000)},methods: {getEchartRight1() {let myChart = echarts.init(document.getElementById('chart_right1'));let option = {// tooltip: {// show: false// },series: [{type: 'wordCloud',gridSize: 1,sizeRange: [12, 50],rotationRange: [-90, 90],rotationStep: 45,shape: 'diamond',width: '90%',textPadding: 0,autoSize: {enable: true,minSize: 6},textStyle: {normal: {textBorderColor: 'rgba(255,255,255,0.3)',textBorderWidth: 1,color: () => {return 'rgb(' + [Math.round(Math.random() * 160),Math.round(Math.random() * 160),Math.round(Math.random() * 160)].join(',') + ')';}},emphasis: {fontSize: 20,// shadowBlur: 10,// shadowColor: 'rgba(255,255,255, .1)'}},data: [{name: '区块链',value: 810}, {name: '云计算',value: 520},{name: "人工智能",value: 928},{name: "大数据",value: 906},{name: "工业互联网",value: 825},{name: "医疗",value: 514},{name: "质量溯源",value: 486},{name: "政务",value: 53},{name: "密码学",value: 927},{name: "金融行业",value: 1308},{name: "供应链",value: 693},{name: "公有链",value: 611},{name: "私有链",value: 512},{name: "联盟链",value: 382},{name: "数据共享",value: 312},{name: "文创版权",value: 187},{name: "天河链",value: 163},{name: "数据存证",value: 104},{name: "UDFS存储",value: 3},{name: "在线教育",value: 31},{name: "关联分析",value: 941},{name: "智慧停车",value: 585},{name: "链云生态",value: 473},{name: "应用层",value: 358},{name: "网络层",value: 246},{name: "数据层",value: 207},{name: "基础层",value: 194},{name: "智能合约",value: 104},{name: "去中心化",value: 87},{name: "数字货币",value: 415},{name: "酷屏",value: 253},{name: "可视化",value: 211},{name: "P2P",value: 116},{name: "数据挖掘",value: 1309}]}]}myChart.setOption(option, true);window.addEventListener('resize', () => {myChart.resize();});},},beforeDestroy() {clearInterval(this.timer);}
};
</script>
参考配置说明:https://github.com/ecomfe/echarts-wordcloud
最后
如果感觉还不错的话,老铁们是不是来github里赏个★Star鼓励一哈。后续会持续更新和优化,也期待大家的交流。
阅读作者相关优质文章
- NodeJS全栈开发一个功能完善的Express项目(附完整源码)
- 基于vue-cli3 + axios 构建多页面应用H5移动端电商网站(上)
- 开发一款微信小程序的个性简历,能打开大厂之门并获得门票?(附源码)
- 2020值得收藏与学习280多款H5小游戏,从入门到彻底了解它(附源码
获取更多项目实战经验及各种源码资源,请关注作者公众号:懒人码农
(下)Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享(附源码)相关推荐
- echarts学习——(下)Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享(附源码)
一个基于Vue前端框架和第三方图表库Echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合.以及一些功能模块的设计及代码 ...
- vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台,酷炫大屏展示模板和组件库,持续更新各行各业实用模板和炫酷小组件。...
前言 一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...
- 数字孪生政务丨构建大数据可视化展现平台,提高行政服务效能
"全面推进政府履职和政务运行数字化转型,统筹推进各行业各领域政务应用系统集约建设.互联互通.协同联动,创新行政管理和服务方式,全面提升政府履职效能."--<国务院关于加强数字 ...
- python二手交易平台代码_PYTHON爬虫实战_垃圾佬闲鱼爬虫转转爬虫数据整合自用二手急速响应捡垃圾平台_3(附源码持续更新)...
说明 文章首发于HURUWO的博客小站,本平台做同步备份发布. 如有浏览或访问异常图片加载失败或者相关疑问可前往原博客下评论浏览. 原文链接 PYTHON爬虫实战_垃圾佬闲鱼爬虫转转爬虫数据整合自用二 ...
- 如何用Python对股票数据进行LSTM神经网络和XGboost机器学习预测分析(附源码和详细步骤),学会的小伙伴们说不定就成为炒股专家一夜暴富了
前言 最近调研了一下我做的项目受欢迎程度,大数据分析方向竟然排第一,尤其是这两年受疫情影响,大家都非常担心自家公司裁员或倒闭,都想着有没有其他副业搞搞或者炒炒股.投资点理财产品,未雨绸缪,所以不少小伙 ...
- Python数据爬取之0基础小白实战(三)源码解析
前两篇(一)软件安装.(二)初窥门槛我解决了软件版本不匹配的问题并学习关键技术.找到重要源码,完成了程序思路总体设计,本篇废话不多说,我们直接上源码. 任务描述 获取2015-2020年通过申请的国家 ...
- springboot项目文档源码_基于SpringBoot和Vue的企业级中后台项目(附源码)
简介 SpringBoot和Vue,前后端分离,我们开源一套漂亮的代码和一套整洁的代码规范,让大家在这浮躁的代码世界里感受到一股把代码写好的清流!同时又让开发者节省大量的时间,减少加班,快乐工作,热爱 ...
- 基于SpringBoot + Vue的小程序商城项目(附源码),支持分销、团购、秒杀、优惠券。。。...
前些时候一直有粉丝让我分享带分销的商城项目,网上收集了一波,希望能帮到大家. 面向对象 该程序是企业在创立初期很好的技术基础框架,加快公司项目开发进度,当然也可以对现有的系统进行升级: 个人开发者也可 ...
- 14款CSS3炫酷表单input输入框美化效果【附源码】
这是一款效果非常酷的CSS3表单input输入框美化效果插件.为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验.这个CSS3表单input输入框美化插件就是一个很好的例子.这个插件 ...
最新文章
- 如何判断强化学习训练是否在收敛?
- 修改注册表 为右键添加快捷命令
- 《精通J2EE网络编程》中讲的JNDI 6.2 使用JNDI
- 【luogu4408】 [NOI2003]逃学的小孩 [动态规划 树的直径]
- ARM:供给中国 160 亿颗芯片,继续授权华为!
- POJ 3471 Integral Roots(素数、因数)
- tp3.2设置php文件编码,thinkphp3.2版本url访问:总是走默认文件默认方法
- apache的站点安全1
- 代码管理学:对于重写,四种人的不同态度
- 基于python-scrapy框架的爬虫系统
- P问题、NP问题、NPC问题、NP-hard问题详解
- 有关CCF的CSP认证
- Chrome浏览器无法访问网页(移动硬盘)
- 避免侵权,你应该必备免费可商用的素材网站
- python编程语言进化_编程语言的进化史和分类
- 盘点招招毙命的29种USB攻击方式
- 图片分类-K近邻分类器
- React-Redux 学习,转载
- 转载:图像抠图算法学习 -Shared Sampling for Real-Time Alpha Matting
- 1118: 继续畅通工程
热门文章
- 服务器实现定时开关机
- 将 Maxthon 1.6.7 识别成“傲游云浏览器” 腾讯电脑管家现“神”升级功能
- 《极限特工》系列IP启动 系列新作将在中国取景
- 获取iOS设备WiFi名字和mac地址+iOS12系统获取失败解决
- css——扁平圆弧(底部弧度)
- 学游戏建模,选择电脑配置是不是带来很多烦恼,那应该怎么选呢?
- HandsFree 开源的移动机器人 开发平台
- 解职场困惑不必东奔西走,Leo这里应有尽有(更新至09年8月31日)——Leo文章索引...
- 安卓ROOT权限,挎包获取database数据app开发
- requestAnimationFrame实现canvas动画