Vue+Echarts构建可视化大数据平台实战项目（上篇）

│   vue.config.js // webpack配置
├─public
│   favicon.ico // ico图标
│   index.html // 入口html文件
└─src
│   App.vue // 根组件
│   main.js // 程序入口文件
├─assets
│ ├─iconfont // 引用阿里巴巴矢量图标库
│ ├─img // 存放公共图片文件夹
│ ├─js
│ │   utils.js // 封装工具类方法
│ └─styles
│ │   base.scss // 基础样式文件
│ │   common.scss // 公用样式文件
│ └─fonts // 字体库文件
├─components
│ │   index.js // 封装组件库
│ ├─bar3d // 3D立体柱状图
│ ├─bgAnimation // 登录界面背景图动画
│ ├─cakeLinkage // 柱饼组合联动
│ ├─circleNesting // 圆环套圆环
│ ├─circleRunway // 环形跑道图
│ ├─colorfulArea // 多彩轮播面积
│ ├─colorfulRadar // 多彩雷达
│ ├─dynamicLine // 动态轮播折线图
│ ├─dynamicList // 动态列表动画
│ ├─flashCloud // 闪动云
│ ├─gauge // 仪表盘
│ ├─modal // 自定义全局模态框
│ ├─pyramid // 金字塔动画
│ ├─pyramidTrend // 金字塔趋势
│ ├─rainbow // 彩虹轨道图
│ ├─ringPie // 环形饼图
│ ├─ringPin // 环形气泡图
│ ├─rotateColorful // 旋转多彩图
│ ├─scanRadius // 扫描半径图
│ ├─scrollArc // 滚动弧形线
│ ├─seamless // 新闻无缝滚动
│ ├─sinan // 司南排名图
│ ├─staffMix // 人员占比
│ ├─szBar // 双轴柱状图
│ ├─toast
│ │   index.js // 注册全局消息提示框组件
│ │   index.vue // 自定义消息提示框模板
│ └─waterPolo
│   index.vue // 水球图、水波图
├─router
│   index.js // 单页面路由注册组件
├─store
│   index.js // 状态管理仓库未使用到
└─views
    Home.vue // 酷屏首页统计图
    Login.vue // 登录界面

npm install -g @vue/cli
# 安装指定版本
npm install -g @vue/cli@3.11.0
# OR
yarn global add @vue/cli

vue - V

vue create woyouzhe
cd woyouzhe
npm run serve

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vueDataV/' : '/', // 部署生产环境和开发环境下的URL：可对当前环境进行区分
  lintOnSave: false, // 是否在代码保存时进行eslint检测
  productionSourceMap: false, // 是否在构建生产包时生成sourceMap文件，false将提高构建速度
  devServer: {
    // webpack-dev-server 相关配置
    port: 8081, // 端口号
    hotOnly: false, // 取消热更新
    // proxy: { // 使用代理
    //   '/api': {
    //      target: '//api.github.com', // 目标代理服务器地址
    //     changeOrigin: true, // 允许跨域
    //     pathRewrite:{
    //       '^/api': '' // 重写路径，需要设置重写的话，要在后面的调用接口前加上/api来代替target
    //     }
    //   }
    // }
  },
  configureWebpack: {
    // 把原本需要写在webpack.config.js中的配置代码 写在这里 会自动合并
    externals: {
      jquery: '$',
      echarts: 'echarts',
      axios: 'axios',
    },
  },
}

<template>
  <ul class="slide-box">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</template>

<script>
  export default {
    name: 'bgAnimation',
  }
</script>

<style lang="scss">
  .slide-box {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 134, 179, 0.5);
    top: 0;
    left: 0;
    z-index: 0;
    li {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      color: transparent;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: none;
      opacity: 0;
      z-index: 0;
      -webkit-backface-visibility: hidden;
      -webkit-animation: imgAnimation 48s linear infinite 0s;
      -moz-animation: imgAnimation 48s linear infinite 0s;
      -o-animation: imgAnimation 48s linear infinite 0s;
      -ms-animation: imgAnimation 48s linear infinite 0s;
      animation: imgAnimation 48s linear infinite 0s;

      &:nth-child(1) {
        background-image: url(../../assets/img/bg-4.jpg);
      }
      &:nth-child(2) {
        background-image: url(../../assets/img/bg-5.jpg);
        -webkit-animation-delay: 12s;
        -moz-animation-delay: 12s;
        -o-animation-delay: 12s;
        -ms-animation-delay: 12s;
        animation-delay: 12s;
      }
      &:nth-child(3) {
        background-image: url(../../assets/img/bg-2.jpg);
        -webkit-animation-delay: 24s;
        -moz-animation-delay: 24s;
        -o-animation-delay: 24s;
        -ms-animation-delay: 24s;
        animation-delay: 24s;
      }
      &:nth-child(4) {
        background-image: url(../../assets/img/bg-4.jpg);
        animation-delay: 36s;
      }
    }
  }
  @-webkit-keyframes imgAnimation {
    0% {
      opacity: 0;
      -webkit-animation-timing-function: ease-in;
    }
    8% {
      opacity: 1;
      -webkit-transform: scale(1.1);
      -webkit-animation-timing-function: ease-out;
    }
    17% {
      opacity: 1;
      -webkit-transform: scale(1.2);
    }
    25% {
      opacity: 0;
      -webkit-transform: scale(1.3);
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes imgAnimation {
    0% {
      opacity: 0;
      animation-timing-function: ease-in;
    }
    8% {
      opacity: 1;
      transform: scale(1.1);
      animation-timing-function: ease-out;
    }
    17% {
      opacity: 1;
      transform: scale(1.2);
    }
    25% {
      opacity: 0;
      transform: scale(1.3);
    }
    100% {
      opacity: 0;
    }
  }
</style>

<vue-particles
  color="#6495ED"
  :particleOpacity="0.7"
  :particlesNumber="80"
  shapeType="circle"
  :particleSize="4"
  linesColor="#6495ED"
  :linesWidth="1"
  :lineLinked="true"
  :lineOpacity="0.6"
  :linesDistance="150"
  :moveSpeed="3"
  :hoverEffect="true"
  hoverMode="grab"
  :clickEffect="true"
  clickMode="push"
>
</vue-particles>

<template>
  <transition name="fade">
    <div class="toast-container" v-if="visible">
      <div class="toast" :class="type">
        <div class="content">
          <i class="iconfont" :class="'icon-' + type"></i>
          <span>{{ content }}</span>
        </div>
        <i v-if="hasClose" class="iconfont icon-close close" @click="visible = false"></i>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'Toast',
    data() {
      return {
        content: '',
        time: 3000,
        visible: false,
        type: 'error', //四种类型：info, success, warning, error
        hasClose: false,
      }
    },
    mounted() {
      this.close()
    },
    methods: {
      close() {
        setTimeout(() => {
          this.visible = false
        }, this.time)
      },
    },
  }
</script>