echarts这个效果怎么做的？

Question

点击圆环的哪里，哪里外面就会出现一条弧线。

Answer 1

说下 echarts 实现这个效果的思路

• 叠加一层 pie 做一个圆环，和内层使用相同的数据
• 通过事件动态添加，只显示当前点击区块的外层环，其他全部透明即可

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);

function getDefaultOptions() {
    return {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
        ]
    }
}

function getWrapperPie(name) {
    return {
        name: 'Access From',
        type: 'pie',
        radius: ['52%', '55%'],
        data: getDefaultOptions().data.map((item) => {
            if (item.name !== name) {
                item.itemStyle = { color: 'transparent' }
            }
            return item;
        })
    }
}

myChart.setOption({
    series: [
        getDefaultOptions()
    ]
});

myChart.on('click', 'series.pie', (params) => {
    const { name } = params.data;

    const options = {
        series: [
            getDefaultOptions(),
            getWrapperPie(name)
        ]
    }

    myChart.setOption(options);
})

Answer 2

<canvas id="canvas"></canvas>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const width = 500; // 画布宽度
const height = 500; // 画布高度

canvas.width = width;
canvas.height = height;

const centerX = width / 2; // 圆心 x 坐标
const centerY = height / 2; // 圆心 y 坐标
const radius = 100; // 圆环半径
const lineWidth = 10; // 圆环线条宽度

// 绘制圆环
function drawCircle() {
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = "#000000";
  ctx.stroke();
  ctx.closePath();
}

// 绘制弧线
function drawArc(angle) {
  ctx.clearRect(0, 0, width, height);

  // 绘制圆环
  drawCircle();

  // 计算弧线起始点坐标
  const startX = centerX + Math.cos(angle) * (radius + lineWidth);
  const startY = centerY + Math.sin(angle) * (radius + lineWidth);

  // 绘制弧线
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.arc(centerX, centerY, radius + lineWidth, angle, angle + Math.PI / 2);
  ctx.lineWidth = 3;
  ctx.strokeStyle = "#ff0000";
  ctx.stroke();
  ctx.closePath();
}

// 点击事件监听器
canvas.addEventListener("click", function(event) {
  const rect = canvas.getBoundingClientRect();
  const mouseX = event.clientX - rect.left;
  const mouseY = event.clientY - rect.top;

  // 计算点击位置相对于圆心的角度
  const angle = Math.atan2(mouseY - centerY, mouseX - centerX);

  // 绘制弧线
  drawArc(angle);
});

以上来着AI答案，亲测了效果请看图片，再加点动画效果和点击那个区域展示大小限制应该就差不多就能实现了，可以参考一下哈。个人感觉css也能实现回头研究一下可以。