71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="home-plant-breed-charts">
|
||
|
|
<custom-echart-pie :chart-data="plantBreed.valData" height="100%" :option="plantBreed.option" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { ref, reactive, onMounted } from 'vue';
|
||
|
|
|
||
|
|
const plantBreed = 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: 12, // 图例文字的字体大小
|
||
|
|
color: '#fff', // 图例文字的颜色
|
||
|
|
},
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
color: '#333',
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: [60, 80],
|
||
|
|
roseType: 'area',
|
||
|
|
center: ['40%', '50%'],
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 20,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
valData: [
|
||
|
|
{ value: 100, name: '农户' },
|
||
|
|
{ value: 105, name: '农企/合作社' },
|
||
|
|
{ value: 217, name: '生产加工企业' },
|
||
|
|
{ value: 217, name: '农资企业' },
|
||
|
|
{ value: 217, name: '种源企业' },
|
||
|
|
],
|
||
|
|
});
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
if (plantBreed.valData && plantBreed.length) {
|
||
|
|
plantBreed.valData.forEach((m, index) => {
|
||
|
|
let num = 100;
|
||
|
|
m.value = (Number(m.value) + Math.random() + num).toFixed(2);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.home-plant-breed-charts {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|