前真个学习，不能仅仅依赖知识点的学习，实战项目的操作可以帮助我们整理知识点以及提高编程能力，更有助于学习和实践，最主要的是提高自己的项目履历，对付找事情而言有着大大的帮助。
作者存心之作，请动动你可爱的小手点亮大拇指。你的鼓励是作者连续创作的动力...
阅读本篇文章之前，可以先看看上一篇分享的内容，紧张讲大数据可视化的由来，与前真个渊源，主题风格设计，选择比较盛行的可视化第三方库。
”
一个基于Vue前端框架和第三方图表库Echarts构建的可视化大数据平台，通过vue项目构建、指令的灵巧利用、组件封装、组件之间通信，使内部图表组件库可实现自由更换和组合。以及一些功能模块的设计及代码实现。
老规矩先上效果图（可视化酷屏展示公司品牌），后面会讲这个实例。
线上体验：jackchen0120.github.io/vueDataV/#/…
下面接着连续分享上一篇未讲完的内容。
自定义全局模态框先看效果图：
自定义模态框已注册全局小组件在/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; // 设置默认字体大小，默认的字体大小继续自body function 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 / 24 function 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中有hairlines if (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);复制代码
设计稿尺寸是1920px1080px，以是将屏幕分成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利用五部曲1. 本项目采取cdn引入echarts.js文件（图表依赖这个js库）
index.html引入cdn
vue.config.js配置webpack
2. 准备一个具备大小的容器（天生的图表会放入这个容器内）
<div class="chart" id="chart" style="width: 480px; height: 240px;"></div>复制代码3. 初始化echarts实例工具（实例化echarts工具）
let myChart = echarts.init(document.getElementById('chart'));复制代码4. 指定配置项和数据 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 }]};复制代码5. 将配置项设置给echarts实例工具（让echarts工具根据修恰好的配置生效）
myChart.setOption(option);// 让图表跟随屏幕自适应window.addEventListener("resize", () => { myChart.resize();});复制代码2）理解echarts根本配置
如需理解更多，请移步到Echarts官网查看干系文档。
3）制作柱状图图表一样平常直接去echarts官网查找类似实例，适当剖析，并且引入到页面中，再根据需求定制图表。官方实例地址：echarts.apache.org/examples/zh…
比如上图的效果是如何实现的呢？
作者悄悄地见告你，实在有个很大略的方法，直接在Echarts社区查找，由于社区有很多生动的Echarts利用者，常常贡献一些非常棒的图表示例。
本项目参考实例地址：gallery.echartsjs.com/editor.html…，经由修正调度，终极呈现的效果如上图。已封装注册全局小组件，源代码在/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
作者：
