Skip to content
On this page

饼图或者环状图


显示代码
html
<n-radio-group v-model:value="value" name="radiogroup">
  <n-radio v-for="song in songs" :key="song.value" :value="song.value"> {{ song.label }} </n-radio>
</n-radio-group>
<hu-pie-chart
  :data="data"
  :series="{ center: ['35%', '50%'] }"
  :inner-radius="'50%'"
  :outer-radius="'80%'"
  :isPie="!value"
  style="height:200px;width:400px;background-color:rgba(27, 32, 54, 0.8)"
></hu-pie-chart>

<script setup>
  import { ref } from 'vue'
  const data = ref([
    { value: 150, name: '名称1' },
    { value: 20, name: '名称2' },
    { value: 25, name: '名称3' },
    { value: 5, name: '名称4' },
  ])
  const value = ref(true)
  const songs = ref([
    {
      value: true,
      label: '饼图',
    },
    {
      value: false,
      label: '环图',
    },
  ])
</script>

Attributes

参数说明类型默认值
data数据集合[Object, Array]{}
series数据集合Array[]
tooltip鼠标移动到图例的提升信息Object{ formatter: "{b}: {c}" }
legendOption图例配置Object{right: 'auto', top: 'auto',orient: 'horizontal'}
centerInfo饼图中间展示信息String''
center饼图中心位置Array["50%", "50%"]
colors自定义颜色Array[]
innerRadius内圈大小[String, Number]"40%"
outerRadius外圈大小[String, Number]"70%"
isPie是否是饼图或者环图Booleantrue

Released under the MIT License.