echarts设置图例颜色图例颜色与柱子不同两个图例颜色不同
在Echarts中,可以通过legend属性来设置图例的样式和颜色。如果要设置图例颜色与柱子不同,可以使用legend.textStyle.color来设置图例文字的颜色,使用legend.itemStyle.color来设置图例图标的颜色。
以下是一个示例代码,展示如何设置两个图例颜色不同:
option = {
legend: [
{
data: ['图例1'],
textStyle: {
color: 'red' // 设置图例1的文字颜色
},
itemStyle: {
color: 'red' // 设置图例1的图标颜色
}
},
{
data: ['图例2'],
textStyle: {
color: 'blue' // 设置图例2的文字颜色
},
itemStyle: {
color: 'blue' // 设置图例2的图标颜色
}
}
],
series: [
{
name: '图例1',
type: 'bar',
data: [200, 300, 400, 500]
},
{
name: '图例2',
type: 'bar',
data: [100, 200, 300, 400]
}
]
};
在上述代码中,我们通过设置legend数组来定义两个图例,分别为图例1和图例2。然后通过设置textStyle.color和itemStyle.color来分别设置图例文字和图例图标的颜色。同时,通过设置series数组来定义两个柱状图,分别对应两个图例。
通过以上代码,可以实现图例颜色与柱子不同,并且两个图例颜色也不相同的效果
原文地址: http://www.cveoy.top/t/topic/iVkq 著作权归作者所有。请勿转载和采集!