echarts柱状图顶部数据显示气泡

效果图：

动效

代码：

<template>
	<div ref="mood" style="{width: 1200px;height: 490px}"></div>
</template>
import * as echarts from "echarts";
<script>
	methods: {
		drawnleft() {
        let mychart = echarts.init(this.$refs.mood);
        let poppng = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGcAAAA4CAYAAADgmebbAAAABHNCSVQICAgIfAhkiAAABCVJREFUeF7tnEtsVFUYx8859zH30WlnihDT6VBKm+nUxJjIhrDB6JqNRFSI0UBYII9Ewag7N4aNkAjTEjU+YkKTJhp27oyJiSEujBuRaQWZlocR294LdLjv+zl3SAeoRSalYb5Jv1meOee7//v/nX/u2ZyPsyV+/sfFTZEKRRnk3oiFMTAps9Q8Glu+A5xFtsRkEUJ4Jea8bL5Z/mVxNX7vAJwY7PUVZafn8wlXVaaDWJ2xPbm6fAm08v8cyKRCUwVvrcG8vMRYIZZgzNg3eXVhTQPOjeO93YrSudvyxbjN0wTkMe+rrPA7OqXbr8zOVz/re3/aSh5fh5MkpsqUV6fCzOePWRM9bpEDfercHhPYaX5w4lodjlcafnfGk8YoMa3fK1nVTXdz5yVtf/kj7o8WNwVRnK8Ea35svTRSkDiQV+2tmsKm+Hyp8Fog6b9dc4wpsgaHA+vM6oaOyC9yb+Sp92aYeZpOZTjAJCr02E3ndPdlHowUj0x62S/wSCMliQOFlLWbO6PFD/90s8fIElwObNSswwQHF5OGGoKDFEwii+AQHMQOIJZGySE4iB1ALI2SQ3AQO4BYGiWH4CB2ALE0Sg7BQewAYmmUHIKD2AHE0ig5BAexA4ilUXIIDmIHEEuj5BAcxA4glkbJITiIHUAsjZJDcBA7gFgaJYfgIHYAsTRKDsFB7ABiaZQcgoPYAcTS6smh+zk4CQ1oc3voZhtCNo2bbd7I4K4ZMM7bvllBqHNVSlonWf06hyKv1m5T19oR5Ctuhm5TI9kK/frsVj2WL9X7ENweHXrH9jvGrVidR6Jv1cqo9SDorPUi2F7rQ3DsDpxThRyLpJ2XfOrg0epd0a/aeyFgX5tvnf+r0fvGPro+q3aae23Qxi1fu9Vqkavt+UliulRvx9//OJ/2f1Cxk/e/v2vUyaEej7NdXIg/HI9Nz0XarCNwgNLFLcWJ08GjQktFVdmTzPBR66zE+uRU1q04TyiC5yUZBiKXjyWJWah9H5yFwWpp8FlZyEUGvBcgBhCt77cmAG64ETt3JcycXa4x61PWcyrjw7X+ZsZya6zUuqTfGgfBIwaXIQrL5qELvy6uvSSclRKw0nWcUuEF4GL4um9+WwXVa7Z+skOf1JztDOBn4+DET82ua/W8toJTP7yMDOQ5U98IQvj+cpQtP8zAHtl62pD5Zp/7X6b3Xbz+sPmY/m87OAvmeaWhHQFI6lTQ9d2DDN2o3dwm4uBm6sDkGUymN6ulbeEkL+ifKDwTydI221XPzDGj8SFdo8znukTwogDxTerA7+eaNQPbvLaGk5gJn/QYXtz1OgM2fdHNnN2gW1ukmOVSUfgVP3Sh6e8SNjD/OUpjFNisJufU0PNRyPokwSr6/okfml2HeV7bJ+dec+F4IcffvttdFrPxzWj7F7l7EQD2ZrgfAAAAAElFTkSuQmCC"
        let option = {
           tooltip: {
             trigger: 'axis',
           },
          xAxis: [
            {
              show:false,
               axisTick:{
                show:false  //刻度消失
           },
            splitLine:{show: false},
              type: 'category',
              // prettier-ignore
              data:  ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
            }
          ],
          yAxis: [
            {
              show:false,
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Rainfall',
              type: 'bar',
              data: [123, 60, 25, 18, 12],
              barWidth: 30,
              itemStyle: {
              color: new echarts.graphic.LinearGradient(0,1,0,0,[
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgb(135,255,69)" // 100% 处的颜色
                  }
                ],
              )
            },
            },
            {
              name: 'Evaporation',
              type: 'bar',
              data: [123, 60, 25, 18, 12],
              barWidth: 30,
              label: {
                show: true,
                position: 'top',
                fontSize: 30,
                color: "#FFAF38",
                offset: [0, -20],
              },
              itemStyle: {
              color: new echarts.graphic.LinearGradient(0,1,0,0,[
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgb(255,164,45)" // 100% 处的颜色
                  }
                ],
              )
            },
            
            },
            {
            // 气泡数据集
              name: 'glyph',
              type: 'pictorialBar',
              barGap: '-100%',
              symbolPosition: 'end',
              symbolSize: 50,
              symbolOffset: ['20%', '-120%'],
              data: [
                {
                  value: 123,
                  symbol: poppng,
                  symbolSize: [103, 56]
                },
                {
                  value: 60,
                  symbol: poppng,
                  symbolSize: [103, 56]
                },
                {
                  value: 25,
                  symbol: poppng,
                  symbolSize: [103, 56]
                },
                {
                  value: 18,
                  symbol: poppng,
                  symbolSize: [103, 56]
                },
                {
                  value: 12,
                  symbol: poppng,
                  symbolSize: [103, 56]
                },
              ]
            }
          ]
        };
        mychart.setOption(option);
      },
	}
</script>

思路：三组数据集，第三组数据为想要显示气泡的数据组。
注意点：如果需要保持图片的色彩那么symbol只能引入png格式图片，如果引入svg图片可能会造成色彩丢失。