75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<template>
|
|
<div class="inputs-gmp-charts">
|
|
<custom-echart-pie :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
|
const chartsData = reactive({
|
|
option: {
|
|
color: ['#3685fe', '#41b879', '#ffd500'],
|
|
title: {
|
|
text: ' ',
|
|
textStyle: {
|
|
color: '#333',
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
|
|
right: '0', // 距离左侧10%的位置
|
|
top: 'middle', // 垂直居中
|
|
orient: 'vertical', // 图例垂直排列
|
|
itemWidth: 15, // 图例标记的宽度
|
|
itemHeight: 8, // 图例标记的高度
|
|
textStyle: {
|
|
fontSize: 10, // 图例文字的字体大小
|
|
color: '#fff', // 图例文字的颜色
|
|
},
|
|
},
|
|
label: {
|
|
color: '#333',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: [20, 80],
|
|
roseType: 'area',
|
|
center: ['40%', '50%'],
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
borderRadius: 5,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
valData: [
|
|
{ value: 205, name: '耿马镇' },
|
|
{ value: 308, name: '勐撒镇' },
|
|
{ value: 359, name: '勐永镇' },
|
|
{ value: 452, name: '孟定镇' },
|
|
{ value: 388, name: '勐简乡' },
|
|
{ value: 508, name: '贺派乡' },
|
|
{ value: 369, name: '四排山乡' },
|
|
{ value: 610, name: '芒洪乡' },
|
|
{ value: 754, name: '大兴乡' },
|
|
],
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (chartsData.valData && chartsData.valData.length) {
|
|
chartsData.valData.forEach((m, index) => {
|
|
let num = 100;
|
|
m.value = (Number(m.value) + Math.random() + num).toFixed(0);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.inputs-gmp-charts {
|
|
height: 100%;
|
|
}
|
|
</style>
|