快捷導(dǎo)航

echarts橫向柱狀圖簡單實現(xiàn)方法

更新時間：2023年12月15日 10:11:13 作者：sukie04120

這篇文章主要給大家介紹了關(guān)于echarts橫向柱狀圖簡單實現(xiàn)的相關(guān)資料,ECharts是百度前端開發(fā)部開發(fā)的一個開源可視化庫,它可以幫助開發(fā)者輕松的實現(xiàn)各種數(shù)據(jù)可視化,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

涉及點：

橫向柱狀圖、不顯示x軸標(biāo)簽、柱子漸變色、數(shù)量及單位顯示在柱子內(nèi)部。

效果圖：

echarts配置：

option我是放置在data內(nèi)部，然后再動態(tài)獲取y軸和數(shù)值(series)的數(shù)據(jù)再進行圖表的渲染

option: {
	tooltip: {
		trigger: 'axis',
		axisPointer: {
		type: 'shadow'
	    }
    },
	grid: { 
		left: 0,
		top: '8%',
		right: '3%',
		bottom: '8%',
		containLabel: true
	},
	xAxis: {
		type: 'value',
		axisLabel: {
			show: false // 不顯示x軸標(biāo)簽
		},
		axisLine: {
			// x軸線的顏色以及寬度
			show: true,
			lineStyle: {color: 'rgba(255,255,255,0.1)'}
			},
		axisTick: {
			show: false // x軸刻度線
		},
		splitLine: { // x軸網(wǎng)格線
			show: true,
				lineStyle: {color: 'rgba(255,255,255,0.1)'}
			}
		},
		yAxis: {
			type: 'category',
			axisTick: { show: false }, // y軸刻度線
			axisLabel: { color: '#fff' }, // y軸文字的配置
			axisLine: {
				//x軸線的顏色
				show: true,
				lineStyle: {color: 'rgba(255,255,255,0.1)'}
			},
			data: ['內(nèi)科','外科','婦科','兒科','牙科']
		},
		series: [
			{
			name: '人數(shù)',
			type: 'bar',
			stack: '總量',
			label: {
				normal: {
					show: true,
					position: 'inside', //顯示在柱子內(nèi)部
					textStyle: { color: '#fff' },
					formatter: '{c}人' //單位
				}
			},
			itemStyle: {
				color: {
				    colorStops:[ //柱子的漸變色
        		    {
			            offset: 0,
			            color: 'rgba(5, 80, 57, 1)' // 0% 處的顏色
		            },
		            {
			            offset: 1,
			            color: 'rgba(13, 253, 178, 1)' // 100% 處的顏色
		            }
	                ],
				global: false
				}
			},
			barWidth: 20, //柱子的寬度
			data: [88,75,53,39,36] 
		  }
	]
}

渲染圖表方法及HTML：

//html：
    <div class="echartDiv" ref="chart"></div>

//方法（渲染圖表）：
    initEcharts() {
			this.myChart && this.myChart.dispose();
			let chartDom = this.$refs.chart;
			this.myChart = echarts.init(chartDom);
			this.myChart.setOption(this.option);
			let that = this;
			window.addEventListener('resize', function() {
				that.myChart.resize();
			});
		},

附：echarts橫向柱狀圖的兩種簡便畫法

示例圖

第一種方法：可以隨意控制y左軸和y右軸的顯示位置

let option = {
    // 柱狀圖的位置
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '0',
      containLabel: false // 圖表兩側(cè)是否留白
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    xAxis: {
      show: false,
      type: 'value'
    },
    yAxis: [
      // 左軸 
      {
        type: 'category',
        inverse: true,
        axisLabel: {
          inside: true,
          zlevel: 2,
          color: '#fff'
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        data: props.dataX
      },
      // 右軸
      {
        type: 'category',
        inverse: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          inside: true,
          formatter: '{value}s',
          color: 'black'
        },
        data: props.dataY,
      },
    ],
    series: [
      {
        zlevel: -1, // 層級
        type: 'bar', 
        barWidth: 30, // 內(nèi)柱條的寬度
        // animationDuration: 1500, // 內(nèi)柱條的動畫顯示時間
        showBackground: true,
        // 內(nèi)柱條樣式
        itemStyle: {
          color: '#2596FF',
        },
        // ------------------數(shù)據(jù)及其樣式----------------------------
        // 內(nèi)柱條的數(shù)據(jù)
        data: props.dataY,
        align: 'center'
      },
    ],
  }

第二種：y右軸的顯示文字不能隨意控制位置，此種寫法是文字顯示只能跟在內(nèi)柱條的后面

let option = {
    // 柱狀圖的位置
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '0',
      containLabel: false // 圖表兩側(cè)是否留白
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    xAxis: {
      show: false,
      type: 'value'
    }, 
    yAxis: {
      type: "category",
      triggerEvent: true,
      data: props.dataX,
      axisLine: { show: false },  //不顯示坐標(biāo)軸
      axisTick: { show: false },  //不顯示坐標(biāo)軸刻度線     
      axisLabel: {
        inside: true, // 坐標(biāo)顯示在軸內(nèi)側(cè)
        zlevel: 1,
        color: '#ccc',
      },
      splitLine: {
      	show: false,
      },      
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    series: [
      {
       	name: '',
        zlevel: -1,
        type: "bar",
        color: '#2596FF',
        barWidth: 30,
        showBackground: true,
        backgroundStyle: {
           color: 'rgba(180, 180, 180, 0.2)'
        },
        label: {
          show: true,
          position: "right",
          color: "red",
          fontSize: "12px",
          formatter: '{c}s',      
        },
        data: props.dataY,
      },
    ],
  }