ECharts实现横向柱状图：数值内嵌与双轴布局技巧

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轴标签
		},
		axisLine: {
			// x轴线的颜色以及宽度
			show: true,
			lineStyle: {color: 'rgba(255,255,255,0.1)'}
			},
		axisTick: {
			show: false // x轴刻度线
		},
		splitLine: { // x轴网格线
			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: ['内科','外科','妇科','儿科','牙科']
		},
		series: [
			{
			name: '人数',
			type: 'bar',
			stack: '总量',
			label: {
				normal: {
					show: true,
					position: 'inside', //显示在柱子内部
					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：
    <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();
			});
		},

let option = {
    // 柱状图的位置
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '0',
      containLabel: false // 图表两侧是否留白
    },
    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, // 内柱条的宽度
        // animationDuration: 1500, // 内柱条的动画显示时间
        showBackground: true,
        // 内柱条样式
        itemStyle: {
          color: '#2596FF',
        },
        // ------------------数据及其样式----------------------------
        // 内柱条的数据
        data: props.dataY,
        align: 'center'
      },
    ],
  }

let option = {
    // 柱状图的位置
    grid: {
      left: '0%',
      right: '0%',
      bottom: '0%',
      top: '0',
      containLabel: false // 图表两侧是否留白
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    xAxis: {
      show: false,
      type: 'value'
    }, 
    yAxis: {
      type: "category",
      triggerEvent: true,
      data: props.dataX,
      axisLine: { show: false },  //不显示坐标轴
      axisTick: { show: false },  //不显示坐标轴刻度线     
      axisLabel: {
        inside: true, // 坐标显示在轴内侧
        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,
      },
    ],
  }