project-html/src/views/dashboard/DeptPieChart.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: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    deptLg:{
      type: Array,
      default: []
    },
    deptData:{
      type: Array,
      default: []
    },
    otTitle: {
      type: String,
      default: ''
    },


  },
  data() {
    return {
      chart: null,
      data:[]
    }
  },
  watch: {
    deptData (newV, oldV) {
      this.initChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null
  },
  methods: {
    initChart() {
      // this.data=[]
      // this.deptData.forEach(item=>{
      //   let obj=item.name;
      //   let item2={}
      //   item2.name=obj.value;
      //   item2.value=item.value;
      //   this.data.push(item2)
      // })
      this.chart = echarts.init(this.$el, 'macarons');
      if(!this.deptData.length){
        var html =
          '<div style="text-align:center;"><div style="line-height:260px;color:#868686; font-size: 26px;">暂无数据</div>' +
          '<h3 style="color: #74bcff; font-size: 18px;">'+this.otTitle+'联系部门分布</h3></div>';
        this.$el.innerHTML = html;
        this.$el.removeAttribute('_echarts_instance_')
      }
      const _this = this;
      this.chart.setOption({


        title: {
          text: this.otTitle+"联系部门分布",
          x:'center',
          y: 'bottom',
          left: "1%",
          top: "1%",
          textStyle: {
            fontSize: 24,
            fontFamily: "Arial",
            lineHeight: 30,
            color: "rgb(43,97,159)",
            fontWeight:"bold"
          },
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // legend: {
        //   left: 'center',
        //   bottom: '10',
        //   data:this.deptLg,
        //   // data: ['院士建议', '咨询研究报告', '中央交办', '部委委托', '地方委托','主动报送', '申请', '委托', '交办', '合作']
        // },
        series: [
          {
            name: '项目分布',
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '55%'],
            data:this.deptData,
            // data: [
            //   { value: 320, name: '院士建议' },
            //   { value: 240, name: '咨询研究报告' },
            //   { value: 149, name: '中央交办' },
            //   { value: 100, name: '部委委托' },
            //   { value: 59, name: '地方委托' },
            //   { value: 123, name: '主动报送' },
            //   { value: 220, name: '申请' },
            //   { value: 56, name: '委托' },
            //   { value: 67, name: '交办' },
            //   { value: 78, name: '合作' }
            // ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      });

      // this.chart.on("click",function (params) {
      //   // alert(params.name)
      //   const deptName = params.name;
      //   let departmentId = "";
      //   if(deptName){
      //     switch (deptName) {
      //       case "机械与运载工程学部":
      //         departmentId = "25";
      //         break;
      //       case "信息与电子工程学部":
      //         departmentId = "26";
      //         break;
      //       case "化工、冶金与材料工程学部":
      //         departmentId = "27";
      //         break;
      //       case "能源与矿业工程学部":
      //         departmentId = "28";
      //         break;
      //       case "土木、水利与建筑工程学部":
      //         departmentId = "29";
      //         break;
      //       case "环境与轻纺工程学部":
      //         departmentId = "30";
      //         break;
      //       case "农业学部":
      //         departmentId = "31";
      //         break;
      //       case "医药卫生学部":
      //         departmentId = "32";
      //         break;
      //       case "工程管理学部":
      //         departmentId = "33";
      //         break;
      //     }
      //   }
      //
      //   _this.$emit('deptToPage', departmentId)
      // });
    }
  }
}
</script>