55 lines
1021 B
Vue
55 lines
1021 B
Vue
|
<template>
|
||
|
|
<view class="charts-box">
|
||
|
|
<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" :canvas2d="true" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { reactive, ref, watch } from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
chartData ?: Object,
|
||
|
|
position ?: '',
|
||
|
|
radius?:0,
|
||
|
|
label?:true
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const chartData = ref({})
|
||
|
|
const opts = reactive({
|
||
|
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
||
|
|
padding: [5, 5, 5, 5],
|
||
|
|
enableScroll: false,
|
||
|
|
dataLabel: props.label,
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
position: props.position,
|
||
|
|
lineHeight: 18
|
||
|
|
},
|
||
|
|
extra: {
|
||
|
|
pie: {
|
||
|
|
customRadius: props.radius,
|
||
|
|
activeOpacity: 0.5,
|
||
|
|
activeRadius: 10,
|
||
|
|
offsetAngle: 0,
|
||
|
|
labelWidth: 10,
|
||
|
|
border: true,
|
||
|
|
borderWidth: 2,
|
||
|
|
borderColor: "#FFFFFF"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
watch(
|
||
|
|
() => props.chartData,
|
||
|
|
(val) => {
|
||
|
|
chartData.value = val
|
||
|
|
}
|
||
|
|
)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.charts-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|