大屏数据可视化——DataV平台下的零售数据驾驶舱大屏数据可视化

已于 2024-06-14 15:55:54 修改
阅读量3.8k 收藏 27
点赞数 9
分类专栏： 数据可视化 文章标签： 信息可视化
于 2024-06-14 15:53:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2301_80544540/article/details/139677231
版权

相关知识

1. DataV介绍

DataV组件库基于Vue （React版 (opens new window)），主要用于构建大屏数据展示页面即数据可视化。

1.1 DataV组件

DataV具有多种类型组件可供使用：

  • 边框

带有不同边框的容器

  • 装饰

用来点缀页面效果，增加视觉效果

  • 图表

图表组件基于Charts (opens new window)封装，轻量，易用

  • 其他

飞线图/水位图/轮播表/胶囊柱图/飞线图/锥形图/数字翻牌器/排名轮播表/...

1.2 使用前必看

  • 兼容性

组件库的开发和调试都使用Chrome浏览器。

  • 宽度异常

组件的默认宽高都是100%，可以根据父容器宽高进行自适应，但在某些情况下组件宽高可能表现异常，这种情况一般是因为组件的父容器宽高发生了变化，而组件没有侦知这一变化，你可以在组件上绑定key值，在更改父容器宽高且页面完成重绘后（使用$nextTick），更新key值，使组件强制刷新，以获取正确宽高。

  • 状态更新

避免组件更新了数据后，状态却不刷新，也就是没变化，这里组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { ...this.someProps }）。

具体更新数据示例如下：

<template>
  <div class="update-demo">
    <dv-percent-pond :config="config" style="width:200px;height:100px;" />
  </div></template>
<script>export default {
  name: 'UpdateDemo',
  data () {
    return {
      config: {
        value: 66,
        lineDash: [10, 2]
      }
    }
  },
  methods: {
    // 更新数据的示例方法
    updateHandler () {
      const { config } = this
      /**
       * 只是这样做是无效
       * config指向的内存地址没有发生变化
       * 组件无法侦知数据变化
       */
      this.config.value = 90
      this.config.lineDash = [10, 4]
      /**
       * 使用ES6拓展运算符生成新的props对象
       * 组件侦知数据变化 自动刷新状态
       */
      this.config = { ...this.config }
    }
  }}</script>
1.3 创建Vue项目

DataV组件库依赖Vue，要想使用它，创建一个Vue项目当然是必须的，如果已有Vue项目或使用UMD版开发可跳过此步骤。

（1）安装Vue/Cli命令如下
npm i -g @vue/cli
（2）创建Vue项目

创建项目名称datav-project，命令如下：

vue create datav-project
（3）安装DataV

安装DataV前需进入到datav-project的根目录下，命令如下：

cd datav-project

在项目目录下进行组件库安装，命令如下：

npm i @jiaminghi/data-view
（4）使用DataV

在vue项目中注册dataV插件,main.js文件中添加如下代码:

//将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

2. 全屏容器

数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕。设置如下：

<dv-full-screen-container>content</dv-full-screen-container>

建议在全屏容器内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。同时，使用前请注意将body的margin设为0，否则会引起计算误差，导致全屏后不能完全充满屏幕。

3. Loading加载

数据尚未加载完成时，可以显示Loading效果，用以增强用户体验。Loading效果如下：

配置代码如下：

<dv-loading>Loading...</dv-loading>

4. 边框

边框均由SVG元素绘制，体积轻量不失真，它们的使用极为方便。

（1）边框布局

边框组件默认宽高均为100%，边框内部的节点将被slot插槽分发至边框组件下class为border-box-content的容器内，如有布局需要，请针对该容器布局，以免产生样式冲突，导致边框显示异常。

（2）注意事项

建议把边框内的节点封装成组件，以组件的形式置入边框。这是因为slot的渲染机制较为特殊，如果你要在组件mounted后对边框内置入的节点进行页面渲染状态敏感的操作（获取DOM宽高，实例化echarts图表等），可能会发生非预期的结果。比如获取的DOM宽高为0，封装成组件后可避免这种情况。

（3）重置高度

如果边框组件的父容器宽高发生了变化，而边框组件没有侦知这一变化，边框就无法自适应父容器宽高。针对这种情况，你可以给边框绑定key值，在父容器宽高发生变化且完成渲染后更改key值，强制销毁边框组件实例并重新渲染，重新获取宽高。但这会造成边框内的组件同样被销毁重新渲染，这会带来额外的性能消耗，并导致组件状态丢失，此时我们可以调用组件内置的initWH方法去重置边框组件的宽高以避免销毁实例重新渲染带来的非预期副作用。

（4）自定义颜色

