<div id="sexColumnPic" v-show="isShowSexPic === 2" style="height:313px;"></div>

// 性别条形图
      getSexColumnPic(){
        let option;

          option = {
            yAxis:{
              type:'category',
              data:this.columnOptionData(this.sexTableData),
              axisLabel:{
                interval:0 // 0：强制显示所有标签 1：隔一个标签显示一个
              },
              axisTick:{
                show:false // 不显示坐标轴刻度线
              },
              inverse:true
            },
            xAxis:{
              type:'value'
            },
            series:[
              {
                data:this.columnSeriesData(this.sexTableData),
                type:'bar',
                itemStyle:{
                  normal:{
                    color:'#229399',
                    label:{
                      show:true,
                      position:'right',
                      textStyle:{
                        fontSize:12,
                        color:'#666'
                      }
                    }
                  }
                }
              }
            ]
          }

          // 初始化图表前，先设置容器宽高，否则显示不出来
          let width = document.getElementsByClassName('picBox')[0].offsetWidth - 44 + 'px';
          document.getElementById('sexColumnPic').style.width = width;

          let myChart = window["$hc"]["echarts"].init(document.getElementById("sexColumnPic"));
          myChart.setOption(option);
          window.onresize = () => {
            myChart.resize()
          }
      },

最近学习使用echarts画堆叠条形图时 发现使用time类型条形从原点开始
echarts版本 4.6.0
学习样本：https://gallery.echartsjs.com/editor.html?c=xryzwi7fVl
在本地显示结果：

我的解决方案（未根本解决从原点出发问题）
将隐藏线做为覆盖

series: [ {
        name: '投入',
        type: 'bar',
        stack: '总量',
        itemStyle: {
            normal: {
                label: {
                    color: "black"
                }
            }
        },
        label: {
            normal: {
                show: true,
                position: 'insideRight'
            }
        },
        data: data.map(item => item.end)
    },{
        name: '投入隐藏线',
        type: 'bar',
        stack: '总量',
        itemStyle: {
            normal: {
                label: {
                    color: "black"
                },
                color: 'white'
            }
        },
        label: {
            normal: {
                show: true,
                position: 'right'
            }
        },
        data: data.map(item => item.start)
    },
			]
			
			

关于 antv g2 条形图自定义颜色的设置

前言

提示：以下是本篇文章正文内容，下面案例可供参考

使用过程

1.安装antv g2

2.引入库

建议：为了减小前端文件的体积，建议按需引入对应的图表工具
代码如下（示例）：

3.开始使用

需要实现的效果如下图：

代码如下（示例）：

<!-- 条形图容器 -->
<div id="container"></div>

根据 api 文档中关于color 的设置进行图表设置

方案一：

效果如图

方案二

效果如图

很明显方案一，方案二，都没能很好的解决我们的问题

于是采用方案三

效果如图

方案三，虽然可以根据 label 解决问题，但是渠道是由后台返回的，并且名称不固定，所以还是没能解决所存在的问题，最终通过改造方案三，解决存在的文图，不多说，直接上代码

<!-- 条形图容器 -->
<div id="container"></div>

methods:{
// 初始化图表
	init() {
		cont data = [
	        {
	          label: '腾讯广告',
	          value: 100,
	        },{
	          label: '线下活动',
	          value: 300,
	        },{
	          label: '双十二',
	          value: 999,
	        },{
	          label: '抖音推广',
	          value: 666,
	        },{
	          label: '百度推广',
	          value: 756,
	        },{
	          label: '自动拉群',
	          value: 366,
	        },{
	          label: '其他',
	          value: 888,
	        },
	      ],
	      let index = 0
	      this.stackedBarPlot = new Bar('container',{
			appendPadding：10px,
			data,
			xField: 'value',
		    yField: 'label',
		    colorField: 'label', // 部分图表使用 seriesField
		    color: () => {
		       if(index > 4) {
		         index = 0
		       }
		       index++
		       return this.setColor(index)
		     },
		})
		this.stackedBarPlot.render();
	}，
	/** 设置 条形图的颜色  */
    setColor(index) {
      let _color
      switch(index) {
        case 1:
          _color =  '#7666f9'
          break
        case 2:
          _color = '#f5bf22'
          break
        case 3:
          _color = '#647698'
          break
        case 4:
          _color = '#61d9ab'
          break
        case 5:
          _color = '#6294f9'
          break
      }
      return _color
    },
}

最终实现效果如图，条形图的颜色会根据设置的颜色个数直接循环，达到效果

总结

该文章只是对antv g2 图表中条形图的使用做一个简单的讲解，可能方案不是最优的，如果有更优的方案，求大佬指导