74 lines
1.4 KiB
Vue
74 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<view class="charts-box">
|
||
|
|
<qiun-data-charts
|
||
|
|
type="ring"
|
||
|
|
:opts="opts"
|
||
|
|
:canvas2d="true"
|
||
|
|
:chartData="chartData"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { reactive, ref, watch } from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
title?:string,
|
||
|
|
val?:number,
|
||
|
|
radius?:number,
|
||
|
|
position?:string,
|
||
|
|
chartData?:''
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const chartData = ref({})
|
||
|
|
const opts = reactive({
|
||
|
|
rotate: false,
|
||
|
|
rotateLock: false,
|
||
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
|
|
padding: [5,5,5,5],
|
||
|
|
dataLabel: true,
|
||
|
|
enableScroll: false,
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
position: props.position,
|
||
|
|
lineHeight: 25
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
name: props.title,
|
||
|
|
fontSize: 18,
|
||
|
|
color: "#666666"
|
||
|
|
},
|
||
|
|
subtitle: {
|
||
|
|
name: props.val,
|
||
|
|
fontSize: 25,
|
||
|
|
color: "#7cb5ec"
|
||
|
|
},
|
||
|
|
extra: {
|
||
|
|
ring: {
|
||
|
|
customRadius: props.radius,
|
||
|
|
ringWidth: 20,
|
||
|
|
activeOpacity: 0.5,
|
||
|
|
activeRadius: 10,
|
||
|
|
offsetAngle: 90,
|
||
|
|
labelWidth: 15,
|
||
|
|
border: true,
|
||
|
|
borderWidth: 3,
|
||
|
|
borderColor: "#FFFFFF"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
watch(
|
||
|
|
() => props.chartData,
|
||
|
|
(val) => {
|
||
|
|
chartData.value = val
|
||
|
|
}
|
||
|
|
)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
||
|
|
.charts-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
</style>
|