vue 使用echarts实现叠加柱状图

柱状图效果如下

代码部分

1. 引入封装好的echarts组件，echarts封装详见地址https://blog.csdn.net/weixin_46328739/article/details/132495031

<template>
  <div>
    <chart
        :chart-data="chartsData"
        class="my-Chart"
    ></chart>
  </div>
</template>
<script>
  import chart from '@/components/chart/index'
  export default {
    data() {
      return {
        chartsData: {
          grid: {
            left: '3%',
            right: '4%',
            top: '5%',
            bottom: '5%',
            containLabel: true
          },
          legend: {
            show: false,
            // selectedMode:false,
            bottom: 5,
            itemWidth: 12,
            itemHeight: 12,
            data: [
              {
                name: '实际11',
                icon:
                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAhSURBVHgB7coxAQAACAIwNLYNTQUVODjZveEfYViYGjNRQAgDVe/jlBUAAAAASUVORK5CYII='
              },
              {
                name: '实际22',
                icon:
                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAjSURBVHgB7coxEQAACAJANKbRPbtIBQZGfv6a24egIUr0RALvRAMj3fNvjwAAAABJRU5ErkJggg=='
              },
              '\n',
              {
                name: '目标11',
                icon:
                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAsSURBVHgB5cwxEQAACMNAiiVUIRE9GGBgLxa6k/kv4DZNyE0MUxkKlI8/4QEOcgYtfbah/gAAAABJRU5ErkJggg=='
              },
              {
                name: '目标22',
                icon:
                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAqSURBVHgB5cwxDQAACANBaBpEIA3pBC9goTs/X95rek0IJkYwUoHy8Sc8Ig8DS78lfo0AAAAASUVORK5CYII='
              }
            ],
            itemGap: 10,
            textStyle: {
              rich: {
                title: {
                  color: '#fff',
                  fontSize: 12,
                  verticalAlign: 'middle',
                  lineHeight: 14,
                  width: 120
                },
                text: {
                  color: '#fff',
                  verticalAlign: 'middle',
                  fontSize: 12,
                  lineHeight: 14
                }
              }
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              function getHtml (param) {
                let str =
                    '<div class="toolipFont">' +
                    param.marker +
                    param.seriesName +
                    '：' +
                    '<span class="valueFont">' +
                    param.value +
                    ' tCO₂' +
                    '</span></div>'
                return str
              }
              let htmlInf0 = []
              for (let i = 0; i < params.length; i++) {
                if (params[i].seriesName == '实际11') {
                  htmlInf0[0] = getHtml(params[i])
                } else if (params[i].seriesName == '目标11') {
                  htmlInf0[1] = getHtml(params[i])
                } else if (params[i].seriesName == '实际22') {
                  htmlInf0[2] = getHtml(params[i])
                } else {
                  htmlInf0[3] = getHtml(params[i])
                }
              }
              let res =
                  '<div  class="toolipHeader">' +
                  params[0].axisValueLabel +
                  '</div>'

              res += '<div style="clear: both;">'
              for (let k = 0; k < htmlInf0.length; k++) {
                if (!htmlInf0[k]) continue
                res += htmlInf0[k]
              }
              res += '</div>'
              return res
            }
          },
          xAxis: [
            {
              axisTick: {
                show: false
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#fff'
                }
              },

              data: this.xData,
              axisLabel: {
                show: true,
                fontFamily: 'Montserrat',
                fontSize: 24
              }
            },
            {
              show: false,
              data: this.xData
            }
          ],

          yAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                width: 1,
                color: 'rgba(255, 255, 255, 0.08)'
              }
            },
            axisLabel: {
              show: true,
              fontFamily: 'Montserrat',
              fontSize: 24
            }
          },
          color: [
            'rgba(241, 186, 105, 0.2)',
            'rgba(90, 220, 218, 0.1)',
            '#FFC97A',
            '#5ADCDA'
          ],
          series: [
            {
              name: '目标11',
              type: 'bar',
              barWidth: 30,
              itemStyle: {
                barBorderRadius: 0
              },
              data: [20,30,40,.....],
             // 柱子顶上的帽子
              markPoint: {
                symbol:
                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAACCAYAAAC+LzfPAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAkSURBVHgBrcCxEQAABAPAoLRE9l9KYwR97OC8aboAEVcZdDxYmDMFBz5dgFYAAAAASUVORK5CYII=',
                symbolOffset: [0.6, 0], //位置偏移
                symbolSize: [38, 2],
                data: [{coord: ["一月", 20]},{coord: ["二月", 30]},.....],
                label: {
                  show: false,
                  offset: [0, 0],
                  textStyle: {
                    color: '#5470c6',
                    fontSize: 15
                  }
                }
              }
            },

            {
              type: 'bar',
              name: '目标22',
              barWidth: 30,
              barGap: '30%',
              symbol:
                  'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAsSURBVHgB5cwxEQAACMNAiiVUIRE9GGBgLxa6k/kv4DZNyE0MUxkKlI8/4QEOcgYtfbah/gAAAABJRU5ErkJggg==',
              data: [2,5,8,......],
              // 柱子顶上的帽子
              markPoint: {
                symbol:
                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAACCAYAAAC+LzfPAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAjSURBVHgBrcABEQAABATBYwT5/lGUEOV1MDbaHrA4KkLJgwWNaQTvPy41uQAAAABJRU5ErkJggg==',
                symbolOffset: [0.6, 0], //位置偏移
                symbolSize: [38, 2],
                data: [{coord: ["一月", 2]},{coord: ["二月", 5]},.....],
                label: {
                  show: false,
                  offset: [0, 0],
                  textStyle: {
                    color: '#5470c6',
                    fontSize: 15
                  }
                }
              }
            },

            {
              type: 'bar',
              name: '实际11',
              xAxisIndex: 1,
              barWidth: 15,
              itemStyle: {
                barBorderRadius: 0
              },
              data: [21,10,20]
            },
            {
              type: 'bar',
              name: '实际22',
              xAxisIndex: 1,
              barWidth: 15,
              barGap: '150%',
              itemStyle: {
                barBorderRadius: 0
              },
              data: [20,30,40]
            }
          ]
        }
      }
    },
    components:{chart},
    methods:{

    }
  }
</script>