echarts 图表柱状图----最新的数据显示彩色，过去的颜色为灰色

悠悠 2022-12-01 14:19 121阅读 0赞

## 数据格式 ##

Data: { 
    	"xAxisData": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "11", "12", "13", "14", "15", "16",
    		"17", "18", "19", "20", "21", "22", "23", "24"
    	],
    	"legendData": ["lengend1", "lengend2"],
    	"yName": "(℃)",
    	"xName": "时间",
    	"unit": "℃",
    	"data": [
    		[{ 
    			name: '你',
    			value: 10,
    			itemStyle: { 
    				color: '#ff0'
    			}
    		}, { 
    			name: '你',
    			value: 16,
    			itemStyle: { 
    				color: '#ff0'
    			}
    		}, { 
    			name: '你',
    			value: 20,
    			itemStyle: { 
    				color: '#ff0'
    			}
    		}],
    		[{ 
    			name: '你',
    			value: 20,
    			itemStyle: { 
    				color: '#ff0'
    			}
    		}, { 
    			name: '你',
    			value: 20,
    			itemStyle: { 
    				color: '#ff0'
    			}
    		}, { 
    			name: '你',
    			value: 15,
    			itemStyle: { 
    				color: '#ff0'
    			}
    		}]
    	]
    }

function changeBarStyle(arr) { 
    	for (var i = 0; i < arr.length; i++) { 
    		var m = arr[0].length - 1;
    		var n = arr[1].length - 1;
    		arr[0][m].itemStyle.color = "#ffaf51";
    		arr[1][n].itemStyle.color = "#428bcb";
    		arr[0][i].itemStyle.color = "#ccc";
    		arr[1][i].itemStyle.color = "#ccc";
    	}
    setEchartsAuto();
    			}

## 绘制柱状图 ##

lineOption：正常的option  
setLineOption:封装的方法（忽略），官网上的也可以使用

setEcharts('mychart', setLineOption(Data, function() { 
    	lineOption.color = ['#ffaf51', '#428bcb'];
    	lineOption.grid.top = '25%';
    	lineOption.legend.itemHeight = 10;
    	lineOption.legend.itemWidth = 10;
    	lineOption.series[0].type = 'bar';
    	lineOption.series[1].type = 'bar';
    	lineOption.series[0].barWidth = 11;
    	lineOption.series[1].barWidth = 11;
    	lineOption.tooltip.formatter = function(params) { 
    		var result='';
    		var name = params[0].name;
    		for(var i = 0;i<params.length;i++){ 
    			result = result+"<br>"+params[i].marker+" "+params[i].seriesName+":"+params[i].value+Data.unit;
    		}
    		result=  name+result
    		return result
    	}
    	
    }));

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3b931dc3be034f32882715ade60487b8.png