echart环形图详解

### 创建和定制 ECharts 环形图 #### 配置环形图基础属性 为了创建一个基本的环形图，在 `series` 中指定类型为 `'pie'` 并调整内径比例来形成环状显示。通常会设置 `radius` 参数中的两个值分别为外半径和内半径的比例，从而控制环宽。 ```javascript option = { series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], // 设置内外半径百分比 avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'} ] } ] }; ``` #### 添加中心文字 利用 `graphic` 属性可以向图表添加任意 SVG 形状或文本作为装饰性元素[^1]： ```javascript graphic: [{ type: 'text', left: 'center', top: 'middle', style: { text: '总销售额\n¥89万', textAlign: 'center', fill: '#333', font: 'bolder 20px Microsoft YaHei' } }] ``` #### 实现内部渐变效果 对于希望给环形区域增加视觉吸引力的情况，可以通过修改 `itemStyle.normal.color` 来应用线性渐变填充。注意这里的例子适用于 gauge 类型而非 pie 类型，但对于某些版本可能同样适用[^2]: ```javascript itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#FF6F6F'},// 渐变起始颜色 {offset: 1, color: '#FEAEBB'} // 渐变结束颜色 ] ) } } ``` #### 数据处理与格式化函数 当涉及到数据呈现时，有时需要对原始数值进行转换以便更直观地表达含义。例如，通过编写辅助工具方法来进行单位附加等操作[^3]： ```javascript function unitFormatter(value = '', unit = ''){ return `${value}${['', '-'].includes(String(value)) ? '' : unit}`; } // 应用于 tooltip 或者其他地方的数据格式化 tooltip: { formatter: params => `${params.name}: ${unitFormatter(params.value, "件")}` }, ```