The echarts heat map sets a specific color for each area

Using the mapping component to change the color of the heat map is a convenient and quick way, but in some specific cases we need more precise color control of the area color, such as positive red negative green, at this time we can consider attaching itemStyle to the value attribute, so that it can be accurate to a certain area or the color of the grid

	dataRes = dataRes.map(function (item) {
    
    
		// 正红负绿
		return {
    
     value: [item.symbolDes, item.symbolSrc, item.cap], itemStyle: {
    
    normal: {
    
    color: 'red' }} };
	});

series: [
			{
    
    
				type: 'heatmap',
				data: dataRes,
				label: {
    
    
					show: true,
				},
				emphasis: {
    
    
					itemStyle: {
    
    
						shadowBlur: 10,
						shadowColor: 'rgba(0, 0, 0, 0.5)',
					},
				},
			},
		],

insert image description here

Guess you like

Origin blog.csdn.net/qq_41490563/article/details/130247317