DataV - Vue3

Appearance

动态环图 ​

动态环图

基础用法 ​

查看代码
vue
<template>
  <div w50rem h34rem flex="~ col" justify-center items-center bg-dark>
    <dv-active-ring-chart :config="conf" style="width:300px;height:300px"/>
    <div flex="~ col" gap2 justify-center items-center>
      <div>
        <span text-white>城市：</span>
        <input v-model="cityName" demo-input />
      </div>
      <div>
        <span text-white>Value：</span>
        <input v-model="cityValue" type="number" demo-input />
      </div>
      <div>
        <button btn @click="addData">
          添加数据
        </button>
      </div>
    </div>
  </div>
</template>
<script setup>

const cityName = ref('测试')
const cityValue = ref(58)

const conf = reactive({
  lineWidth: 24,
  digitalFlopStyle: {
    fill: 'pink',
  },
  data: [
    {
      name: '杭州',
      value: 98,
    },
    {
      name: '金华',
      value: 150,
    },
    {
      name: '宁波',
      value: 62,
    },
    {
      name: '太原',
      value: 54,
    },
  ],
})

const addData = () => {
  if (!cityName.value || !cityValue.value)
    return

  conf.data.push({
    name: cityName.value,
    value: parseInt(cityValue.value),
  })
}
</script>

数字不使用DigitalFlop ​

查看代码
vue
<template>
  <div w50rem h34rem flex="~ col" justify-center items-center bg-dark>
    <dv-active-ring-chart :config="conf" style="width:300px;height:300px" :isDigitalFlop="false"/>
    <div flex="~ col" gap2 justify-center items-center>
      <div>
        <span text-white>城市：</span>
        <input v-model="cityName" demo-input />
      </div>
      <div>
        <span text-white>Value：</span>
        <input v-model="cityValue" type="number" demo-input />
      </div>
      <div>
        <button btn @click="addData">
          添加数据
        </button>
      </div>
    </div>
  </div>
</template>
<script setup>

const cityName = ref('测试')
const cityValue = ref(58)

const conf = reactive({
  lineWidth: 24,
  digitalFlopStyle: {
    fill: 'pink',
  },
  data: [
    {
      name: '杭州',
      value: 98,
    },
    {
      name: '金华',
      value: 150,
    },
    {
      name: '宁波',
      value: 62,
    },
    {
      name: '太原',
      value: 54,
    },
  ],
  numToFixed: 2,
})

const addData = () => {
  if (!cityName.value || !cityValue.value)
    return

  conf.data.push({
    name: cityName.value,
    value: parseInt(cityValue.value),
  })
}
</script>

属性 ​

参数说明类型可选值默认值
config配置Object见下方
isDigitalFlop1.7.2数字是否使用DigitalFlop显示Boolean---true

config属性 ​

参数说明类型可选值默认值
radius环半径String/Number'50%'/ 100'50%'
activeRadius环半径（动态）String/Number'55%'/110'55%'
data环数据Array<Object>data属性见下方表格[]
lineWidth环线条宽度Number---20
activeTimeGap切换间隔(ms)Number---3000
color环颜色Array<String>[1][]
textColor1.4.1文字颜色String---'#fff'
digitalFlopStyle数字翻牌器样式Object---[2]
digitalFlopToFixed数字翻牌器小数位数Number---0
numToFixed1.7.2数字小数位数Number---0
digitalFlopUnit数字翻牌器单位String---''
animationCurve动效曲线StringTransition'easeOutCubic'
animationFrame动效帧数Number[3]50
showOriginValue显示原始值Boolean---false

config注释 ​

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

  • [2] digitalFlopStyle用于配置内置的数字翻牌器样式，详情可查阅数字翻牌器，你可以配置该项来设置数字翻牌器的文字颜色和大小。默认值如下：

css
digitalFlopStyle: {
  fontSize: 25,
  fill: '#fff'
}
  • [3] animationFrame用于配置动画过程的帧数即动画时长

data属性 ​

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