所有边框均支持自定义颜色及背景色，方法如下：

<dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >dv-border-box-1</dv-border-box-1>

边框颜色属性

属性说明类型可选值默认值
color自定义颜色string[]--
backgroundColor背景色string--

TIP:

1.color属性支持配置两个颜色，一主一副。

2.颜色类型可以为颜色关键字、十六进制色、RGB及RGBA。

（5）边框样式

DataV中边框共计有13种样式，代码实现非常简单，只需要修改后边的数字即可修改不同的样式,如设置dv-border-box-1样式，代码如下：

<dv-border-box-1>dv-border-box-1</dv-border-box-1>

展示效果如下：

样式2代码如下：

<dv-border-box-2>dv-border-box-2</dv-border-box-2>

展示效果如下：

样式3代码如下：

<dv-border-box-3>dv-border-box-3</dv-border-box-3>

展示效果如下：

5. 图表

图表组件基于Charts (opens new window)封装，只需要将对应图表option数据传入组件即可。如实现剩余油量效果图表，代码如下：

<dv-charts :option="option" />

导入数据代码如下：

export default {
  title: {
    text: '剩余油量表',
    style: {
      fill: '#fff'
    }
  },
  series: [
    {
      type: 'gauge',
      data: [ { name: 'itemA', value: 55 } ],
      center: ['50%', '55%'],
      axisLabel: {
        formatter: '{value}%',
        style: {
          fill: '#fff'
        }
      },
      axisTick: {
        style: {
          stroke: '#fff'
        }
      },
      animationCurve: 'easeInOutBack'
    }
  ]
}

最后的展示效果如下：

6. 动态环图

代码实现：

<dv-active-ring-chart :config="config" style="width:200px;height:200px" />

数据部分：

export default {
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    }
  ]}

展示效果如下：

7. 胶囊图

代码如下：

<dv-capsule-chart :config="config" style="width:300px;height:200px" />

数据部分：

export default {
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 67
    },
    {
      name: '漯河',
      value: 123
    },
    {
      name: '郑州',
      value: 55
    },
    {
      name: '西峡',
      value: 98
    }
  ]
}

展示效果如下：

代码属性说明：

（1）data属性说明
属性说明类型可选值默认值
name环对应名称String------
value环对应值Number------
（2）config属性说明
属性说明类型可选值默认值
data柱数据Array<Object>data属性[]
unit单位String---''
colors环颜色Array<String>[1][2]
showValue显示数值Boolean---false

config注释：

  • 颜色支持hex|rgb|rgba|颜色关键字等四种类型。

  • 默认配色为['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']。

8. 水位图

代码如下：

<dv-water-level-pond :config="config" style="width:150px;height:200px" />

数据部分：

export default {
  data: [66, 45],
  shape: 'roundRect'
}

展示效果如下：

（1）config属性说明
属性说明类型可选值默认值
data水位位置[1]Arrya<Number>---[]
shape水位图形状String[2]'rect'
colors水位图配色Array<String>[3][4]
waveNum波浪数量Number---3
waveHeight波浪高度Number---40
waveOpacity波浪透明度Number---0.4
formatter信息格式化String---'{value}%'[5]

config注释

  • 可以有多个水位，但默认显示值最大的水位信息。

  • 有三种形状可供选择：矩形rect、圆角矩形roundRect、圆形round。

  • 颜色支持hex|rgb|rgba|颜色关键字等四种类型。

  • 默认配色为['#00BAFF', '#3DE7C9'], 自动应用渐变色，若不想使用渐变色，请配置两个相同的颜色。

  • 自动使用最大的水位值替换字符串中的'{value}'标记。

9. 轮播表

轮播表可以单条轮播也可以整页轮播，支持点击事件，展示数据使用v-html渲染，因此你可以传递html字符串，定制个性化元素。

TIP：

组件内部没有设置deep监听props，数据变更时，请生成新的props，不然组件将无法刷新状态

this.config.data = ['foo', 'foo'] //是无效的
this.config = { data: ['foo', 'foo'] }  //才是有效的

效果图如下：

实现代码如下：

<dv-scroll-board :config="config" style="width:500px;height:220px" />

数据代码如下：

export default {
  header: ['列1', '列2', '列3'],
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ]}
（1）config属性说明
属性说明类型可选值默认值
header表头数据Array<String>---[]
data表数据Array<Array>---[]
rowNum表行数Number---5
headerBGC表头背景色String---'#00BAFF'
oddRowBGC奇数行背景色String---'#003B51'
evenRowBGC偶数行背景色String---#0A2732
waitTime轮播时间间隔(ms)Number---2000
headerHeight表头高度Number---35
columnWidth列宽度Array<Number>[1][]
align列对齐方式Array<String>[2][]
index显示行号Booleantrue|falsefalse
indexHeader行号表头String-'#'
carousel轮播方式String'single'|'page''single'
hoverPause悬浮暂停轮播Boolean---true

