Gyyq-Upstairs/src/views/components/analysis/invest.vue

<template>
<div>分析</div>
</template><template>
    <div ref="chart" style="width: 30rem; height: 15rem;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'RingChart',
    mounted() {
      this.renderChart();
    },
    methods: {
      renderChart() {
        const chartDom = this.$refs.chart;
        const myChart = echarts.init(chartDom);
  
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical', // 图例垂直排列
            right: '10%', // 图例在右侧
            top: 'center', // 图例垂直居中
            itemGap: 40, //右侧间隔
            formatter: function (name) {
              // 自定义图例显示格式
              const data = [
                { value: 54, name: '国企' },
                { value: 65, name: '民企' },
                { value: 32, name: '外企' },
              ];
              // 文本标签
              const item = data.find(item => item.name === name);
              return `${name} ${item.value}个`;
            }
          },
          series: [
            {
              name: '项目分布',
              type: 'pie',
              radius: ['40%', '60%'], 
              center: ['30%', '50%'], 
              data: [
              { value: 54, name: '国企' , itemStyle:{color:'#36C3FB'}},
              { value: 65, name: '民企' , itemStyle:{color:'#5B76F9'} },
              { value: 32, name: '外企' , itemStyle:{color:'#FAC858'} },
              ],
              label: {
                show: false // 隐藏饼图内部的标签
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
  
        myChart.setOption(option);
      }
    }
  };
  </script>
  
  <style scoped>
  /* 你可以在这里添加样式 */
  </style>