关于echarts添加点击事件，并实现跳转链接_echarts饼状图中使用点击事件来跳转到新的链接-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37698249/article/details/103696088

本文介绍如何在Echarts饼图中添加点击事件，并实现链接跳转功能。通过实例代码，展示了初始化Echarts实例、设置图表配置项和数据的方法，以及如何通过.on()方法监听点击事件并根据params数据进行页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入echarts

如何引入Echarts，直接参考官网即可，地址附上：https://www.echartsjs.com/zh/index.html
我们在官方示例中，随便挑选一个饼图的案例
以下是代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>echarts学习</title>
    <script src="./js/echarts.common.min.js"></script>
  </head>
  <body>
    <div
      id="container"
      style="width: 600px;height:400px;margin:200px auto"
    ></div>
    <script>
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("container"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎", url: "http://www.baidu.com" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.on("click", function(params) {
        console.log(params);
        if (params.name == "搜索引擎") {
          window.location.href = params.data.url;
        }
      });
    </script>
  </body>
</html>