echarts 点击对应名称 获取其它传参

 yAxis: [{

                type: "category",

                // data: ['NO.1', 'NO.2', 'NO.3', 'NO.4', 'NO.5', 'NO.6', 'NO.7'].reverse(),

                data: data.map((ele, index) => `NO.${index + 1}`).reverse(),

                axisTick: {

                    show: false,

                },

                axisLine: {

                    lineStyle: {

                        color: "#1B273A",

                    },

                },

                axisLabel: {

                    interval: 0,

                    color: "#fff",

                    align: "right",

                    fontSize: 12,

                    padding: [0, 10, 0, 0],

                    rich: {

                        div: {

                            color: "#FD6AA2",

                            fontWeight: 800,

                        },

                    },

                },

            },

            {

                type: "category",

                // data: data.map((ele) => ele.name),

                data: data.map((ele) => ele.id),

                axisTick: {

                    show: false,

                },

                triggerEvent: true,

                axisLabel: {

                    // color: "#D6750C",

                    // clickable: true,

                    formatter(value, index) {

                        console.log(value)

                            // return `{div|${value}}\n{red|${data.find(ele => ele.name == value).percent}%}`

                        return `{div|${data.find((ele,index) => ele.id == value).name}}\n{red|${data.find((ele,index) => ele.id== value).percent}%}`

                    },

                    align: "left",

                    fontSize: 12,

                    padding: [0, 10, 0, 0],

                    rich: {

                        div: {

                            color: "#ffffff",

                            fontWeight: 800,

                        },

                        red: {

                            color: "#D6750C",

                            fontWeight: 800,

                        },

                    },

                },

                axisLine: {

                    show: false,

                },

            },

        ],

data里的数据是id，不做显示，

formatter回调函数里才是要做显示的部分，echarts点击事件传的是data里的id。有了id就可以做其他事情了。

  // 渲染个人排行榜数据

    renderGrphb(data, callback) {

      let that=this;

      let config = callback(data, this.personalAcitve)

      this.redGrphb = echarts.init(this.$refs.grphb)

      this.redGrphb.setOption(config, true)

 

      this.redGrphb.on('click',function(params){

       

        // that.$router.push({

        //   path:'/indexAdmin/personDetail',

        //   query:{id:1}

        // })

        if(params.targetType=="axisLabel"){

           

             let url = that.$router.resolve({

                  path:"/indexAdmin/personDetail",

                  query:{ username:params.value }

              })

              window.open(url.href , '_blank');

        }

       

       

 

      })

    },