qianshanNucleicContrast/ruoyi-ui/src/views/dashboard/PanelGroupfour.vue

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


</template>

<script>
import 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: '150px'
    },
    height: {
      type: String,
      default: '150px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });

    console.log(this.chartData,58)
  },
  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({ czzrs , czbfb,zrs } = {}) {
      this.chart.setOption({
        color: [new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
               offset: 0,
               color: '#F69F24'
           },
           {
               offset: 1,
               color: '#F69F24'
           }]), new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
               offset: 0,
               color: '#FFE1B7'
           },
           {
               offset: 0.9,
               color: '#FFE1B7'
           }]),],
            tooltip: {
                  trigger: 'item'
              },
              legend: {
                  top: '10%',
                  left: 'center',
                  data:[]
              },
              // 设置环形中间的数据
                  graphic: [{
                      type: 'text',
                      left: 'center',
                      top: '47%',
                      z: 10,
                      style: {
                          fill: '#F69F24',
                          text: czbfb,
                          font: '12px Microsoft YaHei'
                      },
                      textStyle: {
                              color: "#F69F24",
                              fontSize: 12,
                              align: "center"
                            }
                  }],
              series: [
                  {
                      name: '人口数据',
                      type: 'pie',
                      radius: ['50%', '70%'],
                      center: ['center', '50%'],
                      avoidLabelOverlap: false,
                      // label: {
                      //     show: false,
                      //     position: 'center'
                      // },
                      // emphasis: {
                      //     label: {
                      //         show: true,
                      //         fontSize: '17',
                      //         fontWeight: '400',
                      //         color:'#2497D5'
                      //     }
                      // },
                      // labelLine: {
                      //     show: true
                      // },
                      itemStyle: {
                                  normal: {
                                      label: {
                                          show: false
                                      },
                                      labelLine: {
                                          show: false
                                      }
                                  },
                                  emphasis: {
                                      label: {
                                          show: false,
                                          position: 'outer',
                                          textStyle: {
                                              fontSize: '15',
                                              fontWeight: 'bold',
                                              color: 'white'
                                          }
                                      }
                                  }
                              },
                      data: [
                        {value: czzrs, name: '常住总人数'},
                        {value: zrs, name: '总人数'}

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