echarts,一个柱状图显示多个参数

今天搞了一个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咯
*/

点赞
  1. zzp zzp说道:
    QQbrowser Windows 7

    :huaji15:
    诶,你帮我写下咯,这个我不会哟

    1. 博主 博主说道:
      Google Chrome Windows 10

      :huaji9: 就是写代码一定要笑,咿~诶嘿~

发表评论