DataV - Vue3

Appearance

锥形柱图 ​

锥形柱图

基础用法 ​

查看代码
vue
<template>
  <div w800px h320px flex="~ col" justify-center items-center bg-dark>
    <div>
      <dv-conical-column-chart :config="config" style="width:400px;height:200px;" />
    </div>
    <div pt5>
      <button btn @click="addData">
        新增数据
      </button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import top1 from '../../assets/img/1st.png'
import top2 from '../../assets/img/2st.png'
import top3 from '../../assets/img/3st.png'
import top4 from '../../assets/img/4st.png'
import top5 from '../../assets/img/5st.png'
import top6 from '../../assets/img/6st.png'
import top7 from '../../assets/img/7st.png'

const config = reactive({
  data: [
    {
      name: '周口',
      value: 55,
    },
    {
      name: '南阳',
      value: 120,
    },
    {
      name: '西峡',
      value: 71,
    },
    {
      name: '驻马店',
      value: 66,
    },
    {
      name: '新乡',
      value: 80,
    },
    {
      name: '信阳',
      value: 35,
    },
    {
      name: '漯河',
      value: 15,
    },
  ],
  img: [
    top1,
    top2,
    top3,
    top4,
    top5,
    top6,
    top7,
  ],
})

const addData = () => {
  config.data.push({
    name: `新增${Math.floor(Math.random() * (130 - 1)) + 1}`,
    value: Math.floor(Math.random() * (130 - 1)) + 1,
  })

  config.img.push(top7)
}
</script>

数值显示 ​

查看代码
vue
<template>
  <div w800px h320px flex="~ col" justify-center items-center bg-dark>
    <div>
      <dv-conical-column-chart :config="config" style="width:400px;height:200px;" />
    </div>
    <div pt5>
      <button btn @click="addData">
        新增数据
      </button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import top1 from '../../assets/img/1st.png'
import top2 from '../../assets/img/2st.png'
import top3 from '../../assets/img/3st.png'
import top4 from '../../assets/img/4st.png'
import top5 from '../../assets/img/5st.png'
import top6 from '../../assets/img/6st.png'
import top7 from '../../assets/img/7st.png'

const config = reactive({
  data: [
    {
      name: '周口',
      value: 55,
    },
    {
      name: '南阳',
      value: 120,
    },
    {
      name: '西峡',
      value: 71,
    },
    {
      name: '驻马店',
      value: 66,
    },
    {
      name: '新乡',
      value: 80,
    },
    {
      name: '信阳',
      value: 35,
    },
    {
      name: '漯河',
      value: 15,
    },
  ],
  img: [
    top1,
    top2,
    top3,
    top4,
    top5,
    top6,
    top7,
  ],
  showValue: true,
})

const addData = () => {
  config.data.push({
    name: `新增${Math.floor(Math.random() * (130 - 1)) + 1}`,
    value: Math.floor(Math.random() * (130 - 1)) + 1,
  })

  config.img.push(top7)
}
</script>

config属性 ​

参数说明类型可选值默认值
data柱数据Array<Object>见下方data属性[]
img柱顶图片urlArray<String>---[]
fontSize文字大小Number---12
imgSideLength图片边长Number---30
columnColor柱颜色String---'rgba(0, 194, 255, 0.4)'
textColor文字颜色String---'#fff'
showValue显示数值Boolean---false
sort1.4.2自动排序Boolean---true

TIP

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

data属性 ​

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