Echarts 在柱形图上加横线,设置基准线,自定义tooltip

1.效果图

 2.配置参数

option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            axis :'y',
            Z:10
        },
        formatter:function(params){
            var relVal = '<span style="color:#333">'+params[0].name+'</span><br/>'
            params.forEach(item => {
                if ( item.seriesIndex<3) {
                    relVal +='<br/><span style="color:#999">' + item.seriesName + ':</span><span style="color:#333">' + item.value+'</span>';
                } 
            })
            return relVal
        },
        backgroundColor:'#fff',
        padding:[5,10],
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: [{
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    },                       
    {
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
         axisPointer: {
            type: 'none',
           
        },
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    }],
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18, 23, 29, 10, 34, 63],
            markLine : {
                symbol:"none",
                itemStyle: {
                    normal: {
                        color:'#FA8565',
                        label: {
                            show:false
                        }
                    }
                }, 
                data : [{
                     xAxis: 100,
                     silent:true, 
                }]
                
            }

        },
        {
            name: '2012年',
            type: 'bar',
            data: [193, 23, 31, 12, 13, 68]
        },
        {
			name: "123",
			stack: 'breakevenEleGroup',/*数据组,需要设置才能将两个bar堆积在一起*/
			type: 'bar',
			yAxisIndex: 1,
			itemStyle: {
				normal: {
					color: 'rgba(0,0,0,0)',/*设置bar为隐藏,撑起下面横线*/
				}
			},
			data: [12,17,20,3,33,18]
		},
		{
			/*这个bar是横线的显示*/
			name: "123",
			stack: 'breakevenEleGroup',/*数据组,需要设置才能将两个bar堆积在一起*/
			type: 'bar',
			yAxisIndex: 1,
			itemStyle: {
				normal: {
					color: 'red'
				}
			},
			data: [0.2,0.2,0.2,0.2,0.2,0.2],
		},
		{
			name: "123",
			stack: 'breakevenEleGroup2',/*数据组,需要设置才能将两个bar堆积在一起*/
			type: 'bar',
			yAxisIndex: 1,
			itemStyle: {
				normal: {
					color: 'rgba(0,0,0,0)',/*设置bar为隐藏,撑起下面横线*/
				}
			},
			data: [0,0,0,0,0,0]
		},
		{
			/*这个bar是横线的显示*/
			name: "123",
			stack: 'breakevenEleGroup2',/*数据组,需要设置才能将两个bar堆积在一起*/
			type: 'bar',
			yAxisIndex: 1,
			itemStyle: {
				normal: {
					color: 'red'
				}
			},
			data: [0,0,0,0,0,0],
		}
    ]
};

 

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值