Vue2+datav实现大屏可视化

目录

main.js：

flexible.js：

_variables.scss：

style.scss：

index.scss:（这个内容就是根据具体项目而来了）

common/echart/index.vue:

utils/resizeMixins.js:

utils/index.js:

app.vue:

router/index.js:

components/card.vue:

components/bottomLeftChart/chart.vue:

components/bottomLeftChart/index.vue:

views/bottomLeft.vue：

views/index.vue：

---

 效果图：

主要参考项目：vue-big-screen: 🔥一个基于 vue、datav、Echart 框架的大数据可视化（大屏展示）模板，提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能，持续更新....

DataV官网：DataV

chart官网：实例 | Charts

echarts主题下载：主题编辑器 - Apache ECharts

好看的echarts图表：https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all

推荐文章：

• 大数据平台展示可视化效果，echarts图表实战项目(源码50套)_Crazy程序猿2020的博客-CSDN博客_大数据可视化源码（大数据平台展示可视化效果，echarts图表实战项目(源码50套)）
• （上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）_懒人码农的博客-CSDN博客_vue大数据可视化框架（（上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码））
• （下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）_懒人码农的博客-CSDN博客（（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码））

推荐在线演示项目：

• vueDatav
• vueDatav
• DATAV-DEMO
• DATAV-DEMO
• DATAV-DEMO

首先在这里（vue_base: 包含element-ui ,axios,qs）把vue基础项目下载下来

然后再执行以下安装插件：

cnpm i -S dayjs echart@4.9.0 vue-awesome @jiaminghi/data-view

结构目录：

main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

//全局注册axios
import http from '@/api/axios.js'
Vue.prototype.$axios = http

import dataV from '@jiaminghi/data-view';
Vue.use(dataV);

// 按需引入vue-awesome图标
import Icon from 'vue-awesome/components/Icon';
import 'vue-awesome/icons/chart-bar.js';
import 'vue-awesome/icons/chart-area.js';
import 'vue-awesome/icons/chart-pie.js';
import 'vue-awesome/icons/chart-line.js';
import 'vue-awesome/icons/align-left.js';

// 全局注册图标
Vue.component('icon', Icon);

import dayjs from "dayjs"
Vue.prototype.$dayjs = dayjs;

// 适配flex
import '@/common/flexible.js';

//引入echart
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 引入全局css
import './assets/scss/style.scss';

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

flexible.js：

注意里面的refreshRem()函数，这里是已经修改过了的）

(function(win, lib) {
  var doc = win.document;
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var flexibleEl = doc.querySelector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});

  if (metaEl) {
    console.warn("将根据已有的meta标签来设置缩放比例");
    var match = metaEl
      .getAttribute("content")
      // eslint-disable-next-line no-useless-escape
      .match(/initial\-scale=([\d\.]+)/);
    if (match) {
      scale = parseFloat(match[1]);
      dpr = parseInt(1 / scale);
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute("content");
    if (content) {
      // eslint-disable-next-line no-useless-escape
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
      // eslint-disable-next-line no-useless-escape
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
      }
    }
  }

  if (!dpr && !scale) {
    // eslint-disable-next-line no-unused-vars
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他设备下，仍旧使用1倍的方案
      dpr = 1;
    }
    scale = 1 / dpr;
  }

  docEl.setAttribute("data-dpr", dpr);
  if (!metaEl) {
    metaEl = doc.createElement("meta");
    metaEl.setAttribute("name", "viewport");
    metaEl.setAttribute(
      "content",
      "initial-scale=" +
        scale +
        ", maximum-scale=" +
        scale +
        ", minimum-scale=" +
        scale +
        ", user-scalable=no"
    );
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement("div");
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    // 最小1366px，最大适配2560px
    if (width / dpr < 1366) {
      width = 1366 * dpr;
    } else if (width / dpr > 2560) {
      width = 2560 * dpr;
    }
    // 设置成24等份，设计稿时1920px的，这样1rem就是80px
    var rem = width / 24;
    docEl.style.fontSize = rem + "px";
    flexible.rem = win.rem = rem;
  }

  win.addEventListener(
    "resize",
    function() {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    },
    false
  );
  win.addEventListener(
    "pageshow",
    function(e) {
      if (e.persisted) {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
      }
    },
    false
  );

  if (doc.readyState === "complete") {
    doc.body.style.fontSize = 12 * dpr + "px";
  } else {
    doc.addEventListener(
      "DOMContentLoaded",
      // eslint-disable-next-line no-unused-vars
      function(e) {
        doc.body.style.fontSize = 12 * dpr + "px";
      },
      false
    );
  }

  refreshRem();

  flexible.dpr = win.dpr = dpr;
  flexible.refreshRem = refreshRem;
  flexible.rem2px = function(d) {
    var val = parseFloat(d) * this.rem;
    if (typeof d === "string" && d.match(/rem$/)) {
      val += "px";
    }
    return val;
  };
  flexible.px2rem = function(d) {
    var val = parseFloat(d) / this.rem;
    if (typeof d === "string" && d.match(/px$/)) {
      val += "rem";
    }
    return val;
  };
})(window, window["lib"] || (window["lib"] = {}));

