本文主要是针对横向堆叠条形图进行讲解。包含了末尾增加合计数字，以及动态渲染数据，根据数据不同来动态展示高度，以及动态设置color等。下面先看一下效果图：

html部分代码：

<div style="margin:20px 0;">堆叠条形图</div>
    <div style="background: #fff;padding-bottom: 20px;" :style="{height: statusChartList.yAxis.length*60+'px'}" >
      <div id="statusChart" style="height:100%;margin:0 auto;"></div>
    </div>
通过计算的方式动态设置高度，根据返回的数据来计算：:style="{height: statusChartList.yAxis.length*60+'px'}"
 
本文是用假数据展示,数据格式如下：
 
statusChartList:{
          projectName:['后台管理系统','考勤系统','uniapp跨平台','基于vue的移动端'], // 横坐标
          yAxis:['张三','李四','王五','刘二','胡六','增加一人'], // 纵坐标
          projectNum:[
            [200,300,100,145,90,30], // 第一个项目对应的纵坐标数据
            [220,100,200,100,0,0], // 第二个项目对应的纵坐标数据
            [290,100,100,0,0,0],// 第三个项目对应的纵坐标数据
            [100,100,0,0,0,0],// 第四个项目对应的纵坐标数据
            // 第n个项目对应的纵坐标数据
          color:['#67C23A','#409EFF','#E5A038','green'], // 颜色设置
          all:[810,600,400,245,90,30] // 针对 projectNum每一项里面的第i个元素之和 === all数组中的第i项
绘制部分代码：（动态渲染+自定义动态color看代码一目了然）
 
getStatusChart(){
        const myChart = echarts.init(document.getElementById("statusChart"));
        let series = []; 
        // 遍历二维数组
        this.statusChartList.projectNum.forEach((v,index)=>{
         var object =  {
             name:  this.statusChartList.projectName[index],
             type: 'bar',
             stack: '总量',
             barWidth : 20,//柱图宽度
             itemStyle:{
               normal:{
                 color:this.statusChartList.color[index] // 设置柱状颜色
             label: {
               show: true,
               position: 'insideTop',
               formatter: this.zero_format()
             data: v
          series.push(object)
        });
        let all = {
          name:  '总数',
          type: 'bar',
          stack: '',
          barWidth : 20,//柱图宽度
          itemStyle:{
            normal:{
              color:"transparent" // 设置柱状颜色
          label: {
            show: true,
            position: 'insideRight',
            formatter: this.zero_format(),
            color:"#363636",
            distance:-30 // 文字距离图形元素的距离
          // z:-1,
          barGap:"-100%",
          data: this.statusChartList.all
        series.push(all)
        myChart.setOption({
          title:{
            show:true,
            text:'工时占比',
            textStyle:{
              fontSize:12,
              color:"#363636",
              fontWeight:500
            left:"center",
            top:30
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          legend: {
            data: this.statusChartList.projectName,
            selectorPosition:"end",
            y: 'bottom',    //延Y轴居中
            x: 'center', //居右显示
          grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true,
          xAxis: {
            type: 'value',
            name:'年度总工时',
            nameLocation:'center',
            nameGap:25 // 横名称与横坐标轴的距离
          yAxis: {
            type: 'category',
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            data: this.statusChartList.yAxis,
            name:'员工姓名', //纵名称
            nameLocation:'center', // 纵名称的位置，居中显示
            nameGap:55 // 纵名称与纵坐标轴的距离
          series:series
下面拆解讲解以下，求和部分的代码是：
 
let all = {
          name:  '总数',
          type: 'bar',
          stack: '',  // 这里一定要清空
          barWidth : 20,
          itemStyle:{
            normal:{
              color:"transparent" // 设置柱状颜色为透明色，不然他会有背景色，如果设置为白色，他会覆盖网格
          label: {
            show: true,
            position: 'insideRight', // 这里的位置需要insideRight或者top才能设置 distance
            formatter: this.zero_format(),
            color:"#363636",
            distance:-30 // 设置这个距离，是把求和的数字往右移动
          barGap:"-100%", // 重叠求和柱子与最后一个柱子
          data: this.statusChartList.all
        series.push(all)
stack 如果不清空，那么求和柱子会根据自己的数量来占位置；
 barGap:"-100%", 设置柱子进行重叠，如果不设置，求和柱子就会在其他柱子下面，设置之后，数字会显示在其他柱子上面；
 label.position=‘insideRight’,设置内容显示在其他柱子上面的末尾处
 label.distance=“-30” // 设置这个距离，是把求和的数字往右移动
                                    echart堆叠条形图计算总数先上图首先写入一个数据用于最上边总数的展示option配置如下option = {title: {text: '未处理'},tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'},formatter: (param,...
                                    最近公司项目要做一个统计图用到了echarts里面的条形图，对于以前就接触过一点echarts的我信心满满，没想到动手的时候才发现问题百出，看来实践真的是检验学习成效的标准。这里有两种条形图，一种横向的一种纵向的。不管是哪种都要先初始化echarts:// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementByI
setwd('D:\\12_G4NaK_PEG\\04_PQS\\01_anno')
data<-read.table('1G2VSG3.txt')
library(reshape2)
library(ggpubr)
colnames(data)<-c('Sample','type','feature','number','all','baifen')
data$feature<- factor(data$feature,
<view class="charts_box">
	 <!-- 柱状图 -->
	 <!-- <qiun-data-charts type="column" :opts="{extra:{column:{type:'stack'}}}" :chartData="chartMixData" :reshow="currentTab==='ucharts1'" background="#fff"/> -->
	 <!-- 条状图 -.
activity	A	B	C	D	E	F	G	H
Social.events	3	6	12	3	14	24	11	24
Academic.skills.workshops	15	17	14	6	11	29	17	24
Summer.research	36	11	5	9	16	21	1	27
                                    hicharts的堆叠柱状图，对于一些数据的统计有着很好的数据体验，但是堆叠的数据标签，好像只提供了一个总和的展示，如
但有的时候，我们需要统计一些数据的对比情况，比如我想知道如上图中的小刘的销售额占据总销售额的百分比，来确认小刘的销售业绩，同样也可以统计其他人的相关数据，这个时候我们就想将最想看到的、最关注的数据以百分比的形式放到堆叠标签的位置，还拿业绩的统计来说，我想统计小刘的销售业绩，或者...
                                    setEchart(val){
    // 基于DOM，初始化echarts实例（注意！Vue的DOM日怪的很，一般要腾个1秒才加载完）
    this.lineChart = this.$echarts.init( document.getElementById("charts"));
    onresize=()=>{
        .lineChart.resize();//当页面大小变化→图标对应变化
    var xList = [];   //X轴坐标值
                                    将条形宽度设置为 .25，使条形使用 25% 的可用空间。为该条形颜色指定一个不同的 RGB 颜色值。XTickLabel 属性用于指定每个刻度值要使用的文本。使用 XTickLabelRotation 属性旋转标签。将条形宽度设置为 0.5，使条形使用 50% 的可用空间。通过将 FaceColor 属性设置为一个 RGB 颜色值来指定条形的颜色。叠加两个条形图并指定条形的颜色和宽度。然后演示如何添加图例、显示网格线和指定刻度标签。轴标签，并在左上角添加图例。按照创建图表的顺序指定图例说明。