wuliguanli/ruoyi-ui-wuguan/src/views/dashboard/PanelGroup.vue

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from './mixins/resize';

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '80%'
    },
    height: {
      type: String,
      default: '200px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
watch: {
     chartData: {
       deep: true,
       handler(val) {
         this.setOptions(val)
       }
     }
   },
   data() {
     return {
       chart: null
     }
   },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
     })
   },
   beforeDestroy() {
     if (!this.chart) {
       return
     }
     this.chart.dispose()
     this.chart = null
   },
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons');
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
       setOptions(row) {
         console.log(row,56)
        this.chart.setOption({
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  top: '5%',
                  left: 'center',
                  data: [],

                },
                // 设置环形中间的数据
                graphic: [
                  {
                    type: 'text',
                    left: '50%',
                    top: '10%',
                    z: 10,
                    style: {
                      fill: '#AAAAAA',
                      text: "",
                      font: '16px Microsoft YaHei'
                    },

                    textStyle: {
                      color: '#AAAAAA',
                      fontSize: 17,
                      align: 'center'
                    }
                  }
                ],
                series: [
                  {
                    name: '车辆进入/辆',
                    type: 'pie',
                    radius: ['55%', '70%'],
                    center: ['50%', '39%'],
                    avoidLabelOverlap: false,
                     padAngle: 3, // 调整数值，控制间隔大小
                    color:['#6096FB', '#4EBCB5',],
                    label: {
                        show: true,
                        position: 'center'
                    },
                    // emphasis: {
                    //     label: {
                    //         show: true,
                    //         fontSize: '17',
                    //         fontWeight: '400',
                    //         color:'#2497D5'
                    //     }
                    // },
                    labelLine: {
                        show: true
                    },
                    itemStyle: {
                      normal: {
                        label: {
                          show: true
                        },
                        labelLine: {
                          show: true
                        }
                      },
                      emphasis: {
                        label: {
                          show: false,
                          position: 'outer',
                          textStyle: {
                            fontSize: '15',
                            fontWeight: 'bold',
                            color: '#AAAAAA'
                          }
                        }
                      }
                    },
                    data: [ { value: row.nb, name: '内部车辆' },{ value: row.wl, name: '外来车辆' },
                    ]
                  }
                ]
              });
       }
   }
};
</script>