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

最新推荐文章于 2024-07-25 10:34:02 发布

原创最新推荐文章于 2024-07-25 10:34:02 发布 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #vue

Antv G2的使用专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在使用 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
    },
}