vue中echarts纵轴添加点击事件

直接上代码

initChart () {
            this.ganttChart = echarts.init(document.getElementById('gantt-chart'))
            const _self = this
            const chartOption = {
                title: {
                    text: '项目进度表',
                    left: 10
                },
                grid: {
                    containLabel: true,
                    left: 20
                },
                xAxis: {
                    type: 'time'
                },
                yAxis: {
                    triggerEvent: true, // 默认为false, 不可点击
                    data: this.chartData.map(item => item.node)
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        var res = '节点周期:' + '</br>'
                        var date0 = params[0].data && _self.$utils.stringToDateString(params[0].data, false, '-')
                        var date1 = params[1].data && _self.$utils.stringToDateString(params[1].data, false, '-')
                        res += date0 + '-' + date1
                        return res
                    }
                },
                series: [
                    {
                        name: '实际开始时间',
                        type: 'bar',
                        stack: 'timeout',
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,0,0,0)'
                            }
                        },
                        lineStyle: {},
                        data: this.chartData.map(item => item.startTime)
                    },
                    {
                        name: '超时',
                        type: 'bar',
                        stack: 'timeout',
                        barWidth: 14, // 柱宽度
                        itemStyle: {
                            normal: {
                                barBorderRadius: 25, // 柱圆角
                                color: function (params) {
                                    let color = ''
                                    var item = _self.chartData.filter(item => { return item.node === params.name })
                                    var status = item && item[0] && item[0].status
                                    // console.log('====', status)
                                    // status 1 待完成 2 已完成 3 延期
                                    color = status === 1 ? '#d4cece' : (status === 2 ? '#3E84E9' : '#c23531')
                                    return color
                                }
                            }
                        },
                        data: this.chartData.map(item => item.stopTime)
                    }
                ]
            }
            this.ganttChart.setOption(chartOption) // 第二个参数：true: 是否和之前设置的option进行合并，true为不合并，默认为false:合并
            this.ganttChart.on('click', (params) => { // 监听点击事件，此图只给纵轴添加了点击事件，所以不需要判断
                console.log('点击纵轴', params)
                // 代码逻辑todo
            })
            this.resizeCharts()
        },

划重点：

option 里的 yAxis 属性 设置 triggerEvent: true, // 默认为false, 不可点击
图表添加click点击事件this.ganttChart.on(‘click’, (params) => {})