Q-Conical 锥形柱图

提示

锥形柱图是特殊的柱状图，他将根据数值大小，降序排列锥形柱，适合排名类数据展示。

参考 dataV-锥形柱图 (opens new window)

<QConical :config="config" :data="data" style="width:400px;height:200px;"></QConical>

基本示例

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

<script>
  export default {
    data() {
      return {
        config: {
          showValue: true,
          img: [
            '/img/1st.png',
            '/img/2st.png',
            '/img/3st.png',
            '/img/4st.png',
            '/img/5st.png',
            '/img/6st.png',
            '/img/7st.png'
          ],
        },
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 71
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 35
          },
          {
            name: '漯河',
            value: 15
          }
        ],
      }
    }
  }
</script>
<style>

</style>

Expand Copy Copy

Attributes

config 属性

属性名	说明	类型	可选值	默认值
data(对应:data)	柱数据	Array<Object>	data属性	[]
img	柱顶图片url	Array<String>	—	[]
fontSize	文字大小	Number	—	12
imgSideLength	图片边长	Number	—	30
columnColor	柱颜色	String	—	'rgba(0, 194, 255, 0.4)'
textColor	文字颜色	String	—	#fff
showValue	显示数值	Boolean	—	false

提示

将根据自动排序后的排名顺序使用img中的图片。

data 属性

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