config注释

  • columnWidth可以配置每一列的宽度，默认情况下每一列宽度相等。

  • align可以配置每一列的对齐方式，可选值有'left'|'center'|'right'，默认值为'left'。

（2）click事件数据属性
属性说明类型可选值默认值
row所在行数据Array<String>------
ceil单元格数据Array<Array>---[]
rowIndex行索引Number------
columnIndex列索引Number------
（3） mouseover事件

当鼠标悬浮在某个单元格上时（表头不支持），轮播表将抛出一个mouseover事件，包含被悬浮单元格的相关数据（与click事件数据相同）。

（4）updateRows方法

如果想要不断追加行数据，又不想从头开始轮播，可以使用此方法更新行数据，不会导致从头轮播，也可以设置下次滚动的起始行，示例代码如下：

/**
 * @param {string[][]} rows 更新后的行数据
 * @param {number} index 下次滚动的起始行 （可缺省）
 */
function updateRows(rows, index) {
  // ...
}
​
<template>
  <dv-scroll-board :config="config" ref="scrollBoard" />
</template>
<script>
export default {
  data () {
    return () {
      config: {}
    }
  },
  methods () {
    doUpdate () {
      this.$refs['scrollBoard'].updateRows(rows, index)
    }
  }
}
</script>

10. 排名轮播表

排名轮播表和轮播表类似，也可以选择单条轮播或整页轮播。效果如下图所示

实现代码如下：

<dv-scroll-ranking-board :config="config" style="width:500px;height:300px" />

数据部分代码如下：

export default {
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 78
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 45
    },
    {
      name: '漯河',
      value: 29
    }
  ]
}
（1）config属性
属性说明类型可选值默认值
data表数据Array<Object>data属性[]
rowNum表行数Number---5
waitTime轮播时间间隔(ms)Number---2000
carousel轮播方式String'single'|'page''single'
unit数值单位String---''
sort自动排序Boolean---true
valueFormatter数值格式化Function---undefined
（2）data属性
属性说明类型可选值默认值
name名称String------
value数值Number------
（3）valueFormatter参数属性
属性说明类型可选值默认值
name名称String------
value数值Number------
percent百分比Number------
ranking排名Number------

TIP：name属性使用v-html进行渲染，因此你可以使用html标签来定制个性化的name展示效果。

操作步骤

随着信息技术的快速发展和互联网的普及，数据量呈爆炸式增长。在这个大数据时代，越来越多的企业和组织面临着巨大的数据挖掘和分析的需求。Web大数据平台作为一种常见的数据分析工具，具有集中管理、共享协作、实时监控等优点，越来越受到各行各业的关注和应用。

在Web大数据平台中，数据的可视化是一种重要的方式，能够直观、清晰地展示数据的特征和关系。通过图表、图形等可视化手段，可以帮助用户更好地理解数据，从而更准确地做出决策和分析。因此，如何利用合适的可视化组件和数据图表来实现数据的有效展示和分析，成为了Web大数据平台前端开发中的重要问题。本项目以当下最流行的前端开发框架vue为基础，选用DataV作为可视化实现的工具。

步骤1：创建project文件夹并切换至project目录

cd ~
mkdir project && cd project

步骤2：创建vue项目，项目名称datav-project

vue create datav-project

运行后，显示如下：

选择创建vue 2项目，然后回车等待项目创建完成

项目创建成功后，显示如下：

步骤3：打开项目

使用vscode工具打开创建好的datav-project项目。

选择open folder 找到我们项目所在目录/home/ubuntu/project/datav-project，操作如下图所示：

打开项目后的vscode如下图所示：

步骤4：安装@jiaminghi/data-view数据可视化的库或插件

选择新建终端

在终端中输入安装指令：

npm install @jiaminghi/data-view

安装成功如下图所示：

步骤5：初始化项目，将项目中默认的内容删掉

将HelloWorld.vue组件删除掉，使用右键Delete

向样式style标签内容添加一些全局样式，App.vue完整代码如下

<template>
  <div id="app">
  </div>
</template>
​
<script> 
export default {
}
</script>
<style lang="scss">
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
</style>

步骤6：导入DataV组件到全局

打开main.js文件导入DataV组件

import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
导入组件之后main.js完整代码如下

import Vue from 'vue'
import App from './App.vue'
​
Vue.config.productionTip = false
//导入DataV
import dataV from '@jiaminghi/data-view'
//注册DataV
Vue.use(dataV)
​
new Vue({
  render: h => h(App),
}).$mount('#app')

