Vue2+datav实现大屏可视化

已于 2022-12-01 20:39:19 修改
阅读量2.9k 收藏 19
点赞数
分类专栏： Vue2 文章标签： echarts vue.js 前端
于 2021-03-12 17:03:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/114700127
版权

目录

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

推荐文章：

推荐在线演示项目：

首先在这里（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>

疆~
关注
  • 0
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于echarts+datav+vue2实现的一个大屏可视化项目模版
03-02
其中包含 中国地图展示，地图二级下钻回钻功能，然后根据点击的省或市展示对应的name....。datav的组件。其中使用的插件 echarts datav elementui vue2的插件。并实时获取当前日期时间，精确到秒数。更有全屏组件功能，自适应组件功能。一款非常适用于各种大屏可视化项目所需要的功能
大屏可视化vue+dataV+echarts
06-03
大屏可视化vue+dataV+echarts
Vue大屏插件：Vue-Big-Screen-Plugin - 拓展你的Web可视化边界
gitblog_00090的博客
04-02 806
Vue大屏插件：Vue-Big-Screen-Plugin - 拓展你的Web可视化边界 项目地址:https://gitcode.com/L-noodle/vue-big-screen-plugin 项目简介 Vue-Big-Screen-Plugin 是一个专为Vue.js框架设计的组件库，它致力于帮助开发者轻松创建适用于大型显示器或壁挂屏幕的应用，如数据仪表盘、信息展示墙等。通过这个插件，你...
基于vue2+echarts+datav的大屏可视化模板源代码
09-14
基于vue2+echarts+datav的大屏可视化模板源代码
入门级的 DataV 教程，适用于 Vue 2
u011197085的博客
01-16 1981
入门级的 DataV 教程，适用于 Vue 2。这个教程将指导您创建一个名为的 Vue 项目，并展示如何在其中使用 DataV。我们将从安装 Vue CLI 开始，然后创建项目，接着添加 DataV，并最后显示一个简单的数据可视化组件。
基于 Vue3+Typescript+DataV+ECharts5的大数据可视化大屏系统（源码+说明文档）.rar
04-11
1、资源内容：基于 Vue3+Typescript+DataV+ECharts5的大数据可视化大屏系统（源码+说明文档）.rar 2、适用人群：计算机，电子信息工程、数学等专业的学习者，作为“参考资料”参考学习使用。 3、解压说明：本资源需要电脑端使用WinRAR、7zip等解压工具进行解压，没有解压工具的自行百度下载即可。 4、免责声明：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。不一定能够满足所有人的需求，需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。由于作者大厂工作较忙，不提供答疑服务，如不存在资源缺失问题概不负责，谢谢理解。
Vue 大屏数据展示模版
09-22
datav模版 内容概要：组件库基于Vue ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用，主要包含三个大屏demo案例。 适合人群：具备一定编程基础，组件库的开发和调试都使用Chrome浏览器 能学到什么： ①边框、装饰、图表和其他大屏控件等都是怎么在Vue中体现的； ②基于Vue的dataV 项目demo案例。 阅读建议：此资源提供dataV demo案例，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
Vue2使用Data-v可视化工具
qq_45871821的博客
07-24 1862
图表组件基于Charts(opens new window)封装，轻量，易用。// 将自动注册所有组件为全局组件。用来点缀页面效果，增加视觉效果。在Vue项目下进行组件库安装。2-2、这个是按需引入的引入。飞线图/水位图/轮播表/…
大屏可视化（VUE2 + DataV）
weixin_46058007的博客
08-03 3461
炫酷大屏展示，使用vue2结合dataV实现，代码可直接使用
vue2+datav可视化数据大屏（1）
热门推荐
m0_58002043的博客
12-07 2万+
📓 最近打算出一个前端可视化数据大屏的系列专栏，这次将很全面的教大家设计可视化大屏，从开始到打包结束，其中，包括如何设计框架，如何封装axios，等等，本次使用的数据均为moke数据。📓 首先确保电脑上安装node.js，node安装简单，去官网下载安装包一件安装即可，当安装了node.js后，我们新建一个文件夹，用vscode打开文件夹，打开终端，安装脚手架。📓在src文件夹下面，有个app.vue的入口文件，我们将这个文件处理下，将一些无语的代码删除，保留如下代码。
openlayers+vue大屏开发模板
weixin_52318785的博客
10-18 944
vue+openlayers大屏开发地图模板
jiaminghi/data-view dataV for vite vue2 windows补丁 for pnpm
02-11
官网直接安装的不支持vite+vue2的 主要修复： 1.build或者dev项目时不报错，兼容vite2，vue2； 2.加入deep监听watch，直接在父组件中修改图表中的config参数即可完成图表中的数据变更。 yarn npm cnpm pnpm可通用的，其实就是底层node_modules位置不一样而已，不过修改原理跟代码基本都是一直的，大家可以自行下载研究，windows macos linux均兼容。如果下载错了请私信我。 下面说下安装步骤： 1.在项目更目录中安装，执行pnpm install @jiaminghi/data-view即可； 2.https://github.com/jiaming743/Color查看最新的color版本号，压缩包里版本号未1.1.3，如果不是，这替换.pnpm下@jiaminghi+color@1.1.3文件夹名称，改为最新版本号。 3.将other_modules压缩包解压并覆盖到项目的node_modules文件夹下即可 调用方法，请参考官网文档http://datav.jiaminghi.com/
vue+echarts+DataV数据可视化系统源码.zip
06-08
vue+echarts+DataV数据可视化系统源码.zip
基于Vue2的响应式大屏数据可视化项目源码.zip
08-10
基于Vue2的响应式大屏数据可视化项目源码.zip 基于Vue2的响应式大屏数据可视化项目源码.zip 基于Vue2的响应式大屏数据可视化项目源码.zip 1、该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心...
基于Vue的数据可视化大屏设计源码
最新发布
04-15
基于Vue的数据可视化大屏设计源码，该项目包含52个文件，主要文件类型有36个json配置文件，以及8个vue前端...该项目是一个基于Vue的数据可视化大屏设计源码，可能涉及用户界面设计、应用逻辑实现、数据存储等多个方面。
超炫20套vue_react+echarts 大屏可视化数据平台实战项目分享 (附源码).zip
01-08
一个基于 Vue、Datav、Echart 框架的 " 数据大屏项目 "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。 项目需要全屏展示...
一个基于Vue+datav+Echart框架的大数据可视化(大屏展示)模板源码+项目使用说明.zip
12-27
一个基于Vue+datav+Echart框架的大数据可视化(大屏展示)模板源码+项目使用说明.zip 【主要文件介绍】 文件 作用/功能 main.js 主目录文件，引入 Echart/DataV 等文件 utils 工具函数与 mixins 函数等 views/ home....
初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化
肖永威的专栏
11-04 5492
初步整合vue-element-admin和GitDataV两个Vue开源框架方案，实现满足大数据可视化业务需求。
vue+echarts+datav实现的数据可视化项目模板（封装公共组件）
qq_53742640的博客
06-30 1236
基于vue2,echarts(5.0.0),datav实现的大屏数据可视化项目模板提示：以下是本篇文章正文内容，下面案例可供参考。
datav 可视化大屏 vue
07-28
对于使用Vue来实现DataV可视化大屏，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Vue CLI，如果没有安装，可以通过以下命令进行安装： ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目，可以使用以下命令： ``` vue create datav-visualization ``` 3. 进入到项目目录中： ``` cd datav-visualization ``` 4. 安装DataV可视化库，可以使用以下命令： ``` npm install @jiaminghi/data-view ``` 5. 在项目中引入DataV可视化组件。你可以在`main.js`文件中添加以下代码： ```javascript import Vue from 'vue'; import App from './App.vue'; import DataV from '@jiaminghi/data-view'; Vue.use(DataV); new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 6. 创建一个新的组件用于展示DataV可视化大屏。你可以在`src/components`目录下创建一个新的组件文件，例如`DataVScreen.vue`，然后在该文件中编写DataV可视化大屏的代码。 7. 在需要展示DataV可视化大屏的地方使用该组件。例如，在`App.vue`文件中添加以下代码： ```vue <template> <div id="app"> <DataVScreen /> </div> </template> <script> import DataVScreen from './components/DataVScreen.vue'; export default { name: 'App', components: { DataVScreen, }, }; </script> ``` 8. 运行项目，可以使用以下命令启动开发服务器： ``` npm run serve ``` 这样，你就可以使用Vue来实现DataV可视化大屏了。当然，具体的可视化效果和功能需要根据你的需求进行定制和开发。希望对你有所帮助！如果有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值