如何在AJ-Report饼图中实现点击展示弹框？

Question

如何在AJ-Report的饼图中点击饼图展示弹框

{

      name: "扇区设置",
      list: [
        {
          type: "el-dialog",
          label: "点击事件",
          name: "clickHandler",
          value: `function(params) {
    if (window.parent?.reportUtils) {
      window.parent.reportUtils.showModal({
        title: '扇区详情 - ' + params.name,
        content: \`
          <div style="padding:20px;color:#333;line-height:1.6;">
            <p><strong>扇区名称：</strong> \${params.name}</p>
            <p><strong>数值大小：</strong> \${params.value}</p>
            <p><strong>所占比例：</strong> \${params.percent}%</p>
            <p><strong>颜色：</strong> <span style="display:inline-block;width:15px;height:15px;background:\${params.color};"></span> \${params.color}</p>
          </div>
        \`,
        width: '500px'
      });
    }
  }`
        },加的这个代码el-dialog点击没有事件

Answer 1

在 AJ-Report 中实现饼图点击展示弹框功能，可以通过以下两种方法解决你遇到的问题：

方法一：使用 AJ-Report 内置弹框功能

function(params) {
  // 使用 AJ-Report 内置的弹框方法
  if (window.parent?.reportUtils) {
    window.parent.reportUtils.showModal({
      title: '扇区详情 - ' + params.name,
      content: `
        <div style="padding:20px;color:#333;line-height:1.6;">
          <p><strong>扇区名称：</strong> ${params.name}</p>
          <p><strong>数值大小：</strong> ${params.value}</p>
          <p><strong>所占比例：</strong> ${params.percent}%</p>
          <p><strong>颜色：</strong> 
            <span style="display:inline-block;width:15px;height:15px;background:${params.color};"></span> 
            ${params.color}
          </p>
        </div>
      `,
      width: '500px'
    });
  } else {
    // 备用方案：使用原生 alert
    alert(`点击项：${params.name}\n数值：${params.value}`);
  }
}

方法二：自定义弹框组件
​添加弹框容器​（在报表设计器中添加文本组件）：

<div id="custom-modal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;">
  <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:4px;min-width:300px;">
    <span style="position:absolute;top:10px;right:10px;cursor:pointer;" onclick="document.getElementById('custom-modal').style.display='none'">×</span>
    <div id="modal-content"></div>
  </div>
</div>

修改点击事件代码：

function(params) {
  const modal = document.getElementById('custom-modal');
  const content = document.getElementById('modal-content');
  
  if(modal && content) {
    content.innerHTML = `
      <h3>扇区详情 - ${params.name}</h3>
      <p><strong>扇区名称：</strong> ${params.name}</p>
      <p><strong>数值大小：</strong> ${params.value}</p>
      <p><strong>所占比例：</strong> ${params.percent}%</p>
      <p><strong>颜色：</strong> 
        <span style="display:inline-block;width:15px;height:15px;background:${params.color};"></span> 
        ${params.color}
      </p>
    `;
    modal.style.display = 'block';
  }
}

el-dialog 不生效的原因可能是因为AJ-Report 基于 Vue+ECharts，但设计器中的 el-dialog 是 Element UI 组件，不能直接在脚本中使用，应使用内置的 reportUtils.showModal 或自定义 DOM 弹框