近日开发中,项目要求展示一个月的数据,但一个月中有异常的数据需要标记显示并显示出数据
解决方案:增加柱状图,传入的是异常日期数据(为了标记突出,我传入的数据为异常数据*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','-','-']
},
]
};