关于echarts添加点击事件，并实现跳转链接

最新推荐文章于 2024-03-08 11:05:01 发布

big tail

最新推荐文章于 2024-03-08 11:05:01 发布

阅读量9.9k

点赞数 7

本文链接：https://blog.csdn.net/qq_37698249/article/details/103696088

版权

引入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>

代码解析

为echarts添加点击事件，通过.on的方法，详细请看上面代码部分
跳转链接：通过window.location.href = 'http://www.baidu.com’的方式来跳转
下图为点击每一项饼图打印出来的params数据，这里我只给搜索引擎添加了一个url属性，下图可以看到params中的data里有一个url属性，跳转到百度的

以上就是关于echarts饼图添加点击事件，并且如何跳转链接的全部解答了，如果有什么不对的地方，希望大家能指出来，加油！

big tail

关注

7
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
关于echarts添加点击事件，并实现跳转链接

引入echarts如何引入Echarts，直接参考官网即可，地址附上：https://www.echartsjs.com/zh/index.html我们在官方示例中，随便挑选一个饼图的案例以下是代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />...
复制链接

扫一扫