echarts 一条柱状图显示两个值，类似进度条

最新推荐文章于 2024-08-09 17:10:29 发布

脆脆鲨_HCC

最新推荐文章于 2024-08-09 17:10:29 发布

阅读量7.2k

点赞数

分类专栏： Echarts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_40067662/article/details/100918738

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

var allUseDayChartTwo;
function allUseDayChartTwoFun(obj,xdata,ydata,zdata){
	allUseDayChartTwo = echarts.init(obj);
	var category = xdata;
	var lineData = zdata;
	var barData = ydata;
	option = {
//		backgroundColor:'#F00',
	    tooltip: {
	        trigger: 'axis',
	        backgroundColor:'rgba(0,0,0,.5)',
	        axisPointer: {
	            type: 'shadow',
	            label: {
	                show: true,
	                backgroundColor: '#F1F1F1',
	                color:'#5A5A5A'
	            }
	        },
	        confine: true
	    },
	    grid: {
            left: '1%',
           	right: '3%',
          	bottom: '5%',
        	top: '5%',
        	containLabel: true
        },
	    xAxis: {
	        axisLine: {
	            lineStyle: {
	                color: '#B4B4B4'
	            }
	        },
	        axisTick:{
	            show:false,
	        },
	        axisLine:{
                show:false
            },
            axisTick:{
                show:false
            },
            splitLine:{
                show:false
            },
			axisLabel:{
	        	textStyle: {
                    fontSize: 14,
                },
	            formatter:'{value} ',
	        },

	    },
	    yAxis: [{
			data: category,
	        splitLine: {show: false},
	        axisLine: {
	            lineStyle: {
	                color: '#B4B4B4',
	            }
	        },
	        axisLabel:{
	        	textStyle: {
                    fontSize: 14,
//                  color: '#B2B2B2'
                },
	            formatter:'{value} ',
	        },
	        axisLine:{
                show:false
            },
            axisTick:{
                show:false
            },
            splitLine:{
                show:false
            }
	    }
//	    ,{
//			data: category,
//	        splitLine: {show: false},
//	        axisLine: {
//	            lineStyle: {
//	                color: '#B4B4B4',
//	            }
//	        },
//	        axisLabel:{
//	            formatter:'{value} ',
//	        }
//	    }
	    ],
	    series: [{
	        name: '用量',
	        type: 'bar',
	        barWidth: 15,
	        barGap: '-100%',
	        itemStyle: {
	            normal: {
	                barBorderRadius: 5,
	                color: new echarts.graphic.LinearGradient(
	                    0, 0, 0, 1,
	                    [
	                        {offset: 0, color: 'rgba(88,228,88,0.8)'},
	                        {offset: 1, color: 'rgba(88,228,88,0.8)'}
	                    ]
	                )
	            }
	        },
	        data: barData
	    },{
	        name: '阈值',
	        type: 'bar',
	        barGap: '-100%',
	        barWidth: 15,
	        itemStyle: {
	            normal: {
	                barBorderRadius: 5,
	                color: new echarts.graphic.LinearGradient(
	                    0, 0, 0, 1,
	                    [
	                        {offset: 0, color: 'rgba(234,234,234,0.8)'},
	                        {offset: 0.2, color: 'rgba(234,234,234,1)'},
	                        {offset: 1, color: 'rgba(234,234,234,1)'}
	                    ]
	                )
	            }
	        },
	        z: -12,
	        data: lineData
	    }
//	    ,{
//	        name: '背景',
//	        type: 'bar',
//	        barGap: '-100%',
//	        barWidth: 15,
//	        itemStyle: {
//	            normal: {
//	                barBorderRadius: 5,
//	                color: new echarts.graphic.LinearGradient(
//	                    0, 0, 0, 1,
//	                    [
//	                        {offset: 0, color: 'rgba(0,0,0,0.2)'},
//	                        {offset: 0.2, color: 'rgba(0,0,0,0.)'},
//	                        {offset: 1, color: 'rgba(0,0,0,0.24)'}
//	                    ]
//	                )
//	            }
//	        },
//	        z: -20,
//	        data: [50,50,50,50,50,50,50,50,50]
//	    }
	    ]
	};
	allUseDayChartTwo.setOption(option);
}