vue echarts 饼图/柱状图添加点击事件

<template>
  <div v-if="isShow" ref="chart" class="sc-chart-box" :style="[isHover?style:'']" >
  </div>
  <ro-empty v-else img-size="6vw"></ro-empty>
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
import echarts from "echarts";
import resize from "../../mixins/resize";
import {ldrkHJD} from '@/api/screen/ryxx';
export default   {
  mixins: [resize],
  props:{
    isHover:{
      type:Boolean,
      default:false
    },
    width:{
      type:String,
      default:'21vw'
    },
    height:{
      type:String,
      default:'14vw'
    },
    params:{
      type:Object,
      default:()=>{
        return{}
      }
    }
  },
    computed:{
    ...mapGetters(['deptId','xqxxbz']),
    style(){
      return {height:this.height,width:this.width}
    },
    isShow(){
      if(this.chartData ) return true;
      return false;
    }
  },
  watch:{
    deptId:function(){
      this.initChart();
    },
    xqxxbz:function(){
      this.initChart();
    },
    'params':{
      deep:true,
      handler(){
         this.initChart();
      }
    }
  },
  data(){
    return{
      chart:null,
      chartData:null,

    }
  },
  beforeDestroy(){
    if (!this.chart) return;
    this.chart.dispose();
    this.chart = null;
  },
  mounted(){
    this.initChart();
  },
  methods:{
    ...mapActions(['jyDialogOpen']),
    initChart:async function(){
      let {deptId,xqxxbz} = this.params;
      let _q = {};
      if(deptId)_q={deptId:deptId}
      if(xqxxbz)_q={xqxxbz:xqxxbz}
      if(this.xqxxbz){
        _q ={xqxxbz: this.xqxxbz}
      }
      let res = await ldrkHJD(_q);
      this.chartData = res.data;

      if(res.data.gj.length<=0 ) return;
      this.$nextTick(() => {
        this.setChartOption();

        this.chart.on('click', this.qsldrkFunc);  //全市流动人口数 点击事件
        this.chart.on('click', this.gxqldrkFunc);  //各区县流动人口数 点击事件
        this.chart.on('click', this.hjszsfFunc);  //户籍地所在省份统计 点击事件
        // this.chart.on('click', this.qsldrkFunc);  //全市流动人口数点击事件
      })
    },
    //全市流动人口数 点击事件
    qsldrkFunc(){
      let syrytj = {
        type: 'syryxx',
        tree: true,
        head: false,
        title: "",
        data: {
          deptId:e.code
        },
        open: true
      }
      this.jyDialogOpen(syrytj);

    },

    //各区县流动人口数 点击事件
    gxqldrkFunc(){
      let syrytj = {
        type: 'syryxx',
        tree: true,
        head: false,
        title: "",
        data: {
          deptId:e.code
        },
        open: true
      }
      this.jyDialogOpen(syrytj);

    },


    //户籍地所在省份统计 点击事件
    hjszsfFunc(){
      let syrytj = {
        type: 'syryxx',
        tree: true,
        head: false,
        title: "",
        data: {
          deptId:e.code
        },
        open: true
      }
      this.jyDialogOpen(syrytj);

    },



    setChartOption:async function(){
      let _gj =[];
      let _hj=[];

      console.log(this.chartData)
      // _gj = this.chartData.gj;
      // _hj = this.chartData.hj;
      _hj = [{code: "130501",
        name: "***市",
        value: 13}];
       this.$emit('syncData', 'ldhjdryPieChart', [..._gj,..._hj])
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption({
        color: ['#3DB8FF','#00BEED','#51E7E2','#A5D582','#F5E412','#c9ffa2','#f5f1c5'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} (占{d}%)'
        },
        // legend: {
        //   icon: 'circle',
        //   type: 'plain',
        //   textStyle: { //图例文字的样式
        //       color: '#FEFFFF',
        //       fontSize: 12
        //   },
        //   orient: 'horizontal',
        //   bottom: 10,
        //   itemWidth:10,
        //   itemHeight:10,
        // },
        series: [
          {
            color: ['#3DB8FF','#00BEED','#51E7E2','#A5D582','#F5E412','#c9ffa2','#f5f1c5'],
            type: 'pie',
            minAngle: 10,  // 设置每块扇形的最小占比
            center: ["50%","50%"],
            radius: [0, '35%'],
            label: {
              show:false,
              formatter: '{b}\n{c}人',
              // position:'inner',
              color:"#fff",
              fontSize: 14,
              fontWeight:600
            },
            labelLine: {
              show: false,
              length:50,
              length2:60,
              lineStyle:{
                color:'#fff',
                width:2
              }
            },
            data: _gj
          },
          {
            color: ['#3DB8FF','#00BEED','#51E7E2','#A5D582','#F5E412','#c9ffa2','#f5f1c5'],
            type: 'pie',
            minAngle: 10,  // 设置每块扇形的最小占比
            center: ["50%","50%"],
            radius: ['40%', '65%'],
            // width:'90%',
            // height:'90%',
            label:{
              show:true,
              alignTo:'labelLine',
              formatter: '{d}%\n{b}',
              // rich: {
              //   b:{
              //     color: '#fff',
              //     fontWeight: 'bold',
              //   }
              // }
            },
            labelLine: {
              show: true,
              length:10,
              length2:30,
            },
            labelLayout:function(params){
              return {
                x: params.rect.x + 10,
                y: params.rect.y + params.rect.height / 2,
                verticalAlign: 'middle',
                align: 'left',
                rotate:20
              };
            },
            data:_hj
          }
        ]
      })
    }
  }
}
</script>