需求
1、echarts柱状图中一共有四根柱子 其中每根柱子颜色都不一样
2、显示legend 并且图标为正方形
实现
1、设置legend中"itemWidth"和"itemHeight" 两个参数 可实现需求2
2、设置color:[‘#F9A300’,‘#0E5FFF’,‘#50D682’,‘#6236FF’] 以及series中的data和stack参数 可实现需求1
this.chartEquipmentAlerts.setOption({
title: {
text: '预警总数40',
top: "3%",
left: "2%",
textStyle: {
color: 'rgba(255,255,255,0.75)',
fontWeight: 'bold',
fontSize: 13
}
},
color:['#F9A300','#0E5FFF','#50D682','#6236FF'],
legend: {
orient: "vertical",
top: "10%",
x: "81%",
y: "center",
itemWidth: 10,
itemHeight: 10,
data:['预警类型一','预警类型二','预警类型三','预警类型四'],
textStyle:{
fontSize: 10,//字体大小
color: 'rgba(255,255,255,0.65)'//字体颜色
}
},
grid: {
top:'15%',
left: '11%',
right: '22%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
textStyle: {
fontSize: 10,//字体大小
color: 'rgba(255,255,255,0.65)'
}
},
data: ['预警类型一', '预警类型二', '预警类型三', '预警类型四']
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.45)'
}
}
},
series: [
{
name:'预警类型一',
stack: '设备',
type:'bar',
barWidth: 30,
data:[28]
},
{
name:'预警类型二',
type:'bar',
barWidth: 30,
stack: '设备',
data:[0, 27]
},
{
name:'预警类型三',
type:'bar',
barWidth: 30,
stack: '设备',
data:[0, 0, 7]
},
{
name:'预警类型四',
type:'bar',
barWidth: 30,
stack: '设备',
data:[0, 0, 0, 6]
}]});