效果图：
1.png
{
//用formatter回调函数显示多项数据内容
tooltip: {
trigger: 'axis',
formatter: function (params, ticket, callback) {
var htmlStr = '';
var valMap = {};
for(var i=0;i<params.length;i++){
var param = params[i];
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值
var color = param.color;//图例颜色
//过滤无效值
if(value == '-'){
continue;
}
//过滤重叠值
if(valMap[seriesName] == value){
continue;
}
if(i===0){
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr +='<div>';
//为了保证和原来的效果一样，这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
//圆点后面显示的文本
if(xName == self.weekArr[6]){
htmlStr += '预估'+seriesName + '：' + value;
}else{
htmlStr += seriesName + '：' + value;
}
htmlStr += '</div>';
valMap[seriesName] = value;
}
return htmlStr;
}
},
legend: {
itemHeight:5,
itemWidth:12,
textStyle:{
color:'#33c5f5',
fontSize:'16',
lineHeight:"12",
padding:[1,1]
},
},
grid: {
left: '3%',
right: '0%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: self.weekArr,
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: ['rgba(51,197,245,.5)']
}
},
textStyle: {
lineHeight:12,
},
axisLabel: {
interval: 0,
show: true,
splitNumber: 15,
fontSize: 16,
textStyle: {
fontSize: 16,
lineHeight:12,
color: '#33c5f5'
},
},
}
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: ['rgba(51,197,245,.5)']
}
},
splitLine: {
show: true,
lineStyle:{
color: ['rgba(51,197,245,.5)'],
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
fontSize: 16,
lineHeight:12,
color: '#33c5f5'
},
},
}
],
series: [
{
name: '每日人数',
type: 'bar',
data: [330,350,300,430,321,360,{value:400,itemStyle: {normal: {color: 'rgba(255,255,255,0)',barBorderColor: '#ffd200',barBorderWidth:3,barBorderRadius:0,borderType:"dotted"}}}],
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
color: '#ffd200'
},
},
{
name: '预测产量',
type: 'bar',
data: [300,400,330,360,354,420,{value:430,itemStyle: {normal: {color: 'rgba(255,255,255,0)',barBorderColor: '#17e20d',barBorderWidth:3,barBorderRadius:0,borderType:"dotted"}}}],
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
color: '#17e20d'
},
},
{
name: '实际产量',
data: [90,130,140,120,100,80,"-"],
type: 'line',
symbol: "none",
label: {
normal: {
show: false,
color: "#ffffff",
},
},
itemStyle: {
normal: {
color: '#2de8ed',
lineStyle: {
width: 2,
type: 'solid',
color: "#2de8ed",
}
},
},
},
{
name:'实际产量',
data: ["-", "-", "-", "-", "-", 80,60],
type: 'line',
label: {
normal: {
show: false,
color: "#ffffff"
},
},
symbol: "none",
itemStyle:{
normal: {
color: '#2de8ed',
lineStyle: {
width: 2,
type: 'dotted',
color: "#2de8ed",
}
},
},
},
]
};
