一、echarts环形图百分比
echarts环形图是一种展示数据比例的常用图表类型。在环形图中,每个扇形区域的大小代表该项数据占总数据的比例,因此其百分比非常重要。我们可以使用echarts的series.data.label.format配置项来设置每个扇形区域中百分比的显示形式。
option = { series: [{ type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], label: { position: 'inside', formatter: '{c}%' } }] }
在以上代码中,我们使用label.format配置项将每个扇形区域中的数值转换为百分比并加上百分号。
二、echarts环形图引导线加圆圈
为了更好地展示echarts环形图中的数据,我们可以在图表中加入引导线和圆圈。引导线可以将数据标签与对应的扇形区域相连,圆圈则可以将这个连接更加醒目。
option = { series: [{ type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], label: { show: true, formatter: '{b}: {c} ({d}%)' }, labelLine: { show: true, length: 20, length2: 50, smooth: true }, itemStyle: { borderWidth: 2, borderColor: '#fff' } }] }
在以上代码中,我们设置了label.show和labelLine.show配置项来显示引导线和数据标签。同时,我们使用了itemStyle来设置圆圈的样式。
三、echarts环形图悬浮框
在echarts环形图中,我们可以使用tooltip配置项来展示一些与数据有关的详细信息。
option = { tooltip: { trigger: 'item', formatter: '{b} : {c} ({d}%)' }, series: [{ type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], label: { show: true, formatter: '{b}' } }] }
四、echarts环形图中间加入文字
使用echarts的图形文本组件,我们可以在echarts环形图的中间加入一些文字,从而更好地说明数据的含义。
option = { graphic: { type: 'text', left: 'center', top: 'center', style: { fill: '#000', text: 'echarts环形图', font: 'bold 20px Microsoft YaHei' } }, series: [{ type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] }] }
五、echarts环形图中间文字
除了在echarts环形图的中心添加文字外,我们还可以在中心位置展示数据的总计。
option = { title: { text: '数据总计', x: 'center', y: '40%' }, graphic: [ { type: 'text', left: 'center', top: 'center', style: { text: '1617', textAlign: 'center', font: 'bold 20px Microsoft YaHei' } }, { type: 'text', left: 'center', top: '55%', style: { fill: '#666', text: '总计', textAlign: 'center', font: 'bold 14px Microsoft YaHei' } } ], series: [{ type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] }] }
六、echarts环形图数据标签
数据标签可以直接在echarts环形图中,显示每个扇形区域的值,并且可以与文字、引导线等进行联动。
option = { series: [{ type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], label: { show: true, formatter: '{b}: {c} ({d}%)' } }] }
七、echarts环形图位置
使用echarts环形图时,我们有时需要调整其位置,以便更好地适应页面的布局。
option = { position: ['50%', '50%'], series: [{ type: 'pie', radius: ['40%', '70%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] }] }
八、echarts环形图未选中效果
我们可以在echarts环形图中给每个扇形区域设置未选中效果,从而提升用户体验。
option = { series: [{ type: 'pie', data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }
九、echarts环形图大小设置
我们可以根据实际情况设置echarts环形图的大小,以便更好地展示数据。
option = { series: [{ type: 'pie', radius: ['50%', '70%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] }] }
总结
echarts环形图是一种常用的数据展示类型,在实际开发中,我们可以根据需求使用不同的配置项来达到最好的展示效果。在本文中,我们详细阐述了echarts环形图的各种配置项,包括百分比、引导线加圆圈、悬浮框等。通过本文的学习,相信大家对echarts环形图的应用有了更深入的理解和掌握。