DataV chart - ranking carousel customization

DataV chart-ranking carousel table custom data big screen visualization

Scenario: It needs to be calculated according to the different colors of the pillars according to the score. Below 60 points, it becomes an orange pillar

At the beginning, dv-scroll-ranking-boardthis color and attribute cannot be customized
. We can change dv-scroll-boardthe style to realize the ranking carousel table

• Install data-view

npm install @jiaminghi/data-view

• global use

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

• Using the dv-scroll-board component

<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>

At this time we are looking at the default style

• customizedv-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 code

The following css code is applicable to the above effects. If there is any change or other compatibility, it can be used for rem adaptation.
If you need adaptation, you can read this article or you can private message me for discussion

亿点小知识：大家可以根据自己的需求灵活的更改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>

Some dv-scroll-boardattributes help you develop better

• header : header data
• rowNum: number of rows
• headerBGC: header background color
• oddRowBGC: odd row background color
• evenRowBGC: Even row background color
• waitTime: rotation time interval (ms)
• headerHeight: header height
• columnWidth : column width
• hoverPause: hover to pause the carousel
• indexHeader: row number header
• index: display line number
• align: column alignment

The above is the DataV chart-ranking carousel customization Thank you for reading.
If you encounter other problems, you can discuss and study with me in private.
If it is helpful to you, please 点赞bookmark it. Thank you~!
Pay attention to favorite bloggers and will continue to update...