DataV图表-排名轮播表自定义

这篇具有很好参考价值的文章主要介绍了DataV图表-排名轮播表自定义。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

DataV图表-排名轮播表自定义
一开始使用的是 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>

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

DataV图表-排名轮播表自定义

  • 自定义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代码适用于以上效果 如有更改或者有其他的兼容性 有用到rem适配等
如需要适配可以看这篇 响应式 也可以私信我进行讨论

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

DataV图表-排名轮播表自定义
以上就是DataV图表-排名轮播表自定义感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~!
关注收藏博客 作者会持续更新…文章来源地址https://www.toymoban.com/news/detail-485225.html

到了这里,关于DataV图表-排名轮播表自定义的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue自定义简单实用轮播图封装组件 快速实现轮播图

    前端Vue自定义简单实用轮播图封装组件 快速实现轮播图, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码实现部分

    2024年02月10日
    浏览(84)
  • Echats-自定义图表1

    效果图: 代码:

    2024年02月06日
    浏览(25)
  • 【uniapp小程序开发】—— 组件封装之【自定义轮播图】

    本文主要展示小程序端封装轮播图组件,使用的是uniapp进行的开发,主要使用的是uniapp官网提供的 swiper 组件,可以参考官方文档,查看一些相关API。 效果图一睹为快: 话不多说直接上正文一起来学习一下封装轮播图组件吧! 滑块视图容器。 一般用于左右滑动或上下滑动,比

    2023年04月08日
    浏览(38)
  • 自定义element-ui走马灯(轮播)样式

    自定义el-carousel-item指示器样式 把指示器变成圆点 效果图:  

    2024年02月13日
    浏览(40)
  • 使用Plotly创建自定义指标图表

    大家好,使用Plotly可以创建和自定义指标图表,本文中将介绍如何使用Plotly库创建指标图表的具体操作步骤。 Plotly简介 Plotly是一个强大的数据可视化工具,允许我们使用Python创建各种交互式绘图和图表。在Plotly提供的无数类型的图表中,有一种特别简单明了的类型是“指标

    2024年02月13日
    浏览(44)
  • 前端Vue自定义轮播图视频播放组件 仿京东商品详情轮播图视频Video播放效果 可图片预览

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月15日
    浏览(52)
  • vue3自定义封装组件:消息提示、轮播图、加载更多、骨架屏组件

    定义组件:src/components/library/xtx-infinite-loading.vue 注册组件:src/components/library/index.js  引用组件:src/main.js 使用组件: .vue文件 首先是轮播图的样式:src/components/library/xtx-carousel.vue  然后是轮播图的结构与逻辑封装:src/components/library/xtx-carousel.vue 插件注册:src/components/library

    2024年02月12日
    浏览(44)
  • Echarts图表,利用formatter自定义tooltip的内容和样式

    在展示多数据图表的时候 有的时候需要图例也展示出一些内容来,例如官方这样子:鼠标悬停的时候展示该点数据 但是,官方提供的样式有时不适用所有的开发场景 我的项目需要实现鼠标悬停在某一点的时候,只展示该条线的数据,以及一些图表中未表现的数据。参照原型

    2024年02月11日
    浏览(67)
  • G2 图表 问题集合(自定义tooltip标题,折线图上增加标注点,x轴刻度自定义...)

    最近一直在处理G2 图表问题,发现这个图表除了官方文档,百度上很少能百度到具体的用法及案例,因此总结了此篇文章记录一下踩坑集合,记录问题同时也希望能帮助到广大网友 1.自定义tooltip title样式: 官方给出的案例是这样说的: 我想实现的效果: 很明显,我希望在标

    2024年02月09日
    浏览(36)
  • Echarts图表如何利用formatter自定义tooltip的内容和样式

    在展示多数据图表的时候 有的时候需要图例也展示出一些内容来,例如官方这样子:鼠标悬停的时候展示该点数据 但是,官方提供的样式有时不适用所有的开发场景 我的项目需要实现鼠标悬停在某一点的时候,只展示该条线的数据,以及一些图表中未表现的数据。参照原型

    2024年02月01日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包