介绍

本组件用于展示指标或标签数据，组件包括以下三个区域：

1. 标题区域：支持设置 0-20 个长度的标题；
2. 功能区域：目前只支持“下钻”功能；
3. 展示区域：展示所配置的指标或标签数据。

快速上手

1. 安装

npm i oibp-indicator

2. 在项目中引入

// main.js

import Vue from 'vue'

// 引入指标组件
import OibpIndicator from 'oibp-indicator'
Vue.component('oibp-indicator', OibpIndicator)

3. 在项目中使用

<template>
  <div class="home">
    <div class="indicator-container">
      <oibp-indicator :title="title" :show-drill-down="true" :indicator-list="indicatorList" @drillDown="handleDrillDown" />
    </div>
  </div>
</template>

<script>
const indicatorListData = [
  { key: '1', label: '指标1', value: '10000' }, { key: '2', label: '指标2', value: '20000', warning: true },
  { key: '3', label: '指标3', value: '300001223454999' }, { key: '4', label: '指标4', value: '400001223454888' },
  { key: '5', label: '指标5', value: '50000' }, { key: '6', label: '指标6', value: '60000' },
  { key: '5', label: '指标5', value: '50000' }, { key: '6', label: '指标6', value: '60000' },
]

export default {
  name: 'Home',
  data() {
    return {
      title: '',
      indicatorList: [],
    }
  },
  created () {
    setTimeout(() => {
      this.title = '组件标题'
      this.indicatorList = indicatorListData
    }, 2000)
  },
  methods: {
    handleDrillDown() {
      console.log('下钻')
    }
  }
}
</script>

<style scoped>
.home { background-color: #ddd; padding: 10px; }
.indicator-container { display: flex; overflow-x: auto; margin-top: 10px; }
.indicator-container > .oibpIndicator { margin-right: 10px; }
.indicator-container > .oibpIndicator:last-child { margin-right: 0; }
</style>

组件支持的属性及方法

| 属性/方法 | 描述 | 类型 | 默认值 | |-----------------|-----------|----------|--------| | title | 组件标题 | string | '' | | show-drill-down | 是否显示下钻功能 | boolean | true | | indicator-list | 指标数据 | array | [] | | drillDown | 点击下钻触发的方法 | function | |

1. indicator-list 数据结构示例

/**
 * key：指标的唯一标识
 * label：指标的名称
 * value：指标的值，最多展示十位字符，超出部分显示 ...
 * warning：指标是否需要预警，默认为 false，如果设置为 true，指标的值将会以另一种颜色展示
 */
const indicatorList = [
  { key: '1', label: '指标1', value: '10000' }, { key: '2', label: '指标2', value: '20000', warning: true },
  { key: '3', label: '指标3', value: '300001223454999' }, { key: '4', label: '指标4', value: '400001223454888' },
  { key: '5', label: '指标5', value: '50000' }, { key: '6', label: '指标6', value: '60000' },
  { key: '5', label: '指标5', value: '50000' }, { key: '6', label: '指标6', value: '60000' },
]

注意事项

1. 本组件使用了 flex 布局，建议包裹组件的容器也开启 flex 布局。如：

<template>
  <div class="home">
    <div class="indicator-container">
      <oibp-indicator/>
    </div>
  </div>
</template>

<style scoped>
.indicator-container {
  display: flex;
}
</style>

2. 本组件的主要用途是展示指标或标签数据，如果 indicator-list 属性没传，或者传的是空数组，那么整个组件将不会展示。