我就廢話不多說說了，大家還是直接看程式碼吧~

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,.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',}
	    },//         color: '#B2B2B2'
        },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,1,[
	            {offset: 0,color: 'rgba(88,228,88,0.8)'},{offset: 1,0.8)'}
	          ]
	        )
	      }
	    },data: barData
	  },{
	    name: '閾值',color: 'rgba(234,234,{offset: 0.2,1)'},1)'}
	          ]
	        )
	      }
	    },z: -12,data: lineData
	  }
//,{
//	    name: '背景',//	    type: 'bar',//	    barGap: '-100%',//	    barWidth: 15,//	    itemStyle: {
//	      normal: {
//	        barBorderRadius: 5,//	        color: new echarts.graphic.LinearGradient(
//	          0,//	          [
//	            {offset: 0,color: 'rgba(0,0.2)'},//	            {offset: 0.2,0.)'},//	            {offset: 1,0.24)'}
//	          ]
//	        )
//	      }
//	    },//	    z: -20,//	    data: [50,50,50]
//	  }
	  ]
	};
	allUseDayChartTwo.setOption(option);
}

補充知識：echarts 柱狀圖實現進度條，進行資料驅動

echarts 柱狀圖實現進度條，進行資料驅動

效果圖

直接寫上配置項，根據自己的需求更改

option = {
    backgroundColor: '#0a1d53',grid: {
     left: '2%',top: '2%',right: '2%',bottom: '2%',tooltip: {
     trigger: 'item',axisPointer: {
      // 座標軸指示器，座標軸觸發有效
      type: 'shadow' // 預設為直線，可選為：'line' | 'shadow'
     }
    },textStyle: {
     color: '#fff'
    },xAxis: {
     show: false,type: 'value',// 設定x軸顯示幾段
     min: 0,max: 100,inverse: true,splitLine: {
      show: false
     },interval: 50
    },yAxis: {
     show: true,type: 'category',data: [
      '週一','週二','週三','週五','週六','週日'
     ],axisTick: { show: false },axisLine: {
      show: false,lineStyle: {
       color: 'red'
      }
     },inside: true,textStyle: {
      color: '#000c45'
     }
    },series: [
     {
      type: 'bar',itemStyle: {
       normal: {
        color: '#000c45',// 定義柱形的背景色
        barBorderRadius: [5,5,5] // 定義背景柱形的圓角
       }
      },// 設定柱形重合的重要步驟
      data: [100,100,100],z: 0,silent: true,animation: false,// 關閉動畫效果
      barWidth: '10px' // 設定柱形寬度
     },{
      type: 'bar',data: [50,50],barWidth: '10px',// 設定柱形重合的重要步驟
      label: {
       normal: {
        show: true,//是否顯現，不顯示的話設定成false
        position: "left",//顯示的位置
        distance: 10,//距離侄子的值 // label要顯示的值比如： 20%
        formatter: function(param) {
         return param.value;
        },textStyle: {
         //這個地方顏色是支援回撥函式的這種的，如果是一種顏色則可以寫成： color :'#1089E7'
         color: function(params) {
          var num = myColor.length; //得到myColor顏色陣列的長度
          return myColor[params.dataIndex % num]; //返回顏色陣列中的一個對應的顏色值
         },fontSize: "16"
        }
       }
      },itemStyle: {
       normal: {
        color: function (params) {
         var colorList = [
          '#bbb743','#bbae43','#bb9d43','#bb8c43','#bb7e43','#bb5c43','#bb4643'
         ]
         return colorList[params.dataIndex]
        },barBorderRadius: [5,5] // 定義柱形的圓角
       }
      }
     }
    ]
   }

以上這篇解決echarts 一條柱狀圖顯示兩個值,類似進度條的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。