_variables.scss：

// 颜色
$colors: ( "primary": #db9e3f, "info-1": #4394e4, "info": #4b67af, "white": #ffffff, "light": #f9f9f9, "grey-1": #999999, "grey": #666666, "dark-1": #5f5f5f, "dark": #222222, "black-1": #171823, "black": #000000, );
// 字体大小
$base-font-size: 0.2rem;
$font-sizes: ( sm: 0.7, md: 0.8, lg: 0.9, xl: 1, xxl: 2, xxxl: 3);
// 宽高
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

//flex
.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

$flex-jc: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly);
$flex-ai: ( start: flex-start, end: flex-end, center: center, stretch: stretch, );
.flex-1 {
    flex: 1;
}

//.mt-1 => margin top
//spacing
$spacing-types: ( m: margin, p: padding, );
$spacing-directions: ( t: top, r: right, b: bottom, l: left, );
$spacing-base-size: 0.2rem;
$spacing-sizes: ( 0: 0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 3, );

style.scss：

@import "./variables";
//  全局样式
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
    outline: none;
}

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
}

a {
    color: #343440;
    text-decoration: none;
}

.clearfix {
    &::after {
        content: "";
        display: table;
        height: 0;
        line-height: 0;
        visibility: hidden;
        clear: both;
    }
}

//浮动
.float-r {
    float: right;
}

//浮动
.float-l {
    float: left;
}

// 字体加粗
.fw-b {
    font-weight: bold;
}

//icon颜色
.icon-color {
    color: #5cd9e8
}

//文章一行显示，多余省略号显示
.title-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-color-black {
    background-color: rgba(19, 25, 47, 0.6);
}

.bg-color-blue {
    background-color: #1a5cd7;
}

.colorBlack {
    color: #272727 !important;
    &:hover {
        color: #272727 !important;
    }
}

.colorGrass {
    color: #33cea0;
    &:hover {
        color: #33cea0 !important;
    }
}

.colorRed {
    color: #ff5722;
    &:hover {
        color: #ff5722 !important;
    }
}

.colorYellowOrange {
    color: #ffc107;
    &:hover {
        color: #ffc107 !important;
    }
}

.colorYellowGreen {
    color: yellowgreen;
    &:hover {
        color: yellowgreen !important;
    }
}

.colorText {
    color: #d3d6dd !important;
    &:hover {
        color: #d3d6dd !important;
    }
}

.colorBlue {
    color: #257dff !important;
    &:hover {
        color: #257dff !important;
    }
}

// $colors: ( "primary": #db9e3f, "info-1": #4394e4, "info": #4b67af, "white": #ffffff, "light": #f9f9f9, "grey-1": #999999, "grey": #666666, "dark-1": #5f5f5f, "dark": #222222, "black-1": #171823, "black": #000000, );
//颜色
@each $colorkey,
$color in $colors {
    .text-#{$colorkey} {
        color: $color;
    }
    .bg-#{$colorkey} {
        background-color: $color;
    }
}

//对齐
@each $var in (left, center, right) {
    .text-#{$var} {
        text-align: $var !important;
    }
}

//flex
@each $key,
$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
    // 效果如下：
    // .jc-start{
    //     justify-content: start;//start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly
    // }
}

