首页 > 其他分享 >echarts柱状图 实现点击每个柱状图跳转到新页面

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

时间:2024-04-23 18:35:17浏览次数:24  
标签:routeUrl myChart 新页面 柱状图 params 跳转

  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');
                    }
                });

 

标签:routeUrl,myChart,新页面,柱状图,params,跳转
From: https://www.cnblogs.com/qing1224/p/18153531

相关文章

  • 标签页间通信——打开新标签页并跳转第三方地址
    场景appwebView对象,打开一个H5页面,该H5点击一个按钮,会进行页面跳转但是打开了一个新的标签页,并且显示为about:blank如果是用浏览器进行相同操作,流程正常进行 解决查看该H5页面源码:functionf(){ $('.boton_azul').on('click',function(e){ popupBank=window.ope......
  • Pyecharts制作动态GDP柱状图
    学习使用pyecharts制作动态柱状图使用csv模块进行csv数据文件处理importcsvfrompyecharts.chartsimportBar,Timelinefrompyecharts.optionsimport*frompyecharts.globalsimportThemeTypedefdealCSVFile():"""读取处理csv数据文件:retu......
  • vim中函数跳转的功能实现
    左手编程,右手年华。大家好,我是一点,关注我,带你走入编程的世界。公众号:一点sir,关注领取编程资料介绍函数跳转是要给IDE中非常重要也非常常用的功能,而原生的Vim并不提供这个功能,这个确定有点让人遗憾,按理说这么常用的功能应该是要提供的。但是没有关系,有插件可以实现这样的功......
  • pyecharts实现点击省跳转省地图
    诶呀我去太感谢了终于找到实现点击地图省份实现跳转了。参考:利用pyecharts实现中国省与市之间的跳转_pyecharts点击地图跳转-CSDN博客 需要注意的问题:1.如果想在全国地图显示数据,data数据中要用如:北京市、广东省、香港特别行政区、内蒙古自治区,这种带有后缀的。(可能有些不需......
  • HarmonyOS-基础之页面跳转
    1、配置页面路由信息resources-->base-->profile-->main_pages.json{"src":["pages/demo03/Index","pages/demo03/Detail"]}2、编写页面组件Index.ets/***路由跳转*-使用鸿蒙内置的router*/importrouterfrom'......
  • vue+element ui el-form 阻止表单输入框按回车刷新页面
    表单只有一个元素的时候,回车会触发页面刷新,加上下面这个属性可以解决这个问题@submit.native.prevent给某个el-input添加回车键监听@keyup.enter.native="onSearch"<el-form:model="filters"@submit.native.prevent><el-form-item>......
  • Qt QCharts绘制柱状图,柱高和y轴数据刻度不匹配
    QCharts绘制柱状图,柱高和y轴数据刻度不匹配1//在项目pro文件中添加以下内容2QT+=charts34//在.h文件中添加以下内容,注意:需要将头文件及命名空间添加到ui命名空间之前,否则将提示错误5#include<QtCharts/QChartView>6#include<QtCharts/QBarSerie......
  • IDEA中使用tomcatconfiguration做服务器后,无法从html跳转到servlet的原因
    就我的项目而言,因为我没有用maven中的tomcat插件,用的是IDEA中的tomcatconfiguration,所以刚启动服务器生成的网址是http://localhost:8080/brand_demo_war/,而因为我的项目叫brand-demo,servlet叫做selectAllServlet,所以正常情况浏览器跳转到该servlet后的url应该是http://localhos......
  • Android 点击按钮跳转
    packagecom.example.helloworld;importandroidx.appcompat.app.AppCompatActivity;importandroid.content.Intent;importandroid.net.Uri;importandroid.os.Bundle;importandroid.view.View;importandroid.widget.Button;publicclassMainActivityextendsA......
  • Origin2022中文版如何绘制反向双轴柱状图?
    柱形图是科研中经常用到的,今天给大家分享创建反向双轴柱状图,可直观的在同一图表中展示两组正负数据,且即使两组数值差异较大也可正常显示,比文字描述更清晰操作步骤:1、打开Origin2022软件,在Book1中输入如下示例数据 2、选中所有数据 3、点击菜单栏中【绘图】→【柱形图,饼......