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

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

article 2025/2/23 18:11:46

绘制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>;
}