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

2021-09-18 10:33:13 阅读：572 来源： 互联网

在这里插入图片描述
Datav的轮播表还是挺好用的，
下载datav：npm install @jiaminghi/data-view
main.js中引入：import dataV from ‘@jiaminghi/data-view’
Vue.use(dataV)

我做的是假数据展示，真实数据渲染的话可以参考别的大神写的文章。

<template>
  <div>
    <div style="position: relative;">
      <dv-scroll-ranking-board
        :config="configone"
        style="width:98%;height:600px; margin: 0 auto;"
      />
    </div>
  </div>
</template>

主要就是配置config，header表头数据；data表数据；unit数值单位；rowNum表行数，默认展示5行。waitTime轮播时间间隔；
headerBGC 表头背景色；oddRowBGC 奇数行背景色；evenRowBGC 偶数行背景色；headerHeight 表头高度；align 列对齐方式；
index 是否显示行号

configone: {
        header: ["h1", "h2", "h3"],
        data: [
          {
            name: `
             <div class="text_bl">xxx文字标题</div>
                <div class="a1">
              <div class="a2" style = "width: 100%;background: #dc4e41">
                   <div>100%</div>
                    <div class="a3">2020年</div>
              </div>
          </div>
              `,

            value: 100,
          },
          {
            name: `
            <div class="text_bl">xxx文字标题</div>
            <div class="a1">
              <div class="a2" style = "width: 100%;background: #dc4e41">
                     <div>100%</div>
                    <div class="a3">2020年</div>
              </div>
          </div>
              `,
            value: 100,
            percent: 20,
          },
          {
            name: `
       <div> xxx文字标题 </div>
      <div class="a1">
              <div class="a2" style = "width: 5%;">
               <div>5%</div>
                    <div class="a3">2019年</div>
              </div>
              <div class="a4" style = "width: 30%;">
               <div>30%</div>
                 <div class="a9">2020年</div>
              </div>
          </div>
      `,
            value: 40,
          },
  
        ],
        unit: "%",
        waitTime: 3000,
        index: false,
        align: ["left"],
        headerHeight: 50,
        headerBGC: "#010c5100",
        oddRowBGC: "#061152",
        evenRowBGC: "#010c5100",
        rowNum: 6,
      },
      unit: "%",
    };

标签：轮播,xxx,表头,大屏,DataV,data,unit,name
来源： https://blog.csdn.net/weixin_49668076/article/details/120361700

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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