### ECharts 饼图 图例 Formatter 数字可点击实现方法 在 ECharts 中，可以通过 `formatter` 自定义图例的内容，并结合事件监听来实现点击数字的功能。以下是具体的实现思路： #### 1. 使用 `formatter` 定制图例内容 通过设置 `legend.formatter` 属性，可以自定义图例显示的文字内容。例如，在图例文字后添加数据值或百分比[^1]。 ```javascript legend: { formatter: function (name) { const total = data.reduce((sum, item) => sum + item.value, 0); const targetItem = data.find(item => item.name === name); const percentage = ((targetItem.value / total) * 100).toFixed(2) + '%'; return `${name} (${percentage})`; } } ``` 此代码片段中，`formatter` 函数会动态计算每个图例项对应的数值比例并将其附加到图例名称之后[^1]。 --- #### 2. 添加点击事件处理逻辑 为了使图例中的数字部分具备交互功能，需借助 ECharts 的事件机制。具体来说，可以在初始化图表时绑定 `click` 事件[^2]。 ```javascript myChart.on('click', params => { if (params.componentType === 'series') { alert(`您点击了 ${params.name}, 数据值为: ${params.value}`); } }); ``` 在此处，当用户点击饼图上的某个扇区时，触发弹窗提示该区域的数据值。如果目标是让图例外部的数字也支持点击，则需要进一步扩展逻辑[^2]。 --- #### 3. 结合 HTML 和富文本增强交互体验 由于原生图例不完全支持复杂的 DOM 操作，因此推荐利用 ECharts 富文本特性创建更灵活的布局。这种方式允许我们手动渲染带有超链接样式的标签[^1]。 示例配置如下： ```javascript graphic: [{ type: 'text', left: 'center', top: 'middle', style: { text: '{a|Click me!}', font: 'bolder 14px Microsoft YaHei', fill: '#333' }, onclick: function () { window.open('https://example.com'); } }] ``` 虽然上述例子展示的是全局图形组件而非单独针对某一项的比例数，但它展示了如何向静态文本注入行为的能力[^1]。 --- #### 4. 组织最终解决方案 综合以上技术要点，下面给出完整的实现方案： ```javascript option = { tooltip: { trigger: 'item' }, legend: { left: "5%", bottom: "10%", orient: 'vertical', formatter: function (name) { let total = 0; option.series[0].data.forEach(function (item) { total += item.value; }); const currentData = option.series[0].data.find(d => d.name === name); const percent = Math.round(currentData.value / total * 10000) / 100; return `{title|${name}} : {value|${currentData.value} ({percent|${percent}%)}>`; }, rich: { title: { fontSize: 14, color: '#333' }, value: { fontSize: 16, color: 'blue', cursor: 'pointer' }, percent: { fontSize: 12, color: '#aaa' } } }, series: [ { name: 'Access From', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: 40, fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ] } ] }; // 监听 click 事件 myChart.on('click', function (params) { console.log(params); // 输出被点击项目的详细信息 }); // 初始化实例化对象 let myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); // 动态更新样式以响应鼠标悬停效果 document.querySelectorAll('.echarts-legend-text').forEach(el => { el.addEventListener('mouseover', e => e.target.style.color = 'red'); el.addEventListener('mouseout', e => e.target.style.color = ''); }); ``` ---