步骤7：安装sass sass-loader组件

其中sass当前版本1.64.1，sass-loader版本13.3.2

npm i sass sass-loader

步骤8：设计大屏的布局

我们需要设计我们大屏的布局，此处比较简单我们设计两行三列的一个布局格式，另外我们还需要使用全局容器组件，让我们的整个大屏能够实现自由缩放。数字部分代表我们后期需要填充的图表。

编辑App.vue组件 设计一个两行三列的布局。

最终App.vue 的template标签内的代码如下

<template>
  <div id="app">
    <dv-full-screen-container>
      <div class="container">
        <div class="row">
          <div class="cell">1</div>
          <div class="cell">2</div>
          <div class="cell">3</div>
      </div>
      <div class="row">
        <div class="cell">4</div>
        <div class="cell">5</div>
        <div class="cell">6</div>
      </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

App.vue的样式标签style内的代码如下：

<style lang="scss">
body{
  background-color: black;
}
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  .row{
    float: 1;
    height: 50%;
    width: 100%;
    display: flex;
    color: white;
    .cell{
      flex: 1;
      .title{
        font-size: 30px;
        text-align: center;
        // padding-top: 30px;
      }
    }
}
}
</style>

此时App.vue完整代码如下:

<template>
  <div id="app">
    <dv-full-screen-container>
      <div class="container">
        <div class="row">
          <div class="cell">1</div>
          <div class="cell">2</div>
          <div class="cell">3</div>
      </div>
      <div class="row">
        <div class="cell">4</div>
        <div class="cell">5</div>
        <div class="cell">6</div>
      </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>
​
<script> 
export default {
}
</script>
​
​
<style lang="scss">
body{
  background-color: black;
}
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  .row{
    float: 1;
    height: 50%;
    width: 100%;
    display: flex;
    color: white;
    .cell{
      flex: 1;
      .title{
        font-size: 30px;
        text-align: center;
        // padding-top: 30px;
      }
    }
}
}
</style>

步骤9:启动项目观察效果

在终端输入启动指令：

npm run servebas

启动成功在浏览器中输入网址，界面效果如下图：

接下来我们就可以把对应的数字换成图表即可。

步骤10：热门手机销量排行

此功能模块在大屏左侧，显示不同品牌手机可点击查看不同品牌手机数据，选中状态的手机高亮显示。

我们在项目的components文件夹下创建RingChart.vue组件。

开发RingChart.vue的代码，其中的template标签完整代码如下：

<template>
  <div class="box">
    <div class="title">热门手机销量排行</div>
    <div class="content">
      <div class="list">
        <div class="item" :class="{active:activeIndex===index}" 
        v-for="(item,index) in list" :key="item.id" @click="activeIndex=index">
          {{ item.name }}
        </div>
      </div>
      <dv-active-ring-chart :config="config" style="width:350px;height:350px" />
    </div>
  </div>
</template>

RingChart.vue 的script标签完整代码如下:

<script>
  export default {
    data(){
      return{
        activeIndex:0,
        list:[
            {
              id:1,
              name:'苹果手机',
              data:[
                {name:'一季度',value:255},
                {name:'二季度',value:300},
                {name:'三季度',value:200},
                {name:'四季度',value:400},
              ]
            },
            {
              id:2,
              name:'华为手机',
              data:[
                {name:'一季度',value:300},
                {name:'二季度',value:200},
                {name:'三季度',value:260},
                {name:'四季度',value:420},
              ]
            },
            {
              id:3,
              name:'小米手机',
              data:[
                {name:'一季度',value:280},
                {name:'二季度',value:270},
                {name:'三季度',value:300},
                {name:'四季度',value:350},
              ]
            },
            {
              id:4,
              name:'vivo手机',
              data:[
                {name:'一季度',value:100},
                {name:'二季度',value:300},
                {name:'三季度',value:400},
                {name:'四季度',value:500},
              ]
            }
          ],
        config:{
          data: [],
          showOriginValue:true
        }
      }
    },
    created(){
      this.config.data=this.list[this.activeIndex].data
    },
    methods:{
      change(index){
        this.activeIndex=index
        
      }
    },
    watch:{
      activeIndex(){
        this.config={
          ...this.config,
          data:this.list[this.activeIndex].data
        }
      }
    }
  }
</script>

RingChart.vue 的style标签完整代码如下

<style lang="scss" scoped>
.box{
  padding: 10px;
  .title{
    font-size: 20px;
    text-align: center;
  }
  .content{
    display: flex;
    align-items: center;
    .list{
      padding-left: 20px;
      .item{
        margin: 10px 0;
        cursor: pointer;
        background-color: rgba(255,255,255, 0.2);
        padding:4px 10px;
        &.active{
          background-color: rgba( 255,255,255, 0.6);
        }
      }
    }
  }
}
</style>

