echarts环形图自定义legend

### 如何在 ECharts 环形图中自定义 Legend 样式和位置 为了实现这一目标，在 `data()` 函数内返回的对象可以配置 `legend` 属性来调整图例的外观与布局[^3]。 #### 定义数据模型中的图例属性 ```javascript export default { data() { return { chartOption: { legend: { orient: 'vertical', left: '40%', top: 'center', icon: 'circle', // 设置图例图标形状为圆形 itemGap: 20, itemWidth: 8, padding: 0, selectedMode: false, triggerEvent: true, textStyle: { rich: { a: { align: 'left', color: '#19273B', width: 130, padding: [0, 8, 0, 0] }, b: { align: 'left', color: '#8D97A4', width: 55, padding: [0, 8, 0, 0] }, c: { align: 'left', color: '#19273B' } } } }, series: [ { type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, data: [] } ] } }; } } ``` 此代码片段展示了如何通过修改 `legend` 对象内的参数来自定义图例的位置 (`left`, `top`) 和样式 (如颜色、宽度等)。此外，还设置了富文本标签用于更复杂的文本格式化需求。 对于具体的图表实例初始化部分，则可以在 mounted 生命周期钩子函数里完成： ```javascript mounted() { const ringDiagram = this.$echarts.init(document.getElementById('ringDiagram')); ringDiagram.setOption(this.chartOption); }, ``` 这段脚本负责获取 DOM 节点并应用之前定义好的选项到实际渲染出来的环形图上[^1]。