echarts自定义柱状图和legend颜色 以及自定义legend形状

需求
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]
   }]});

效果图
echarts自定义柱状图和legend颜色 以及自定义legend形状_第1张图片

你可能感兴趣的:(echarts,echarts,前端,javascript)