横向柱状图 echarts

<div class="thirdEchartBody" id="ageEchartBody"></div>
import {
    
     barAgeChartConfig } from './js/passengerFlowAnalysisConfig.js';
mounted() {
    
    
	this.getBarChart();
    let _this = this;
    window.addEventListener('resize', function() {
    
    
      //图表自适应
      _this.ageEchartBody.resize();
    });
}
methods: {
    
    
    getBarChart() {
    
    
      this.$nextTick(() => {
    
    
        this.ageEchartBody = echarts.init(document.getElementById('ageEchartBody'));
        this.ageEchartBody.setOption({
    
    }, true); //阻止复用
        let barChartConfig = barAgeChartConfig(this.ageEchartData);
        this.ageEchartBody.setOption(barChartConfig, true);
      });
    },
}

passengerFlowAnalysisConfig.js

数据格式如图

function barAgeChartConfig(barAgeChartConfig) {
    
    
  let count = [];
  let name = [];
  let sum = 0;
  let backgroundSum = []; //背景数据

  barAgeChartConfig.forEach(item => {
    
    
    sum = sum + item.count;
    count.push(item.count);
    name.push(item.name);
    backgroundSum.push(100); //防止数据全为0
  });
  count.reverse();
  name.reverse();
  if (sum !== 0) {
    
    
    backgroundSum = [];
    count.forEach(item => {
    
    
      backgroundSum.push(sum);
    });
  }

  let option = {
    
    
    color: ['#f90'],
    grid: {
    
    
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '10%',
      containLabel: true,
    },
    xAxis: {
    
    
      type: 'value',
      // boundaryGap: [0, 0.01],
      axisTick: {
    
    
        //坐标轴小标记
        show: false,
      },
      axisLine: {
    
    
        //坐标轴
        show: false,
      },
      axisLabel: {
    
    
        //坐标卓文本标签
        show: false,
      },
      splitLine: {
    
    
        show: false,
      },
    },
    yAxis: {
    
    
      type: 'category',
      data: name,
      axisTick: {
    
    
        //坐标轴小标记
        show: false,
      },
      axisLine: {
    
    
        //坐标轴
        show: false,
      },
      splitLine: {
    
    
        show: false,
      },
    },
    series: [
      {
    
    
        type: 'bar',
        itemStyle: {
    
    
          normal: {
    
    
            color: '#F7F7F7',
          },
        },
        barGap: '-100%', //设置柱形重合的重要步骤
        data: backgroundSum,
        z: 0,
        silent: true, //鼠标悬浮的动效
        animation: false, //关闭动画效果
        barWidth: '26px', //设置柱形宽度
        label: {
    
    
          normal: {
    
    
            show: true,
            position: 'insideRight',
            // distance: -20,
            color: '#858585',
            formatter: function(param) {
    
    
              let percentStr = null;
              barAgeChartConfig.forEach((item, index) => {
    
    
                if (item.name === param.name) {
    
    
                  percentStr = item.percentStr;
                }
              });
              return percentStr;
            },
          },
        },
      },
      {
    
    
        type: 'bar',
        data: count,

        barWidth: '26px',
        label: {
    
    
          normal: {
    
    
            show: true, //是否显示
            position: 'right', //显示位置
            distance: 10,
            color: '#404040',
            fontWeight: 'bold',
          },
        },
      },
    ],
  };
  return option;
}
export {
    
     barAgeChartConfig };