AntV G2 柱状图改变柱子颜色+柱子上方显示文字与图标

最新推荐文章于 2026-06-04 10:35:47 发布

原创最新推荐文章于 2026-06-04 10:35:47 发布 · 1.8w 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

图表专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用AntVG2库自定义柱状图的样式，包括柱子的颜色、上方显示的文本和图标。通过示例代码展示了根据不同条件设置柱子颜色和图标的方法。

AntV G2，对柱状图进行一些自定义：

1.柱子颜色自定义

2.柱子上方显示文本

3.柱子上方显示图标

具体代码如下：

<template>
  <div id="mountNode"></div>
</template>

<script>
  import G2 from '@antv/g2'

  export default {
    name: "antv",
    mounted () {
      this.drawBar()
    },
    methods:{
      drawBar(){
        var data = [{
          "name": "John",
          "vote": 88
        }, {
          "name": "Damon",
          "vote": 56
        }, {
          "name": "Patrick",
          "vote": 92
        }, {
          "name": "Mark",
          "vote": 83
        },{
          "name": "Lose",
          "vote": 43
        },{
          "name": "Kii",
          "vote": 99
        }];

        var imageMap = {
          'excellent': 'https://zos.alipayobjects.com/rmsportal/mYhpaYHyHhjYcQf.png',
          'good': 'https://zos.alipayobjects.com/rmsportal/JBxkqlzhrlkGlLW.png',
          'bad': 'https://zos.alipayobjects.com/rmsportal/zlkGnEMgOawcyeX.png',
        };

        var chart = new G2.Chart({
          container: 'mountNode',
          //forceFit:true时宽度配置不生效
          width:1000,
          height: 600,
          padding: [60, 20, 40, 60],

        });

        chart.source(data, {
          vote: {
            min: 0
          }
        });

        chart.coord({
          transposed: true
        });

        chart.legend(false);


        chart.axis('vote', {
          labels: null,
          title: null,
          line: null,
          tickLine: null,
        });

        chart.interval().position('name*vote').color('name*vote', function (name,vote) {
          if (vote > 90) {
            return '#db4c3c'
          } else if (vote > 60) {
            return '#fec514'
          } else {
            return '#7f8da9'
          }
        });

        chart
          .point()
          .position('name*vote')
          .size(60)
          .shape('name*vote', function(name,vote) {
            if (vote > 90) {
              return ['image', imageMap['excellent']];
            } else if (vote > 60) {
              return ['image', imageMap['good']];
            } else {
              return ['image', imageMap['bad']];
            }
          })
          .label('vote',{
            offset: -20, // 文本距离图形的距离
            textStyle: {
              fill: '#404040',
              fontSize:'14',
              fontWeight: 'bold', // 文本粗细
              shadowBlur: 5, // 文本阴影模糊
              shadowColor: '#fff' // 阴影颜色
            },
            formatter:function (value) {
              if (value > 90) {
                return '优秀'
              } else if (value > 60) {
                return '良好'
              } else {
                return '不达标'
              }
            }
        });

        chart.render();
      }
    }
  }
</script>

<style scoped>

</style>