gongdan/ruoyi-ui-gongdan/src/views/dashboard/PieChartone.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: '100%'
    },
    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,566)
          var colors = ["#00B278","#91CC75","#FAC858", "#EE6666","#73C0DE","#5470C6"];
        this.chart.setOption({

              series: [{
                     name: '',
                     type: 'pie',
                     radius: ['40%', '80%'],
                     center: ['50%', '59%'],
                     labelLine:{
                          normal:{
                               length:8,   	// 指示线长度
                               lineStyle: {
                                  // color: "#595959"  // 指示线颜色
                               }
                          },
                     },
                     label: {
                                                     normal: {
                                                                    show: true,
                                                                    position: 'center',
                                                                    color:'#4c4a4a',
                                                                    formatter:  '{active|总告警数}' + '\n\r' +  ' {total|' + row.zs + '}' + '{activen|/次}' ,
                                                                    rich: {
                                                                        total:{

                                                                            fontSize: 20,
                                                                            fontWight:700,
                                                                            fontFamily : "微软雅黑",
                                                                            color:'#454c5c'
                                                                        },
                                                                        active: {
                                                                            fontFamily : "微软雅黑",
                                                                            fontSize: 16,
                                                                            color:'#6c7a89',
                                                                            lineHeight:30,
                                                                        },
                                                                        activen: {
                                                                            fontFamily : "微软雅黑",
                                                                            fontSize: 16,
                                                                            color:'#666666',
                                                                            lineHeight:30,
                                                                        },
                                                                    }
                                                                },
                                                                emphasis: {//中间文字显示
                                                                    show: true,
                                                                }
                                                  },


                             data:[
                               {value:row.wlfw,
                                   name:'网络服务',
                                   hoverAnimation: false,
                                   itemStyle: {
                                       normal: {
                                           borderWidth: 5, // 为两个颜色之间那个宽度
                                           borderColor: '#fff',  // 边框颜色白色
                                           color: colors[0]
                                       }
                                   }
                               },
                               {
                                   value:row.sbfw,
                                   name:'设备服务',
                                   hoverAnimation: false,
                                   itemStyle: {
                                       normal: {
                                           borderWidth: 5,
                                           borderColor: '#fff',
                                           color: colors[1]
                                       }
                                   }
                               },
                               {
                                   value:row.rjfw,
                                   name:'软件服务',
                                   hoverAnimation: false,
                                   itemStyle: {
                                       normal: {
                                           borderWidth: 5,
                                           borderColor: '#fff',
                                           color: colors[2]
                                       }
                                   }
                               },
                               {
                                   value:row.kffw,
                                   name:'开发服务',
                                   hoverAnimation: false,
                                   itemStyle: {
                                       normal: {
                                           borderWidth: 5,
                                           borderColor: '#fff',
                                           color: colors[3]
                                       }
                                   }
                               },
                               {
                                   value:row.sjfw,
                                   name:'设计服务',
                                   hoverAnimation: false,
                                   itemStyle: {
                                       normal: {
                                           borderWidth: 5,
                                           borderColor: '#fff',
                                           color: colors[4]
                                       }
                                   }
                               },
                               {
                                   value:row.qtfw,
                                   name:'其他服务',
                                   hoverAnimation: false,
                                   itemStyle: {
                                       normal: {
                                           borderWidth: 5,
                                           borderColor: '#fff',
                                           color: colors[5],
                                       }
                                   }
                               },

                                ]
                              }
                               ]
              });
       }
   }
};
</script>