DataV图表-排名轮播表自定义数据大屏可视化

场景：需要计算根据分数不同柱子的颜色不同 低于60分变成为橙色柱子

一开始使用的是 dv-scroll-ranking-board 这个不可以自定义颜色和属性 我们可以更改 dv-scroll-board 样式来实现 排名轮播表

安装 data-view

npm install @jiaminghi/data-view

全局使用

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

使用dv-scroll-board组件

<dv-scroll-board :config="config" style="width:100%;height:80%" />
<script lang="ts" setup>
import {
          
    ref, onMounted, } from "vue";
let config = ref<any>({
          
   
 data: [
    [行1列1, 行1列2],
    [行2列1, 行2列2],
    [行3列1, 行3列2],
  ]
})
</script>

这时候我们看的是默认样式

自定义dv-scroll-board

let config = ref<any>({
          
   
  data: [
  [
        `<div class="row-item-a"> <div class="ranking-info">
      <div class="rank"> No.1 </div> <div class="info-name">张三</div > <div class="ranking-value"> 90分 </div></div>
      <div class="ranking-column"> <div class="inside-column" style="width: 90%;"> <div class="shine" > </div>
      </div>
      </div>
    </div>`
      ],
      [
        `<div class="row-item-a"> <div class="ranking-info">
      <div class="rank"> No.2 </div> <div class="info-name">李四</div > <div class="ranking-value"> 59分 </div></div>
      <div class="ranking-column column-fail"> <div class="inside-column fail" style="width: 59%;"> <div class="shine shine-fail" > </div>
      </div>
      </div>
    </div>`
      ]
  ],
})

css代码

亿点小知识：大家可以根据自己的需求灵活的更改css样式尽情的穿透样式

<style lang="scss" scoped>
::v-deep(.row-item) {
          
   
  transition: all .3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: none !important;
}

::v-deep(.row-item-a) {
          
   
  transition: all .3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: space-between;
}

::v-deep(.ranking-info) {
          
   
  display: flex;
  width: 100%;
  height: 80%;
  font-size: 13px;
}
::v-deep(.info-name) {
          
   
  flex: 1;
}
::v-deep(.ranking-value) {
          
   
  font-size: 13px;
}
::v-deep(.rank) {
          
   
  width: 40px;
  color: #CDD0D6;
}
::v-deep(.dv-scroll-board .rows .ceil) {
          
   
  padding: 0;
  color: #CDD0D6;
}
::v-deep(.ranking-column) {
          
   
  border-bottom: 2px solid rgba(19, 112, 251, .5);
  margin-top: -0.8rem;
}
::v-deep(.column-fail) {
          
   
  border-bottom: 2px solid rgba(239, 100, 23, .5);
}
::v-deep(.inside-column) {
          
   
  width: 100%;
  position: relative;
  height: 6px;
  background-color: #1370fb;
  margin-bottom: 2px;
  border-radius: 1px;
  overflow: hidden;
}
::v-deep(.fail) {
          
   
  background-color: #EF6417;
}
::v-deep(.shine) {
          
   
  position: absolute;
  left: 0;
  top: 2px;
  height: 2px;
  width: 50px;
  transform: translateX(-100%);
  background: radial-gradient(#28f8ff 5%, transparent 80%);
  animation: shine 3s ease-in-out infinite alternate;
}
::v-deep(.shine-fail) {
          
   
  background: radial-gradient(#EF6417 5%, transparent 80%);
}
</style>

一些dv-scroll-board属性帮助你更好的开发

header :表头数据 rowNum: 表行数 headerBGC:表头背景色 oddRowBGC:奇数行背景色 evenRowBGC:偶数行背景色 waitTime:轮播时间间隔(ms) headerHeight:表头高度 columnWidth :列宽度 hoverPause:悬浮暂停轮播 indexHeader:行号表头 index:显示行号 align:列对齐方式