快捷導(dǎo)航

解決echarts 一條柱狀圖顯示兩個值,類似進(jìn)度條的問題

更新時間：2020年07月20日 15:29:37 作者：Daniel cui

這篇文章主要介紹了解決echarts 一條柱狀圖顯示兩個值,類似進(jìn)度條的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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


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);
}

補充知識：echarts 柱狀圖實現(xiàn)進(jìn)度條，進(jìn)行數(shù)據(jù)驅(qū)動

echarts 柱狀圖實現(xiàn)進(jìn)度條，進(jìn)行數(shù)據(jù)驅(qū)動

效果圖

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

option = {
    backgroundColor: '#0a1d53',
    grid: {
     left: '2%',
     top: '2%',
     right: '2%',
     bottom: '2%',
     containLabel: true
    },
    tooltip: {
     trigger: 'item',
     axisPointer: {
      // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
      type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
     }
    },
    textStyle: {
     color: '#fff'
    },
    xAxis: {
     show: false,
     type: 'value',
     // 設(shè)置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'
      }
     },
     splitLine: {
      show: false
     },
     inside: true,
     textStyle: {
      color: '#000c45'
     }
    },
    series: [
     {
      type: 'bar',
      itemStyle: {
       normal: {
        color: '#000c45', // 定義柱形的背景色
        barBorderRadius: [5, 5, 5, 5] // 定義背景柱形的圓角
       }
      },
      barGap: '-100%', // 設(shè)置柱形重合的重要步驟
      data: [100, 100, 100, 100, 100, 100, 100],
      z: 0,
      silent: true,
      animation: false, // 關(guān)閉動畫效果
      barWidth: '10px' // 設(shè)置柱形寬度
     },
     {
      type: 'bar',
      data: [50, 50, 50, 50, 50,50, 50],
      barWidth: '10px',
      barGap: '-100%', // 設(shè)置柱形重合的重要步驟
      label: {
       normal: {
        show: true, //是否顯現(xiàn)，不顯示的話設(shè)置成false
        position: "left", //顯示的位置
        distance: 10, //距離侄子的值 // label要顯示的值比如： 20%
        formatter: function(param) {
         return param.value;
        },
        textStyle: {
         //這個地方顏色是支持回調(diào)函數(shù)的這種的，如果是一種顏色則可以寫成： color :'#1089E7'
         color: function(params) {
          var num = myColor.length; //得到myColor顏色數(shù)組的長度
          return myColor[params.dataIndex % num]; //返回顏色數(shù)組中的一個對應(yīng)的顏色值
         },
         fontSize: "16"
        }
       }
      },
      itemStyle: {
       normal: {
        color: function (params) {
         var colorList = [
          '#bbb743',
          '#bbae43',
          '#bb9d43',
          '#bb8c43',
          '#bb7e43',
          '#bb5c43',
          '#bb4643'
         ]
         return colorList[params.dataIndex]
        },
        barBorderRadius: [5, 5, 5, 5] // 定義柱形的圓角
       }
      }
     }
    ]
   }

以上這篇解決echarts 一條柱狀圖顯示兩個值,類似進(jìn)度條的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: