echarts柱状图标记异常数据，突出显示异常数据柱子

最新推荐文章于 2024-07-12 08:26:34 发布

xue2xue

最新推荐文章于 2024-07-12 08:26:34 发布

阅读量2.7k

点赞数

分类专栏： Ëcharts

本文链接：https://blog.youkuaiyun.com/xue2xue/article/details/104694599

版权

Ëcharts 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在柱状图中突出显示异常数据的方法，通过调整数据比例和使用特定颜色标记，使得异常数据在图表中更加醒目。同时，文章详细解释了如何在ECharts中实现这一效果，包括数据处理、图例配置、鼠标悬停提示等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近日开发中，项目要求展示一个月的数据，但一个月中有异常的数据需要标记显示并显示出数据

解决方案：增加柱状图，传入的是异常日期数据（为了标记突出，我传入的数据为异常数据*2，不异常的传入“-”），作为突出显示，并作图例、鼠标放在柱子上的展示数据作处理，显示在柱子上的数据则为异常数据（即传入数据/2）

例子如下，我是展示两个月的数据，一个月正常展示，另一个月异常数据要特别显示

option = {
   		legend:{
   			data:[]
   		},
	    color: ['#7e0023', '#ffde33'],
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            
	            type : 'shadow'        
	        },
	        formatter: function(params){
	            //展示数据作处理，将突出显示的柱子数据不展示
	        	var res;
                res= '<div>'+params[0].name+'</div>'
                +'<div><span>'+params[0].marker+params[0].seriesName+'：</span>'+params[0].data+'</div>' +
                    '<div><span>'+params[1].marker+params[1].seriesName+'：</span>'+params[1].data+'</div>';
                return res
	        }
	    },
	    xAxis : [
	        {
	            type : 'category',
	            data : [],
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            //scale:true,
	            name: '个',
	            	            
	        }
	    ],
	    series : [
	            {
		            name: '12月',
		            type: 'bar',
		            barGap: 0,
		            markLine: {
		            	 itemStyle:{
			                normal:{
			                show:true,
			                color:['#5cc352']
			               }
	            		},
	            		 label:{
			        		   formatter:'{b}：{c}' 
			        	  },
			               lineStyle: {
							normal: {
							 //type: 'solid',
							 color:['#5cc352','#FF3B2F']
							}
						},
						silent: true,
		                symbol: 'none',
		                data: [
		                       {
		                    	   name:'基准',
		                    	   yAxis: '55',
		                    	   lineStyle: {
		                           color: '#5cc352'
		                       }},
		                       {
		                    	   name:'平均',
		                    	   yAxis: '22',
		                    	   lineStyle: {
		                               color: '#FF3B2F'
		                           }}]
		            },
		            data: ['33.00','11.00','27.00','23.00','22.00','16.00','11.00','33.00','12.00','23.00','37.00','20.00','23.00','22.00','16.00','11.00']
		        },
		        {
		            name: '11月',
		            type: 'bar',
		            data: ['11.00','12.00','19.00','26.00','33.00','11.00','27.00','23.00','22.00','16.00','11.00','33.00','12.00','23.00','37.00','20.00']
		        },
		        { // 背景色
		            type: 'pictorialBar',
		            stack: '总量',
		            symbol: 'fixed',
		            /* symbolSize: [28, 3],
		            symbolMargin: 2,
		            symbolRepeat: 'repeat',
		            symbolBoundingData: 30, */
		            z: -10,
		            data: [100, 140, 116, 136, 132, 152],
		            itemStyle: {
		                normal: {
		                    color: '#ccc'
		                }
		            },
		            label: {
		                show: true,
		                fontSize: 14,
		                position: ['40%', '7%'],//数据位置
		                color: 'blue',
		                formatter: (params)=>{
		                        return '{a|'+params.value/2+'}'
		                },
		                rich: {//使用富文本编辑字体样式
		                    a: {
		                        color: 'red'
		                    }
		                }
		            },
		            data: ['66.00','22.00','54.00','-','44.00','-','-','-','-','-','3-','40.00','56.00','44.00','-','-']
		          },
	    ]
       };