daimp-front/sub-government-screen-service/src/views/land/components/distributionCharts.vue

<template>
  <div class="distribution-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: 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.6, name: '耿马镇' },
    { value: 308.7, name: '勐撒镇' },
    { value: 359.6, name: '勐永镇' },
    { value: 452.6, name: '孟定镇' },
    { value: 388.9, name: '勐简乡' },
    { value: 508.7, name: '贺派乡' },
    { value: 369.5, name: '四排山乡' },
    { value: 610.8, name: '芒洪乡' },
    { value: 754.3, 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>
.distribution-charts {
  height: 100%;
}
</style>