echarts环形图图例

### ECharts 环形图图例配置示例 对于希望实现带有滚动功能以及定时触发更新效果的环形图，可以按照如下方式来配置： #### 基础配置项 首先定义基础选项 `option` ，其中包含了标题、提示框组件（tooltip）、图例（legend），还有系列列表（series）。特别注意的是，在此场景下，为了使图例支持滚动，需设置 `type:'scroll'` 和指定合适的高度宽度等属性给到 legend 组件。 ```javascript let option = { title: { text: '环形图', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', // 设置为垂直方向显示 top: '15%', left: '70%', // 调整位置参数适应页面布局需求 type: 'scroll', // 启用图例滚动条 height: 200 // 设定图例区域的高度 }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: true, position: 'outside' } } ] }; ``` #### 定制化图例内容格式 为了让图例外观更加美观易读，可以通过 formatter 函数来自定义每一条目下的文字展示形式。这里给出一个例子，它会把名称和对应的数值分行显示出来，并应用样式标签 `{a|}` 来控制字体外观[^2]。 ```javascript legend: { ... formatter: function(name){ var target; for(var j=0;j<legenddata.length;j++){ if(legenddata[j].name===name){ target=legenddata[j].value; } } return '{a|'+name+'}\n{b|总金额:'+target+'}'; }, textStyle:{ rich:{} } }, ... ``` #### 实现自动高亮选中特定扇区的效果 通过调用实例对象上的 dispatchAction 方法并传入适当的动作类型与索引值即可达到目的。下面这段代码展示了如何每隔两秒切换下一个数据点被突出显示的状态[^1]。 ```javascript function setDispathAction(chartInstance,typeName,dIndex,total){ chartInstance.dispatchAction({ type:typeName, seriesIndex:0,// 序列索引 dataIndex:dIndex// 数据索引 }); setTimeout(function(){ let newIndex=dIndex+1>total?0:dIndex+1; setDispathAction(chartInstance,typeName,newIndex,total); },2000); } setDispathAction(myChart,'highlight',0,data.length-1); ``` 以上就是有关于 ECharts 中创建具有可滚动图例及动态交互特性的环形图的一些基本指导信息。