# 锥形柱图

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

<dv-conical-column-chart :config="config" style="width:400px;height:200px;" />
点击复制

# 基本示例

点击以展示/隐藏config数据
export default {
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 71
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 35
    },
    {
      name: '漯河',
      value: 15
    }
  ],
  img: [
    '/img/conicalColumnChart/1st.png',
    '/img/conicalColumnChart/2st.png',
    '/img/conicalColumnChart/3st.png',
    '/img/conicalColumnChart/4st.png',
    '/img/conicalColumnChart/5st.png',
    '/img/conicalColumnChart/6st.png',
    '/img/conicalColumnChart/7st.png'
  ]
}

# 数值显示

点击以展示/隐藏config数据
export default {
  data: [
    {
      name: '周口',
      value: 55
    },
    {
      name: '南阳',
      value: 120
    },
    {
      name: '西峡',
      value: 71
    },
    {
      name: '驻马店',
      value: 66
    },
    {
      name: '新乡',
      value: 80
    },
    {
      name: '信阳',
      value: 35
    },
    {
      name: '漯河',
      value: 15
    }
  ],
  img: [
    '/img/conicalColumnChart/1st.png',
    '/img/conicalColumnChart/2st.png',
    '/img/conicalColumnChart/3st.png',
    '/img/conicalColumnChart/4st.png',
    '/img/conicalColumnChart/5st.png',
    '/img/conicalColumnChart/6st.png',
    '/img/conicalColumnChart/7st.png'
  ],
  showValue: true
}

# config属性

属性 说明 类型 可选值 默认值
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

TIP

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

# data属性

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