极客观点
项目管理
HarmonyOS
Echarts柱状图，使用itemStyle.normal.color设置柱子的颜色后，legend不跟随设置的颜色改变，还是原来的颜色，求解？
<script type="text/javascript">
var color = ["#CC00FF","#FFC0CB","#FF69B4","#DDA0DD","#FF00FF","#9400D3","#8A2BE2"]
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
title: {
text: '累计收入完成情况',
x:'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: [ '一月累计金额', '二月累计金额', '三月累计金额', '一月预算金额', '二月预算金额', '三月预算金额'],
padding: 30,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['1月', '1-2月', '1-3月']
}
],
yAxis: [
{
type: 'value',
}
],
series: [
{
name: '一月累计金额',
type: 'bar',
stack: '累计至本月金额', //决定是否在一个堆积图中
emphasis: {
focus: 'series'
},
data: [131, 131, 131],
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
fontSize: 10
}
},
color:function(p){
return color[1]
}
},
}
},
{
name: '二月累计金额',
type: 'bar',
stack: '累计至本月金额',
emphasis: {
focus: 'series'
},
data: ['', 132, 132],
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
fontSize: 10
}
},
color:function(p){
return color[2]
}
}
}
},
{
name: '三月累计金额',
type: 'bar',
stack: '累计至本月金额',
emphasis: {
focus: 'series'
},
data: ['','', 101],
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
fontSize: 10
}
},
color:function(p){
return color[3]
}
}
}
},
{
name: '一月预算金额',
type: 'bar',
barWidth: 20,
stack: '累计预算金额',
emphasis: {
focus: 'series'
},
data: [230, 230, 230],
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
fontSize: 10
}
},
color:function(p){
return color[1]
}
}
}
},
{
name: '二月预算金额',
type: 'bar',
stack: '累计预算金额',
emphasis: {
focus: 'series'
},
data: ['', 132, 132],
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
fontSize: 10
}
},
color:function(p){
return color[2]
}
}
}
},
{
name: '三月预算金额',
type: 'bar',
stack: '累计预算金额',
emphasis: {
focus: 'series'
},
data: ['', '', 101],
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
fontSize: 10
}
},
color:function(p){
return color[3]
}
}
}
},
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
normal 的 color 属性只能控制曲线中的颜色，如果想要修改默认图例颜色，可以修改 option 的 color 属性。