echarts legend改为圆环
时间: 2023-10-08 08:06:59 浏览: 240
变换的圆环
要将echarts的图例(legend)改为圆环形状,可以通过设置icon属性为'emptyCircle'来实现。例如,在legend配置中添加icon属性,并将其值设置为'emptyCircle'即可:
legend: {
icon: 'emptyCircle',
// 其他配置项...
}
这样,legend的图例项将会以圆环的形状展示。 在echarts的官方实例中,图例默认是方形的,如果需要改为圆形图标,可以直接在legend配置中设置icon属性为'circle',即可实现圆形图标的效果。例如:
legend: {
orient: 'vertical',
icon: 'circle',
left: 'left',
// 其他配置项...
}
在数据项的配置中,也可以通过设置icon属性为'circle'实现图例项的圆形图标展示。例如:
legend: {
top: '5%',
left: 'center',
itemWidth: 20,
itemHeight: 20,
data: [
{icon: 'circle', name: '搜索引擎'},
{icon: 'rect', name: '直接访问'},
{icon: 'roundRect', name: '邮件营销'},
{icon: 'triangle', name: '联盟广告'},
{icon: 'diamond', name: '视频广告'},
{icon: 'pin', name: 'SEO'},
{icon: 'arrow', name: '定点投放'}
],
// 其他配置项...
}
你也可以参考上面提供的链接,详细了解echarts图例的组件分组展示。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [使用Echarts饼图时将图例图标变成圆形](https://blog.csdn.net/weixin_55708429/article/details/130105104)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [echarts:legend 图例形状,图例文字颜色与图例一致及图例文字多种颜色的配置](https://blog.csdn.net/qq_33235680/article/details/129734491)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [echarts legend 排列问题](https://download.csdn.net/download/qq_36437172/12420436)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
阅读全文