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

亦凉 2021-11-08 21:24 2461阅读 0赞

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

1.柱子颜色自定义

2.柱子上方显示文本

3.柱子上方显示图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70][]

具体代码如下：

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70]: /images/20211108/0e7e944f4a05449d9590534bab833951.png