62 lines
1.1 KiB
Vue
62 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<view class="charts-box">
|
||
|
|
<qiun-data-charts
|
||
|
|
type="rose"
|
||
|
|
:opts="opts"
|
||
|
|
:chartData="chartData"
|
||
|
|
:canvas2d="true"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { reactive, ref, watch } from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
position?:'',
|
||
|
|
chartData?:''
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const chartData = ref({});
|
||
|
|
|
||
|
|
const opts = reactive({
|
||
|
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||
|
|
padding: [5,5,5,5],
|
||
|
|
enableScroll: false,
|
||
|
|
tooltipShow:true,
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
position: props.position,
|
||
|
|
lineHeight: 25
|
||
|
|
},
|
||
|
|
extra: {
|
||
|
|
rose: {
|
||
|
|
type: "radius",
|
||
|
|
minRadius: 50,
|
||
|
|
activeOpacity: 0.5,
|
||
|
|
activeRadius: 10,
|
||
|
|
offsetAngle: 0,
|
||
|
|
labelWidth: 15,
|
||
|
|
border: true,
|
||
|
|
borderWidth: 2,
|
||
|
|
borderColor: "#FFFFFF",
|
||
|
|
linearType: "custom"
|
||
|
|
},
|
||
|
|
}
|
||
|
|
})
|
||
|
|
watch(
|
||
|
|
() => props.chartData,
|
||
|
|
(val) => {
|
||
|
|
chartData.value = val
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
||
|
|
.charts-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
</style>
|