Echarts 实现填充式柱状图（象形柱图）

ps: 因为用的比较多了，就不留注释了，不明白自行查询Echarts文档

关键配置项

• series[i]-bar.barGap string
  不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）
• series[i]-bar.markPoint.symb
  指定图形元素是否重复。
• series[i]-pictorialBar.symbolClip
  是否剪裁图形。
• series[i]-bar.markPoint.symbolSize
  标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。

代码部分

<template>
  <div class="chart">
    <div class="my_chart" ref="myChart"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
  components: {},
})
export default class Home extends Vue {
  public mounted() {
    this.drawMyChart();
  }

  // 绘制象形柱状图
  public drawMyChart() {
    const chart = echarts.init(this.$refs.myChart as HTMLDivElement);
    const myColor = ['#00E0B8'];
    const option = {
      backgroundColor: '#fff0',
      grid: {
        left: '10',
        top: '40',
        right: '10',
        bottom: '10',
        containLabel: true,
      },
      xAxis: [
        {
          data: [
            '南区一班',
            '南区二班',
            '南区三班',
            '南区四班',
            '南区五班',
            '北区一班',
            '北区二班',
            '北区三班',
            '北区四班',
            '北区五班',
          ],
          axisLine: {
            lineStyle: {
              color: '#fff',
            },
          },
          axisTick: {
            show: false,
          },
        },
        {
          data: [],
          show: false,
        },
      ],
      yAxis: [
        {
          name: '单位(人数)',
          show: true,
          axisLine: {
            lineStyle: {
              color: '#fff',
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '未开始',
          xAxisIndex: 0,
          data: [23, 20, 34, 56, 43, 66, 84, 66, 13, 9],
          type: 'pictorialBar',
          barGap: '-100%',
          symbol: 'roundRect',
          symbolRepeat: 'fixed',
          symbolClip: true,
          symbolSize: [16, 4],
          label: {
            normal: {
              textStyle: {
                normal: {
                  color: '#00E0B8',
                },
              },
            },
          },
          barWidth: 80,
          itemStyle: {
            normal: {
              color: '#00E0B8',
            },
          },
        },
        {
          name: '',
          type: 'pictorialBar',
          symbol: 'roundRect',
          xAxisIndex: 1,
          barGap: '-100%',
          symbolRepeat: 'fixed',
          symbolClip: true,
          symbolSize: [16, 4],
          data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
          barWidth: 80,
          itemStyle: {
            normal: {
              color: 'rgba(18, 17, 0, 0.1)',
            },
          },
        },
        {
          name: '已开工',
          data: [63, 70, 64, 16, 23, 96, 24, 16, 53, 39],
          type: 'pictorialBar',
          barGap: '-60%',
          symbol: 'roundRect',
          symbolRepeat: 'fixed',
          symbolClip: true,
          symbolSize: [16, 4],
          label: {
            normal: {
              textStyle: {
                normal: {
                  color: '#F4D950',
                },
              },
            },
          },
          barWidth: 80,
          itemStyle: {
            normal: {
              color: '#F4D950',
            },
          },
        },
        {
          name: '',
          type: 'pictorialBar',
          symbol: 'roundRect',
          xAxisIndex: 1,
          barGap: '-60%',
          symbolRepeat: 'fixed',
          symbolClip: true,
          symbolSize: [16, 4],
          data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
          barWidth: 80,
          itemStyle: {
            normal: {
              color: 'rgba(18, 17, 0, 0.1)',
            },
          },
        },
        {
          name: '已完工',
          data: [23, 32, 44, 56, 83, 46, 90, 56, 93, 19],
          type: 'pictorialBar',
          barGap: '-60%',
          symbol: 'roundRect',
          symbolRepeat: 'fixed',
          symbolClip: true,
          symbolSize: [16, 4],
          label: {
            normal: {
              textStyle: {
                normal: {
                  color: '#07FF18',
                },
              },
            },
          },
          barWidth: 80,
          itemStyle: {
            normal: {
              color: '#07FF18',
            },
          },
        },
        {
          name: '',
          type: 'pictorialBar',
          symbol: 'roundRect',
          xAxisIndex: 1,
          barGap: '-60%',
          symbolRepeat: 'fixed',
          symbolClip: true,
          symbolSize: [16, 4],
          data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
          barWidth: 80,
          itemStyle: {
            normal: {
              color: 'rgba(18, 17, 0, 0.1)',
            },
          },
        },
      ],
    };
    chart.setOption(option as any);
  }
}
</script>


<style lang="scss" scoped>
.chart {
  .my_chart {
    width: 1299px;
    height: 284px;
    background: #09645bde;
    border: 2px solid rgba(0, 107, 108, 1);
    margin: 0 auto;
  }
}
</style>

demo是在vue+ts框架里写的，如果是在别的框架项目中使用，直接复制option即可