今天搞了一个echarts的插件,要完成在 柱状图中只显示一个柱状图 鼠标移入要显示多条内容,上图


逛文档突然看到一个合并的方法附上地址:https://www.echartsjs.com/zh/option.html#series-bar.barGap
这个可以把多个 series 内容合并
于是:
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip : { trigger: 'axis', axisPointer : { type : 'shadow' } },
legend: { data:['实到率%','区域分配人数','总实到次数','总应到次数'] },
grid: { left: '0%', right: '0%', bottom: '0%', containLabel: true },
xAxis : [ { type : 'category', data:{$array['region_name']} } ],
yAxis : [ { type : 'value',max:"100" } ],
series : [
{
name:'实到率',
type:'bar',
barWidth: '10%',
data:{$array['actually']},
},{
name:'区域分配人数',
type:'bar',
barWidth: '0%',
barGap: '-100%',//添加此配置项即为重叠效果
data:{$array['sign_num']},
itemStyle:{
normal:{
color:'#ffffff00'
}
}
},
{
name:'总实到次数',
type:'bar',
barWidth: '0%',
barGap: '-100%',//添加此配置项即为重叠效果
data:{$array['sign_num']},
itemStyle:{
normal:{
color:'#ffffff00'
}
}
},
{
name:'总应到次数',
type:'bar',
barWidth: '0%',
barGap: '-100%',//添加此配置项即为重叠效果
data:{$array['allheadcount']}
,itemStyle:{
normal:{
color:'#ffffff00'
}
}
},
]
};
myChart.setOption(option);
/*
重叠加上背景柱子隐藏完成效果
看不到就是没有
不给钱就不算piao咯
*/