圆环 ​

<template>
  <view>
    <jp-chart-ring chart-id="ringbase" :series="attribute.series"></jp-chart-ring>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
  series: [
    {
      data: [
        { name: '一班', value: 50 },
        { name: '二班', value: 30 },
        { name: '三班', value: 20 },
        { name: '四班', value: 18 },
        { name: '五班', value: 8 }
      ]
    }
  ]
})
</script>

<template>
  <view>
    <jp-chart-ring chart-id="ringpos" :series="attribute.series" legend-pos="bottom"></jp-chart-ring>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
  series: [
    {
      data: [
        { name: '一班', value: 50 },
        { name: '二班', value: 30 },
        { name: '三班', value: 20 },
        { name: '四班', value: 18 },
        { name: '五班', value: 8 }
      ]
    }
  ]
})
</script>

<template>
  <view>
    <jp-chart-ring
      chart-id="ringtitle"
      :series="attribute.series"
      legend-pos="bottom"
      :title="attribute.title"
      :subtitle="attribute.subtitle"
    ></jp-chart-ring>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
  series: [
    {
      data: [
        { name: '一班', value: 50 },
        { name: '二班', value: 30 },
        { name: '三班', value: 20 },
        { name: '四班', value: 18 },
        { name: '五班', value: 8 }
      ]
    }
  ],
  title: { name: '完成率', fontSize: 15, color: '#666666' },
  subtitle: { name: '20%', fontSize: 18, color: '#DF1616' }
})
</script>