（下）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: {
   
		confi