Q-Capsule 胶囊柱图

参考 dataV-胶囊柱图 (opens new window)

<QCapsule :config="config" :data="data" style="width:300px;height:200px"></QCapsule>

基本示例

<template>
  <div style="background: black;height: 300px" class="flex-center-cus">
    <QCapsule :config="config" :data="data" style="width:300px;height:200px"></QCapsule>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
        },
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 123
          },
          {
            name: '漯河',
            value: 98
          },
          {
            name: '郑州',
            value: 75
          },
          {
            name: '西峡',
            value: 66
          },
        ],
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

进阶示例

<template>
  <div style="background: black;height: 300px" class="flex-center-cus">
    <QCapsule :config="config" :data="data" style="width:300px;height:200px"></QCapsule>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
          unit: '单位',
          showValue: true
        },
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 123
          },
          {
            name: '漯河',
            value: 98
          },
          {
            name: '郑州',
            value: 75
          },
          {
            name: '西峡',
            value: 66
          },
        ],
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

Attributes

config 属性

属性名	说明	类型	可选值	默认值
data(对应:data)	柱数据	Array<Object>	data属性	[]
unit	单位	String	—	''
colors	环颜色	Array<String>	[1]	[2]
showValue	显示数值	Boolean	—	false

config 注释

[1] 颜色支持hex|rgb|rgba|颜色关键字等四种类型。

[2] 默认配色为['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']。

data 属性

属性名	说明	类型	可选值	默认值
name	柱名称	String	—	—
value	柱对应值	Number	—	—