canvas画图，echarts添加点击事件

最新推荐文章于 2024-11-05 15:46:36 发布

每天吃饭的羊

最新推荐文章于 2024-11-05 15:46:36 发布

阅读量312

点赞数 2

分类专栏： # 第一次见你文章标签：前端

本文链接：https://blog.csdn.net/m0_47999208/article/details/136654529

版权

第一次见你专栏收录该内容

55 篇文章 0 订阅

订阅专栏

本文介绍如何使用ECharts库创建一个带有点击事件的饼图，通过JavaScript实现图表的动态交互，当用户点击饼图区域时，会触发相应的回调并显示相关信息。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
    <title>ECharts Pie Chart with Click Event</title>
  </head>
  <body>
    <canvas
      id="canvas"
      width="600"
      height="400"
      style="border: 1px solid #d3d3d3"></canvas>
    <div id="pieChart" style="width: 600px; height: 400px"></div>

    <button class="button-glow">点击我</button>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "blue";
      ctx.beginPath();
      ctx.moveTo(100,100)
      ctx.quadraticCurveTo(150, 200, 200, 100);
      ctx.stroke();
      ctx.moveTo(200,100)
      ctx.quadraticCurveTo(250, 0, 300, 100);
      ctx.stroke();

      //-------------
      ctx.moveTo(100,200)
      ctx.quadraticCurveTo(150, 300, 200, 200);
      ctx.stroke();
      ctx.moveTo(200,200)
      ctx.quadraticCurveTo(250, 100, 300, 200);
      ctx.stroke();
      //-------------
      ctx.moveTo(100,300)
      ctx.quadraticCurveTo(150, 400, 200, 300);
      ctx.stroke();
      ctx.moveTo(200,300)
      ctx.quadraticCurveTo(250, 200, 300, 300);
      ctx.stroke();
function debounce(fn, delay) {
  let timeoutId;

  return function(...args) {
    // 清除之前设置的定时器
    clearTimeout(timeoutId);

    // 设置新的定时器，在delay毫秒后执行原函数
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 使用示例
function myFunction(){ console.log('Event triggered') } ;
const debouncedFunction = debounce(myFunction, 500); // 延迟500毫秒

window.addEventListener('resize', debouncedFunction);
      // 示例数据
      const data = [
        { value: 335, name: "Category 1" },
        { value: 310, name: "Category 2" },
        { value: 234, name: "Category 3" },
        { value: 135, name: "Category 4" },
        { value: 1548, name: "Category 5" },
      ];

      // 初始化 ECharts 实例
      const myChart = echarts.init(document.getElementById("pieChart"));

      // 配置饼图
      const option = {
        title: {
          text: "ECharts Pie Chart with Click Event",
        },
        series: [
          {
            name: "Pie Chart",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // 将配置设置到 ECharts 实例中
      myChart.setOption(option);

      // 添加点击事件
      myChart.on("click", function (params) {
        console.log("Clicked on:", params);
        alert(`Clicked on ${params.name}`);
      });
    </script>
  </body>
</html>