78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<ChartCard margin="0 0 30rpx 0" title="风险分级管控" >
|
||
|
|
<view class="rish-ranking">
|
||
|
|
<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
|
||
|
|
</view>
|
||
|
|
</ChartCard>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import ChartCard from '@/components/chartCard.vue'
|
||
|
|
import {
|
||
|
|
ref
|
||
|
|
} from 'vue';
|
||
|
|
import {
|
||
|
|
onReady, onShow
|
||
|
|
} from '@dcloudio/uni-app'
|
||
|
|
|
||
|
|
const opts = ref({
|
||
|
|
color: ["#EE6666", "#EF893B","#EFCB3B","#3B8CEF"],
|
||
|
|
padding: [5, 5, 5, 5],
|
||
|
|
enableScroll: false,
|
||
|
|
legend: {
|
||
|
|
lineHeight:20,
|
||
|
|
fontSize: 10,
|
||
|
|
itemGap: 20
|
||
|
|
},
|
||
|
|
extra: {
|
||
|
|
pie: {
|
||
|
|
activeOpacity: 0.5,
|
||
|
|
activeRadius: 10,
|
||
|
|
offsetAngle: 0,
|
||
|
|
labelWidth: 15,
|
||
|
|
border: true,
|
||
|
|
borderWidth: 3,
|
||
|
|
borderColor: "#FFFFFF"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const chartData = ref({})
|
||
|
|
|
||
|
|
const handleTap = (e) => {
|
||
|
|
console.log(e)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
onReady(() => {
|
||
|
|
let res = {
|
||
|
|
series: [{
|
||
|
|
data: [{
|
||
|
|
"name": "重大风险",
|
||
|
|
"value": 50,
|
||
|
|
"labelText": "重大风险:50"
|
||
|
|
}, {
|
||
|
|
"name": "较大风险",
|
||
|
|
"value": 30,
|
||
|
|
"labelText": "较大风险:30"
|
||
|
|
}, {
|
||
|
|
"name": "一般风险",
|
||
|
|
"value": 20,
|
||
|
|
"labelText": "一般风险:20"
|
||
|
|
}, {
|
||
|
|
"name": "低风险",
|
||
|
|
"value": 8,
|
||
|
|
"labelText": "低风险:8"
|
||
|
|
}]
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
chartData.value = JSON.parse(JSON.stringify(res));
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.rish-ranking {
|
||
|
|
width: 100%;
|
||
|
|
height: 480rpx;
|
||
|
|
}
|
||
|
|
</style>
|