当前位置：首页 > news >正文

React echarts柱状图点击某个柱子跳转页面

news 2025/8/24 6:46:41

绘制echarts柱状图

在 ECharts 中，如果你想要在点击柱状图的某个柱子时进行页面跳转，你可以通过设置 series 中的 data 属性中的 itemStyle 或者使用 series 的 label 属性中的 emphasis 属性来实现。但是，直接在柱状图中实现点击跳转通常涉及到使用 JavaScript 的事件监听功能，而不是通过 ECharts 的配置直接实现。

步骤 1: 创建 ECharts 实例

首先，确保你已经创建了一个 ECharts 实例并且已经设置了柱状图的配置。

<div id="my-chart" style={{height:400}} />

var myChart = echarts.init(document.getElementById('my-chart'));
var option = {tooltip: {trigger: "axis",},legend: {right: 30,data: ["数量"],},xAxis: {type: 'category',data: ['A', 'B', 'C', 'D', 'E']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70],type: 'bar',barWidth: "40%",}]
};myChart.setOption(option);

步骤 2: 添加点击事件监听器

然后，你需要为 ECharts 实例添加一个点击事件监听器。当用户点击柱状图时，这个监听器会被触发。

项目的 react router是 v5 版本的，如果是新的 v6 版本可以使用 navigate

myChart.on('click', function (params) {if (params.componentType === 'series') {// 打印出 params 看一下，里面会有x轴和y轴的数据console.log(params);// 取x轴中的数据作为url的参数传递const {name} = params;// 获取对应的 URL 并进行跳转history.push({pathname: "/newPage",state: { code: name },});}
});

步骤 3: 取参数

传递过来的参数可以在 props.location.state 里看到。

跳转页面

React Router v5和v6 方式不太一样。

React Router v5

在React Router v5中，history.push通常是通过withRouter高阶组件或useHistory钩子（在函数组件中）来访问的。你可以使用history.push方法来携带参数，通常是通过URL的查询字符串（query string）或者通过状态（state）来实现。

通过查询字符串传递参数：

import { useHistory } from 'react-router-dom';function MyComponent() {let history = useHistory();function handleClick() {history.push({pathname: '/some-path',search: '?param1=value1&param2=value2',});}return <button onClick={handleClick}>Go to Some Path</button>;
}

通过状态传递参数：

import { useHistory } from 'react-router-dom';function MyComponent() {let history = useHistory();function handleClick() {history.push({pathname: '/some-path',state: { fromDashboard: true }});}return <button onClick={handleClick}>Go to Some Path</button>;
}

React Router v6

在React Router v6中，history对象被移除，取而代之的是使用useNavigate钩子来进行导航。传递参数的方式略有不同，但依然可以通过查询字符串或状态来实现。

通过查询字符串传递参数：

import { useNavigate } from 'react-router-dom';function MyComponent() {let navigate = useNavigate();function handleClick() {navigate('/some-path?param1=value1&param2=value2');}return <button onClick={handleClick}>Go to Some Path</button>;
}

通过状态传递参数：

import { useNavigate } from 'react-router-dom';function MyComponent() {let navigate = useNavigate();function handleClick() {navigate('/some-path', { state: { fromDashboard: true } });}return <button onClick={handleClick}>Go to Some Path</button>;
}