进度条
基本使用
vue
<template>
<view>
<jp-chart-arcbar chart-id="arcbarbase" :series="attribute.series"></jp-chart-arcbar>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
series: [
{
name: '正确率',
color: '#2fc25b',
data: 0.8
}
]
})
</script>
title/subtitle
vue
<template>
<view>
<jp-chart-arcbar chart-id="arcbartitle" :series="attribute.series" :title="attribute.title" :subtitle="attribute.subtitle"></jp-chart-arcbar>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
series: [
{
name: '正确率',
color: '#2fc25b',
data: 0.8
}
],
title: { name: '完成率', fontSize: 15, color: '#666666' },
subtitle: { name: '20%', fontSize: 18, color: '#DF1616' }
})
</script>
arc-width
vue
<template>
<view>
<jp-chart-arcbar
:arc-width="40"
chart-id="arcbararcwidth"
:series="attribute.series"
:title="attribute.title"
:subtitle="attribute.subtitle"
></jp-chart-arcbar>
</view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
series: [
{
name: '正确率',
color: '#2fc25b',
data: 0.8
}
],
title: { name: '完成率', fontSize: 15, color: '#666666' },
subtitle: { name: '20%', fontSize: 18, color: '#DF1616' }
})
</script>
props 属性
| 属性名 | 类型 | 默认值 |
|---|---|---|
| chartId | String | VmkhvvEorPQTvQPQqUOQaNCtglKjKIOA |
| series | Array | [] |
| height | Number | 一般不用设置，除非特殊需求, 图表的宽度是父控件的宽度，高度默认 250，可以自己传高度 |
| extra | Object | 参考 uchart 文档 |
| color | Array | 折线图颜色 ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'] |
| arcWidth | Number | 圆环宽度 |
| title | String | 标题 |
| subtitle | String | 副标题 |