锥形柱图

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

<ConicalColumnChart 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	---	---