在App.vue组件中引入此模块，并且我们选择边框的样式为dv-border-box-12。具体操作为，将App.vue文件中template标签内数字1替换成如下代码：

<dv-border-box-12>
   <RingChart></RingChart>
</dv-border-box-12>

在App.vue文件中script标签内导入并组件注册，此时完整的script代码如下：

<script> 
import RingChart from './components/RingChart.vue';
export default {
  components:{
    RingChart
  }
}
</script>

将App.vue文件中template标签内数字2的位置替换如下代码：

<dv-border-box-12>
      <div class="title">零售数据驾驶舱</div>
</dv-border-box-12>

到此我们第一个图表已经开发完成，查看效果 浏览器输入地址http://localhost:8080，显示如下：

步骤11：新增会员信息

此功能模块展示的是新增会员信息，点击天数按钮可以展示7天、15天、30天新增会员信息，此功能模块实现类似第一个“热门手机销量排行”图表，不再详细描述。我们在项目的components文件夹下创建CapsuleChart.vue组件。CapsuleChart.vue 的template标签的完整代码如下：

<template>
  <div class="box">
    <div class="title">新增会员信息</div>
    <div class="list">
      <div class="item" v-for="(item,index) in list" :class="{active:activeIndex===index}"
      :key="item.id"  @click="change(index)">
        {{ item.name }}
      </div>
    </div>
    <dv-capsule-chart :config="config" style="width:100%;height:300px" />
  </div>
</template>

CapsuleChart.vue的script标签的代码如下：

<script>
  export default {
    data(){
      return{
        activeIndex:0,
        list:[
          {
            id:1,
            name:'7天',
            data:[
              {name:'南京市',value:90},
              {name:'苏州市',value:120},
              {name:'无锡市',value:60},
              {name:'徐州市',value:70},
            ]
          },
          {
            id:2,
            name:'15天',
            data:[
              {name:'济南市',value:180},
              {name:'青岛市',value:240},
              {name:'烟台市',value:120},
              {name:'威海市',value:140},
            ]
          },
          {
            id:3,
            name:'30天',
            data:[
              {name:'广州市',value:360},
              {name:'深圳市',value:480},
              {name:'佛山市',value:240},
              {name:'湛江市',value:280},
            ]
          }
        ],
        config:{
          data: [],
          colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
          unit: '人'
        }
      }
    },
    created(){
      this.config.data=this.list[this.activeIndex].data
    },
    methods:{
      change(index){
        this.activeIndex=index
        this.config={
          ...this.config,
          data:this.list[this.activeIndex].data
        }
      }
    }
  }
</script>

CapsuleChart.vue的style标签代码如下:

<style lang="scss" scoped>
.box{
  padding: 10px;
  .title{
    font-size: 20px;
    text-align: center;
  }
  .list{
    display: flex;
    justify-content: center;
    .item{
      padding:4px 10px;
      margin: 10px 0;
      cursor: pointer;
      background-color: rgba(255,255,255, 0.2);
      &.active{
          background-color: rgba( 255,255,255, 0.6);
        }
    }
  }
}
</style>

在App组件中引入此模块，并且我们选择边框的样式为dv-border-box-12，将App.vue文件中template标签内数字3替换成如下代码：

<dv-border-box-12>
       <CapsuleChart></CapsuleChart>
</dv-border-box-12>

在App.vue的script中导入并组件注册，此时完整的script代码如下：

<script> 
import RingChart from './components/RingChart.vue';
import CapsuleChart from './components/CapsuleChart.vue';
export default {
  components:{
    RingChart,
    CapsuleChart
  }
}
</script>

效果如图所示：

步骤12：销售数据

此功能模块展示的是销售数据信息，我们在项目的components文件夹下创建ScrollBoard.vue组件。ScrollBoard.vue的template标签的代码如下：

<template>
  <div class="box">
    <div class="title">销售数据</div>
    <dv-scroll-board :config="config" style="width:100%;height:100%" />
  </div>
</template>

ScrollBoard.vue的script标签的代码如下：

<script>
  export default {
    data(){
      return{
        config:{
          header: ['销售价格', '销售市场', '销售任务','销售量'],
          data: [
            ['21449', '26667', '18248','20166'],
            ['21450', '26668', '18249','20167'],
            ['21451', '26669', '18250','20168'],
            ['21452', '26670', '18251','20169'],
            ['21453', '26671', '18252','20170'],
            ['21454', '26672', '18253','20171'],
            ['21455', '26673', '18254','20172'],
            ['21456', '26674', '18255','20173'],
            ['21457', '26675', '18256','20174'],
          ]
        }
      }
    }
  }