@each $key,
$value in $flex-ai {
    .ai-#{$key} {
        align-items: $value;
    }
    // 效果如下：
    // .ai-start{
    //     align-items: start; //start|center|end|stretch
    // }
}

//字体
@each $fontkey,
$fontvalue in $font-sizes {
    .fs-#{$fontkey} {
        font-size: $fontvalue * $base-font-size;
    }
    // 效果如下：
    // .fs-sm{
    //     font-size: 0.7*0.2rem; //sm: 0.7, md: 0.8, lg: 0.9, xl: 1, xxl: 2, xxxl: 3
    // }
}

// $spacing-types: (
//   m: margin,
//   p: padding,
// );
// $spacing-directions: (
//   t: top,
//   r: right,
//   b: bottom,
//   l: left,
// );
// $spacing-base-size: 0.2rem;
// $spacing-sizes: (
//   0: 0,
//   1: 0.25,
//   2: 0.5,
//   3: 1,
//   4: 1.5,
//   5: 3,
// );
@each $typekey,
$type in $spacing-types {
    //.m-1
    @each $sizekey,
    $size in $spacing-sizes {
        .#{$typekey}-#{$sizekey} {
            #{$type}: $size * $spacing-base-size;
        }
        //效果如下：
        // .m-2{
        //     margin: 0.5*0.2rem;
        // }
    }
    //.mx-1
    @each $sizekey,
    $size in $spacing-sizes {
        .#{$typekey}x-#{$sizekey} {
            #{$type}-left: $size * $spacing-base-size;
            #{$type}-right: $size * $spacing-base-size;
        }
        .#{$typekey}y-#{$sizekey} {
            #{$type}-top: $size * $spacing-base-size;
            #{$type}-bottom: $size * $spacing-base-size;
        }
        //效果如下：
        // .mx-2{
        //     margin-left: 0.5*0.2rem;
        //     margin-right: 0.5*0.2rem;
        // }
    }
    //.mt-1
    @each $directionkey,
    $direction in $spacing-directions {
        @each $sizekey,
        $size in $spacing-sizes {
            .#{$typekey}#{$directionkey}-#{$sizekey} {
                #{$type}-#{$direction}: $size * $spacing-base-size;
            }
            //如下效果：
            // .mt-2{
            //     margin-top:0.5*0.2rem ;
            // }
        }
    }
    .#{$typekey} {
        #{$type}: 0;
    }
    //效果如下：
    // .m{
    //     margin: 0;
    // }
}

index.scss:（这个内容就是根据具体项目而来了）

#index {
    color: #d3d6dd;
    background-color: #000000;
    width: 100%;
    height: 100%;
    .bg {
        padding: 0.2rem 0.2rem 0 0.2rem;
        background-image: url("../assets/pageBg.png");
        background-size: cover;
        background-position: center center;
    }
    .host-body {
        .title {
            position: relative;
            width: 6.25rem;
            text-align: center;
            background-size: cover;
            background-repeat: no-repeat;
            .title-text {
                font-size: 0.3rem;
                position: relative;
                top: 0.4rem;
            }
            .title-bototm {
                position: relative;
                left: 50%;
                bottom: -0.575rem;
                transform: translate(-50%);
            }
        }
        .react-left {
            cursor: pointer;
            font-size: 0.225rem;
            width: 6.25rem;
            height: 0.625rem;
            line-height: 0.625rem;
            text-align: center;
            transform: skewX(45deg);
            background-color: #0f1325;
            .react-before {
                position: absolute;
                left: -0.3125rem;
                top: 0;
                height: 0.625rem;
                width: 0.625rem;
                background-color: #0f1325;
                transform: skewX(-45deg);
            }
            .text {
                display: inline-block;
                transform: skewX(-45deg);
            }
        }
        .react-right {
            cursor: pointer;
            font-size: 0.225rem;
            width: 6.25rem;
            height: 0.625rem;
            line-height: 0.625rem;
            text-align: center;
            transform: skewX(-45deg);
            background-color: #0f1325;
            .react-after {
                position: absolute;
                right: -0.3125rem;
                top: 0;
                height: 0.625rem;
                width: 0.625rem;
                background-color: #0f1325;
                transform: skewX(45deg);
            }
            .text {
                display: inline-block;
                transform: skewX(45deg);
            }
        }
        .body-box {
            margin-top: 0.2rem;
            //下方区域的布局 
            .content-box {
                display: grid;
                grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
            }
            // 底部数据
            .bottom-box {
                margin-top: 0.125rem;
                display: flex;
            }
        }
    }
}

