关于 antv g2 图表中 条形图的使用

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

---

前言

例如：在vue3.0 的开发过程中，使用到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 图表中条形图的使用做一个简单的讲解，可能方案不是最优的，如果有更优的方案，求大佬指导