Echarts中legend图形和字体颜色改变

最新推荐文章于 2025-04-01 09:46:28 发布

轻风吹斜阳

最新推荐文章于 2025-04-01 09:46:28 发布

阅读量2w

点赞数 1

分类专栏： PC端

本文链接：https://blog.csdn.net/www93111/article/details/76546765

版权

PC端专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个站点用户访问来源的数据可视化方案，通过饼状图展示不同渠道的访问比例，包括直接访问、邮件营销、联盟广告等，并详细配置了图例样式及提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

optiontwo = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: [
{
name:'直接访问',
icon : 'circle',
textStyle: {
color: 'red' // 图例文字颜色
}
},
{
name:'邮件营销',
icon : 'rect',
textStyle: {
color: '#000' // 图例文字颜色
}
},
{
name:'联盟广告',
icon : 'roundRect',
textStyle: {
color: 'blue' // 图例文字颜色
}
},
{
name:'视频广告',
icon : 'triangle',
textStyle: {
color: 'blue' // 图例文字颜色
}
},
{
name:'搜索引擎',
icon : 'diamond',
textStyle: {
color: 'blue' // 图例文字颜色
}
},
{
name:'123',
icon : 'arrow',
textStyle: {
color: 'blue' // 图例文字颜色
}
},
{
name:'abc',
icon : 'pin',
textStyle: {
color: 'blue' // 图例文字颜色
}
},
{
name:'efg',
textStyle: {
color: 'blue' // 图例文字颜色
},
icon:'image://./img/pie_1.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
},
],
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'},
{value:1548, name:'123'},
{value:1548, name:'abc'},
{value:1548, name:'efg'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]

};