</script>

ScrollBoard.vue的style标签的代码如下:

<style lang="scss" scoped>
.box{
  height: 100%;
  width: 100%;
  padding: 20px;
  padding-bottom: 55px;
  .title{
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
  }
}
</style>

在App组件中引入此模块，并且我们选择边框的样式为dv-border-box-12，将App.vue文件中template标签内数字4替换成如下代码：

<dv-border-box-12>
 <ScrollBoard></ScrollBoard>
</dv-border-box-12>

在App.vue的script中导入并组件注册，此时完整的script代码如下：

<script> 
import RingChart from './components/RingChart.vue';
import CapsuleChart from './components/CapsuleChart.vue';
import ScrollBoard from './components/ScrollBoard.vue';
export default {
  components:{
    RingChart,
    CapsuleChart,
    ScrollBoard
  }
}
</script>

效果图如图所示：

步骤13：消费占比

此功能模块展示的是消费占比信息，我们在项目的components文件夹下创建WaterLevelPond.vue组件。

WaterLevelPond.vue的template标签代码如下：

<template>
  <div class="box">
    <div class="title">消费占比</div>
    <div class="content">
      <div class="item" v-for="(item,index) in list" :key="index">
        <dv-water-level-pond :config="item.config" style="width:180px;height:90%" />
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

WaterLevelPond.vue的script标签的代码如下:

<script>
  export default {
    data(){
      return{
        list:[
          {
            name:'平均客单价',
            config:{
              data: [821, 45],
              shape: 'roundRect',
              colors:[],
              formatter:'{value}元'
            }
          },
          {
            name:'男消费',
            config:{
              data: [36, 45],
              shape: 'roundRect',
              colors:[]
            }
          },
          {
            name:'女消费',
            config:{
              data: [64, 45],
              shape: 'roundRect',
              colors:[]
            }
          }
        ],
        config:{
          data: [66, 45],
          shape: 'roundRect'
        }
      }
    },
    created(){
      this.list.forEach(r=>{
        if(r.config.data[0]>=80){
          r.config.colors[0]='red'
        }else if(r.config.data[0]>=50){
          r.config.colors[0]='orange'
        }else{
          r.config.colors[0]='green'
        }
      })
    }
  }
</script>

WaterLevelPond.vue的style标签代码如下：

