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

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

解决方案:增加柱状图,传入的是异常日期数据(为了标记突出,我传入的数据为异常数据*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','-','-']
		          },
	    ]
       };

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值