project-html/src/views/dashboard/PieChart.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: '330px'
    },
    pieLegend:{
      type: Array,
      default: []
    },
    pieData:{
      type: Array,
      default: []
    },
    otTitle: {
      type: String,
      default: ''
    },
    //  deptLg:{
    //   type: Array,
    //   default: []
    // },
    // deptData:{
    //   type: Array,
    //   default: []
    // },

  },
  data() {
    return {
      chart: null,
      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: '合作' }
      ],

    }
  },
  watch: {
    pieData (newV, oldV) {
      this.initChart()
    }
  },
  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');
      if(!this.pieData.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;

      // console.log(this.pieData);
      // this.data=[]
      // this.pieData.forEach(item=>{
      //   let obj=item.name;
      //   let item2={}
      //   item2.name=obj.value;
      //   item2.value=item.value;
      //   this.data.push(item2)
      // })
     //this.setStyle()
      this.chart.setOption({
        title: {
          text: this.otTitle+"联系部门分布",
          x:'center',
          y: 'bottom',
          left: "1%",
          top: "1%",
          textStyle: {
            fontSize: 22,
            fontFamily: "Microsoft YaHei",
            lineHeight: 30,
            color: "#116bcc",
            fontWeight:"bold"
          },
        },
        tooltip: {
          top:90,
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          textStyle: {
            fontSize:'18',

          }
        },
        grid: {
          left: -20,
          // right: -20,
          bottom: 50,
          top: 150,
          containLabel: true
        },
         color: ['#dcdbe0', '#2d38ff', '#5962ff', '#5984ff', '#59bbff', '#00a79d', '#ffa200', '#ff8417', '#ffc700', '#f7622e'],
        // itemStyle: {
        //   normal: {
        //     color: ['pink', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'],
        //   }
        // },
        label: {
          fontSize: 16,
          color: '#333'
        },
        // legend: {
        //   left: 'center',
        //   bottom: '10',
        //   data:this.pieLegend,
        //   // data: ['院士建议', '咨询研究报告', '中央交办', '部委委托', '地方委托','主动报送', '申请', '委托', '交办', '合作']
        // },
        series: [
          {
            name: '项目分布',
            type: 'pie',
            // roseType: 'radius',
            // radius: '55%',
            radius: ['30%', '50%'], //饼形图改成中空的
            center: ['55%', '48%'],
            data:this.pieData,
            // top: "50%"
            labelLine: { //饼形图引导线颜色
              lineStyle: {
                color: '#ccc'
              }
            },
            label: {
              fontSize: 16,
              formatter: function (param) {
                let text = param.data.name;
                if (text.length < 7) {
                  // return '{name|{b}}\n{value|{d}%( {c})}'
                  return text 
                } else {
                  return text.substring(0, 6) + '...'
                }
              },
            },
            // itemStyle: {
            //   normal: {
            //     color
            //   }
            // }
        //        itemStyle: {
        // normal: {
        //   color: function (colors) {
        //     var colorList = [
        //       'pink',
        //       '#5470c6',
        //       '#91cd77',
        //       '#ef6567',
        //       '#f9c956',
        //       '#75bedc'
        //     ];
        //     return colorList[colors.dataIndex];
        //   }
        // },
        //        }

           //  // backgroundColor: "rgba(255, 255, 255, 1)",
           //
           //  },
            // animationEasing: 'cubicInOut',
            // animationDuration: 2600,


          }
        ]
      });


      this.chart.on("click",function (params) {
        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)
      });
    },
    setStyle(){
      var colors= ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
      this.pieData.forEach((i,item)=>{
        const deptName = item.name;
        let itemStyle = "";
        if(deptName){
          itemStyle = {
                normal: {
                  //这里是重点
                  color: colors[i]
                }
          }
          return 
          switch (deptName) {
            case "机械与运载工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: '#dcdbe0'
                }

              };
              break;
            case "信息与电子工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: '#2d38ff'
                }

              };
              break;
            case "化工、冶金与材料工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: '#5962ff'
                }

              };
              break;
            case "能源与矿业工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: '#5984ff'
                }

              };
              break;
            case "土木、水利与建筑工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: '#59bbff'
                }

              };
              break;
            case "环境与轻纺工程学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: '#00a79d'
                }

              };
              break;
            case "农业学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: '#ffa200'
                }

              };
              break;
            case "医药卫生学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: '#ff8417'
                }

              };
              break;
            case "工程管理学部":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: '#ffa200'
                }

              };
              break;
            case "中国工程院战略咨询中心":
              itemStyle = {
                normal: {
                  //这里是重点
                  color: '#ffa800'
                }

              };
              break;
          }
        }
        item.itemStyle=itemStyle;
        item.label={color:"#333"}
      })
    }

  }
}
</script>