<style lang="scss" scoped>
.box{
  padding: 20px;
  height: 100%;
  .title{
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .content{
    display: flex;
    justify-content: space-between;
    height: 85%;
    .item{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>

App组件中引入此模块，并且我们选择边框的样式为dv-border-box-12,将App.vue文件中template标签内数字5替换成如下代码:

<dv-border-box-12>
   <WaterLevelPond></WaterLevelPond>
</dv-border-box-12>

在App.vue的script中导入并组件注册，此时完整的script代码如下:

<script> 
import RingChart from './components/RingChart.vue';
import CapsuleChart from './components/CapsuleChart.vue';
import ScrollBoard from './components/ScrollBoard.vue';
import WaterLevelPond from './components/WaterLevelPond.vue';
export default {
  components:{
    RingChart,
    CapsuleChart,
    ScrollBoard,
    WaterLevelPond
  }
}
</script>

效果图如下所示：

步骤14：商品销售统计数量

此功能模块展示的是商品销售统计信息，我们在项目的components文件夹下创建ScrollRankingBoard.vue组件。ScrollRankingBoard.vue的template标签代码如下：

<template>
  <div class="box">
    <div class="title">商品销售统计数量</div>
    <dv-scroll-ranking-board :config="config" style="width:500px;height:300px" />
  </div>
</template>

ScrollRankingBoard.vue的script标签代码如下：

<script>
  export default {
    data(){
      return{
        list:[
          {
            name: '电视柜',
            value: 55
          },
          {
            name: '大床',
            value: 120
          },
          {
            name: '斗柜',
            value: 78
          },
          {
            name: '冰箱',
            value: 66
          },
          {
            name: '空调',
            value: 80
          },
          {
            name: '电视机',
            value: 45
          },
          {
            name: '茶几',
            value: 29
          }
        ],
        config:{
          data:[]
        }
      }
    },
    created(){
      this.config={
        ...this.config,
        data:this.list,
        sort:true
      }
    }
  }
</script>

ScrollRankingBoard.vue的style标签的代码如下：

<style lang="scss" scoped>
.box{
  padding-top: 20px;
  padding-left: 40px;
  .title{
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
  }
}
</style>

在App组件中引入此模块，并且我们选择边框的样式为dv-border-box-12，将App.vue文件中template标签内数字6替换成如下代码：

<dv-border-box-12>
   <ScrollRankingBoard></ScrollRankingBoard>
</dv-border-box-12>

在App.vue的script中导入并组件注册，此时完整的script标签代码如下：

<script> 
import RingChart from './components/RingChart.vue';
import CapsuleChart from './components/CapsuleChart.vue';
import ScrollBoard from './components/ScrollBoard.vue';
import WaterLevelPond from './components/WaterLevelPond.vue';
import ScrollRankingBoard from './components/ScrollRankingBoard.vue';
export default {
  components:{
    RingChart,
    CapsuleChart,
    ScrollBoard,
    WaterLevelPond,
    ScrollRankingBoard
  }
}
</script>

最终，完整的App.vue的代码如下:

<template>
  <div id="app">
    <dv-full-screen-container>
      <div class="container">
        <div class="row">
          <div class="cell">
            <dv-border-box-12>
              <RingChart></RingChart>
            </dv-border-box-12>
          </div>
          <div class="cell">
            
            <dv-border-box-12>
              <div class="title">零售数据驾驶舱</div>
            </dv-border-box-12>
          </div>
          <div class="cell">
            <dv-border-box-12>
              <CapsuleChart></CapsuleChart>
            </dv-border-box-12>
          </div>
      </div>
      <div class="row">
        <div class="cell">
          <dv-border-box-12>
            <ScrollBoard></ScrollBoard>
          </dv-border-box-12>
        </div>
        <div class="cell">
          <dv-border-box-12>
            <WaterLevelPond></WaterLevelPond>
          </dv-border-box-12>
        </div>
        <div class="cell">
          <dv-border-box-12>
            <ScrollRankingBoard></ScrollRankingBoard>
          </dv-border-box-12>
        </div>
      </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>
<script> 
import RingChart from './components/RingChart.vue';
import CapsuleChart from './components/CapsuleChart.vue';
import ScrollBoard from './components/ScrollBoard.vue';
import WaterLevelPond from './components/WaterLevelPond.vue';
import ScrollRankingBoard from './components/ScrollRankingBoard.vue';
export default {
  components:{
    RingChart,
    CapsuleChart,
    ScrollBoard,
    WaterLevelPond,
    ScrollRankingBoard
  }
}
</script>
​
<style lang="scss">
body{
  background-color: black;
}
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  .row{
    float: 1;
    height: 50%;
    width: 100%;
    display: flex;
    color: white;
    .cell{
      flex: 1;
      .title{
        font-size: 30px;
        text-align: center;
        // padding-top: 30px;
      }
    }
}
}
​
</style>

效果图如图所示：

项目总结

本项目综合性的练习了关于使用DataV组件实现可视化的流程，从项目的初始化搭建到最后的成品。具体操作中使用了DataV中的圆环图组件、轮播图、轮播表、水位图。

国产基于 Vue + echarts 开源 DataV 物联网 Web 可视化大屏解决方案
06-29 2107
项目源码，文末联系小编01QiFeng 可视化大屏QiFeng 可视化大屏是一个提供 “低代码数据可视化” 完全免费开发设计平台，是一个类似在线ps设计器，将图表，图片资源，表格统计组件、在线视屏监控、在线地图等等组件，通过层布局，一层一层叠加设计，使它不需要像传统开源一样，使用者需要有较强的设计经验或技术背景才能完成大屏的制作，用户通过对组件的托拉拽，在画布中编辑自己想要的大屏样式，可以轻松创建...
echarts、dataV 数据可视化大屏
m0_67403188的博客
08-01 2097
文件作用/功能main.js主目录文件，引入Echart/DataV等文件utils工具函数与mixins函数等项目主结构assets静态资源目录，放置logo与背景图片。
DataV实时可视化大屏
互联网知识分享
05-24 877
3.4 数据+视觉叙事: Storytelling。3.1 可视化大屏要解决的问题。3.2 可是大屏的制作流程。5)支持数据交互式分析。6)多种适配与发布方式。2)丰富开发的图标库。零门槛图形化设计界面。
dataV大屏在vue中的使用
采花小盗周的博客
06-16 1万+
随着信息化的发展，大屏展示的需求越来越多，使用e-charts一个一个的做配置太麻烦，于是找到了封装好的dataV，直接拿来用就可以实现酷炫的大屏效果。
熬夜整理了8大数据可视化大屏工具！总有一款适合你！
最新发布
Leo的博客
04-27 1241
零代码操作，适配国内数据源，组件丰富，实时更新生态系统不完善，需借助外部资源大中型企业，业务部门快速可视化、特定场景展示Tableau多源数据整合，可视化强，交互丰富学习成本高，价格贵，依赖硬件大型企业、数据驱动决策场景Power BI与微软生态集成，操作友好，数据处理强，实时交互高级功能难学，安全管理复杂，定制受限微软生态企业、自助式分析D3.js高度自定义，交互动态，开源免费编程门槛高，开发效率低，无可视化设计工具。
大屏可视化dataV
qq_46663280的博客
09-26 2067
dataV
精选30个炫酷的数据可视化大屏(含源码)，拿走就用！
热门推荐
法纳斯特
09-26 3万+
大家好，我是小F～大屏数据可视化是以大屏为主要展示载体的数据可视化设计。“大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。原本看不见的数据可...
【数据可视化】—大屏数据可视化展示
道阻且长，行则将至。
10-16 2424
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。百度创建的这个库对于 Web 的数据可视化非常有用。它也提供英文版本，适用于大数据集。数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。数据可视化的目的：借助于图形化工具，清晰有效的传达与沟通信息。
大屏可视化解决方案
rqgxy的博客
09-28 2万+
  大屏的前世今生 作为一个 BI 行业人，我们对 DashBaord，领导驾驶舱，仪表盘等概念都非常熟悉，然而忽如一夜春风来，客户都用起大屏来 大屏可视化需求，从 2015 年 2016 年，突然之间就成了 BI 项目，数据可视化项目需求列表的中的常见需求项，那什么是大屏呢，和我们原先的 DashBaord，有什么区别呢 我们先来看一下什么是大屏 这个场景，就是我们很多人概念中最原...
