关于 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 图表中条形图的使用做一个简单的讲解,可能方案不是最优的,如果有更优的方案,求大佬指导