echarts柱状图 实现点击每个柱状图跳转到新页面

  myChart.setOption(option);
                myChart.getZr().on('click', params => {
                    // 规定代码块↓↓
                    const pointInPixel = [params.offsetX, params.offsetY];
                    if (myChart.containPixel('grid', pointInPixel)) {
                        const xIndex = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];
                        // 规定代码块↑↑
                        let routeUrl;
                        // x轴数据
                        this.barechartsData.forEach((item, index) => {
                            if (index === xIndex) {
                                routeUrl = this.$router.resolve({
                                    path: '/page', // 跳转新页面
                                    query: {item}
                                });
                            }
                        });
                        window.open(routeUrl.href, '_blank');
                    }
                });

 

posted @ 2024-04-23 18:27  Qing`ing  阅读(452)  评论(0编辑  收藏  举报