胶囊柱图

胶囊柱图

基础用法

南阳

周口

漯河

郑州

西峡

 

0

34

67

101

134

167

201

234

万元

查看代码

<template>
  <div w50rem h25rem flex="~ col" justify-center items-center bg-dark>
    <div>
      <dv-capsule-chart :config="config" style="width:25rem;height:15rem" />
    </div>
    <div pt5>
      <button btn @click="addData">增加数据</button>
    </div>
  </div>
</template>
<script setup lang="ts">

const addData = ()=>{
  config.data.push({
    name: '测试'+Math.floor(Math.random() * 100),
    value: Math.floor(Math.random() * 100)
  })
}

const config = reactive({
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 123
    },
    {
      name: '漯河',
      value: 98
    },
    {
      name: '郑州',
      value: 75
    },
    {
      name: '西峡',
      value: 66
    },
  ],
  colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  unit: '万元',
  labelNum: 8,
})
</script>

属性

属性	说明	类型	可选值	默认值
data	柱数据	Array<Object>	data属性	[]
unit	单位	String	---	''
colors	环颜色	Array<String>	[1]	[2]
showValue	显示数值	Boolean	---	false
textColor1.4.0	文字颜色	String	---	'#fff'
fontSize1.4.0	文字大小	Number	---	12
labelNum1.7.2	标签显示数量	Number	---	6

config注释

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

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

data属性

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