大屏数据可视化
02-18
大屏数据可视化案例；大数据可视化案例；
20套Echarts大屏数据可视化、数据可视化驾驶舱源码，智慧物流、大数据分析、车联网、大数据运维等多行业数据可视化驾驶舱
01-06
本资源包含20套基于Echarts的大屏数据可视化和数据可视化驾驶舱的源码，非常适合用于智慧物流、大数据分析、车联网以及大数据运维等多个行业的数据展示需求。 1. **Echarts大屏数据可视化** 大屏数据可视化是将...
20套数据可视化驾驶舱(适合大屏展示)
04-08
内含智慧物流、智慧医院、智慧社区、物联网、车联网、运维分析、大数据分析等众多数据可视化驾驶舱
iDataV：大屏数据可视化大屏数据可视化演示
02-05
大屏数据可视化 重要声明 本项目所有案例采用的数据均属虚构，切勿当真！ 项目案例-上市公司全景概览 综合使用条形图，柱状图，折线图，饼图，地图，数字翻牌器来实现一个常规的大屏数据可视化项目。 项目案例-上市公司地域分布 以百度地图为底图，结合ECharts替换地理信息数据 旭日图-基于ECharts V4.2 旭日图（Sunburst）是ECharts 4.0添加的图表类型，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。 树图-基于ECharts V4.2 树图是一种流行的利用包含关系表达层次化数据的可视化方法
数据可视化驾驶舱.7z
05-28
收集了一套基于 Echarts 实现可视化数据大屏响应式展示效果的源码，共计13个页面，可以在此基础上重新开发。 实现方式：html + Echarts
20套数据可视化大屏模板源码下载(数据可视化驾驶舱).rar
12-11
本资源包含20套数据可视化大屏模板源码，非常适合学习和应用在数据可视化项目中，尤其是数据可视化驾驶舱的设计。 首先，让我们来了解一下数据可视化驾驶舱。数据驾驶舱是一种交互式的数据展示工具，它通常用于企业...
21套-Echarts大屏HTML源码-数据可视化展板模板.zip
06-19
Echarts大屏HTML源码：数据可视化新篇章 在数字时代，数据可视化已成为沟通信息、洞察趋势的关键工具。为此，我们精心整理了一系列多套Echarts大屏HTML源码，旨在为您提供前沿的数据可视化展板模板。 这些源码基于...
HTML数据可视化驾驶舱项目案例源码.zip
05-22
HTML数据可视化驾驶舱项目案例源码，大数据可视化模板——echarts有关N个html界面。数据可视号图表案例集合项目源码。HTML数据可视化驾驶舱项目案例源码，大数据可视化模板——echarts有关N个html界面。数据可视号...
react + datav 炫酷的大屏数据可视化展示.zip
06-10
本项目"react + datav 炫酷的大屏数据可视化展示"利用JavaScript技术栈，特别是React框架和Datav库，实现了高效且引人入目的大屏数据展示。以下是对这个项目中涉及的技术点进行的详细解释： 1. **React**: React是...
开源可视化大屏设计器DataV
xuweilin的博客
10-23 1788
DataV是阿里云推出的数据可视化应用搭建平台，旨在帮助用户通过图形化的界面轻松搭建专业水准的可视化应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值