common/echart/index.vue:

<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import tdTheme from './theme.json' // 引入默认主题
import resizeMixins from "@/utils/resizeMixins";

export default {
  name: 'echart',
  mixins: [resizeMixins],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '2.5rem'
    },
    options: {
      type: Object,
      default: ()=>({})
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    options: {
      handler (options) {
        // 设置true清空echart缓存
        this.chart.setOption(options, true)
      },
      deep: true
    }
  },
  mounted () {
    this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
    this.initChart();
  },
  methods: {
    initChart () {
      // 初始化echart
      this.chart = this.$echarts.init(this.$el, 'tdTheme')
      this.chart.setOption(this.options, true)
    }
  }
}
</script>

<style>
</style>

utils/resizeMixins.js:

// 混入代码 resize-mixins.js
import { debounce } from '@/utils';
const resizeChartMethod = '$__resizeChartMethod';

export default {
    data() {
        // 在组件内部将图表 init 的引用映射到 chart 属性上
        return {
            chart: null,
        };
    },
    created() {
        window.addEventListener('resize', this[resizeChartMethod], false);
    },
    activated() {
        // 防止 keep-alive 之后图表变形
        if (this.chart) {
            this.chart.resize()
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this[resizeChartMethod]);
    },
    methods: {
        // 防抖函数来控制 resize 的频率
        [resizeChartMethod]: debounce(function() {
            if (this.chart) {
                this.chart.resize();
            }
        }, 300)
    },
};

utils/index.js:

/**
 * @param {Function} fn 防抖函数
 * @param {Number} delay 延迟时间
 */
export function debounce(fn, delay) {
    var timer;
    return function() {
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    };
}

app.vue:

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

router/index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'index',
    component: () =>
        import ('@/views/index.vue')
}]
const router = new VueRouter({
    mode: "history",
    routes
})

export default router

components/card.vue:

<template>
  <div class="card">
    <div class="background" :style="{height:bgHeight}">
      <div class="d-flex pt-2 pl-2">
        <span class="icon-color">
          <slot name="icon">
              <icon name="chart-pie"></icon>
          </slot>
        </span>
        <div class="d-flex">
          <span class="fs-md colorText mx-2">{{title}}</span>
           <div  style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;">
             <slot name="decoration">
                 <!-- <dv-decoration-1/> -->
             </slot>
          </div>
        </div>
      </div>
      <div>
        <slot name="content">
            内容区域
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props:{
    title:{
        type:String,
        default:"title"
    },
    bgHeight:{
      type: String,
      default:"4.8125rem"
    }
  },
  components: {
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss">
.card {
  padding: 0.2rem;
  height: 5.125rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .background {
    border-radius: 0.125rem;
    background-color: rgba(19, 25, 47, 0.6);
  }
}
</style>

components/bottomLeftChart/chart.vue:

<template>
  <div>
    <Echart
      :options="options"
      id="bottomLeftChart"
      height="6.2rem"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
          title: {
            text: "",
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            }
          },
          legend: {
            data: ["已贯通", "计划贯通", "贯通率"],
            textStyle: {
              color: "#B4B4B4"
            },
            top: "0%"
          },
          grid: {
            x: "8%",
            width: "88%",
            y: "4%"
          },
          xAxis: {
            data: newData.category,
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },

              axisLabel: {
                formatter: "{value} "
              }
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisLabel: {
                formatter: "{value} "
              }
            }
          ],
          series: [
            {
              name: "贯通率",
              type: "line",
              smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: "#F02FC2"
                }
              },
              data: newData.rateData
            },
            {
              name: "已贯通",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#956FD4" },
                    { offset: 1, color: "#3EACE5" }
                  ])
                }
              },
              data: newData.barData
            },
            {
              name: "计划贯通",
              type: "bar",
              barGap: "-100%",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(156,107,211,0.8)" },
                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                    { offset: 1, color: "rgba(156,107,211,0.2)" }
                  ])
                }
              },
              z: -12,
              data: newData.lineData
            }
          ]
        }
      },
      immediate: true,
      deep: true
    },
  },
}
</script>

