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

数据大屏可视化-DataV图表-排名轮播表
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: "%",
    };
上一篇:Unit 5


下一篇:时间空间复杂度