echart双环形图

### ECharts 实现双环形图 在 Vue 文件中通过 `circleChart` 组件来创建图表，可以利用 ECharts 的配置项自定义双环形图。为了实现这一目标，除了基本的设置外，还需要特别注意数据系列（series）中的每一层环形图的数据和样式。 #### 配置双环形图的基础结构 对于双环形图而言，在 series 中应至少有两个对象分别代表内外两个圆环，并且每个对象都需指定 type 为 'pie' 和 roseType 设置为 false 来确保绘制的是标准圆形而非玫瑰图[^1]： ```javascript const option = { title: { text: '双环形图', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '内圈名称', type: 'pie', radius: ['40%', '55%'], // 定义内圈大小范围 avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor:'#fff', borderWidth:2 }, label: { show: true, position: 'outside' }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold' } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'} ] }, { name: '外圈名称', type: 'pie', radius: ['60%', '75%'], labelLine: { length: 30 }, label: { formatter: '{a|{b}:}\n{c} ({d}%)', rich: { a: { color: '#999', lineHeight: 22, align: 'center' } } }, data:[ {value:234, name:'视频广告'}, {value:278, name:'联盟广告'} ] } ] }; ``` 上述代码片段展示了如何构建一个具有两层不同半径比例的饼状区域以形成视觉上的双重嵌套效果；同时设置了不同的标签显示方式以及强调状态下的文字属性。