components/bottomLeftChart/index.vue:

<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  data () {
    return {
      cdata: {
        category: [
          "市区",
          "万州",
          "江北",
          "南岸",
          "北碚",
          "綦南",
          "长寿",
          "永川",
          "璧山",
          "江津",
          "城口",
          "大足",
          "垫江",
          "丰都",
          "奉节",
          "合川",
          "江津区",
          "开州",
          "南川",
          "彭水",
          "黔江",
          "石柱",
          "铜梁",
          "潼南",
          "巫山",
          "巫溪",
          "武隆",
          "秀山",
          "酉阳",
          "云阳",
          "忠县",
          "川东",
          "检修"
        ],
        lineData: [
          18092,
          20728,
          24045,
          28348,
          32808,
          36097,
          39867,
          44715,
          48444,
          50415,
          56061,
          62677,
          59521,
          67560,
          18092,
          20728,
          24045,
          28348,
          32808,
          36097,
          39867,
          44715,
          48444,
          50415,
          36097,
          39867,
          44715,
          48444,
          50415,
          50061,
          32677,
          49521,
          32808
        ],
        barData: [
          4600,
          5000,
          5500,
          6500,
          7500,
          8500,
          9900,
          12500,
          14000,
          21500,
          23200,
          24450,
          25250,
          33300,
          4600,
          5000,
          5500,
          6500,
          7500,
          8500,
          9900,
          22500,
          14000,
          21500,
          8500,
          9900,
          12500,
          14000,
          21500,
          23200,
          24450,
          25250,
          7500
        ],
        rateData: []
      }
    };
  },
  components: {
    Chart,
  },
  mounted () {
    this.setData();
  },
  methods: {
    // 根据自己的业务情况修改
    setData () {
      for (let i = 0; i < this.cdata.barData.length -1; i++) {
        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
        this.cdata.rateData.push(rate.toFixed(2));
      }
    },
  }
};
</script>

<style lang="scss" scoped>
</style>

views/bottomLeft.vue：

<template>
    <card id="bottomLeft" title="数据统计图" bgHeight="6.0625rem">
        <icon name="chart-bar" slot="icon"></icon>
        <dv-decoration-1 slot="decoration" />
        <div slot="content">
          <BottomLeftChart/>
        </div>
    </card>
</template>

<script>
import card from "@/components/card"
import BottomLeftChart from "@/components/bottomLeftChart";
export default {
  data() {
    return {
    };
  },
  components: {
    BottomLeftChart,
    card
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
#bottomLeft {
  padding: 0.3rem 0.2rem;
  height: 6.5rem;
}
</style>

views/index.vue：

<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 第一行 标题  -->
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
            <div class="title">
              <div class="title-text">大数据可视化平台</div>
              <dv-decoration-6
                class="title-bototm"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                style="width:3.125rem;height:.1rem;"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width:2.5rem;height:.625rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
        </div>

        <!-- 第二行 导航栏 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex" style="width: 40%;">
            <div class="react-left ml-4">
              <span class="react-before"></span>
              <span class="text">数据分析1</span>
            </div>
            <div class="react-left ml-3">
              <span class="text colorBlue">数据分析2</span>
            </div>
          </div>
          <div style="width: 40%" class="d-flex">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b">vue-big-screen</span>
            </div>
            <div class="react-right mr-4" >
              <span class="react-after"></span>
              <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
            </div>
          </div>
        </div>

        <dv-border-box-13 style="width:10rem">
              <bottomLeft />
         </dv-border-box-13>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import bottomLeft from "./bottomLeft";
export default {
  data () {
    return {
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      timer:null
    };
  },
  components: {
    bottomLeft,
  },
  mounted () {
    this.timer =setInterval(() => {
        const date=this.$dayjs(new Date())
        this.dateDay = date.format('HH:mm:ss');
        this.dateYear = date.format('YYYY-MM-DD');
        this.dateWeek = date.format(this.weekday[date.day()]);

      }, 1000)
    this.cancelLoading();
  },
  methods: {
    cancelLoading () {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  },
  beforeDestroy(){
    if(this.timer){
      clearInterval(this.timer)
    }
  }
};
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
</style>