Vue中Echarts柱状图自定义顶部亮点

HTML部分

<div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:16.875rem;width:25%;"></div> 

JS部分

 // 获取DOM元素     let myChart = echarts.init(document.getElementById('ParkingLotLoadRanking'));     // 名称列表左侧     let className = [1号停车场， 二号停车场， 三号停车场， 四号停车场， 五号停车场， '6号停车场', 7号停车场     let data = [50, 28, 17, 38, 90, 73, 39]     let serviceCount = [50, 28, 17, 38, 90, 73, 39]     // 顶部亮点图列表 在Echarts若要使用Base必须在前面添加64张图片 'image://，否则不会生效     let circleList = [       'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAFdklEQVRYhY1YTY/bRBh /BHbiRN7l02bqst st1dVT0gceXABYk7PfYPwIELv4IfABJ3euuBCxKCKxckBEKi2y1F6Xa3abTZT fLHxnbaMZje zE3Y70aiLPzPs888w778xEin/8EO9YJKGbVDEkrvhdWdSKBumGehGJReBVdVZyApsPk/roicSdi4aKb4sUEK38jeLEHIdVRQWOnsgLgORCLWsKzFUDqlmHXEvGRzMCMnEx6XmIgpCDRaU6saMnMTYfRpmMQgzIJdCiNTebqHc6kHUbMYkQBT7ikCReFBWypkNSZUS A/f0FOOjMSdRtlgglikgypwCK8z0FQPWzgYkpQn/8grT3jFmo0ggjMxhrSWjsWqhcXcP9c4Yo5fH8AYugFDQOSVBx8apAqkzRQBXYd1bhnF7G8HVNZznV4hDhZNWuIkEQm4EkhLC3luGtrwEb9DF8MUV 560R7xmpFXMB1kCYu 1obc3MD7qY9qbAagDqHFTKwhQkBnicIbrgyEaqy6am9uQ5Fdwnp8LfaW0FpcgX3NzvcXARy/6cAchB9e5aZxEqhaEWVGiAQCftU97PuJZH617GzBdH5Njh4/JglKdi3i1XkNzbQuTNwO4A8LBjZJpXAWRAOHgnkBOgjtwoZgD5tM/ewripkHJMFMHuQr2fgehTzB ORVmTUmYAJoAWgAsAHbJLN7W5H1z1agv6pP6LgZvYRdIkGsKVLOD64Mel1njM6fOGtxxg33rfLwNe3 DjXYOX H0t64we0nYasnSjLrnWLq/CrnWZ3mDkygSsHdtRLMA/iXhYJqgQELAuvc 9r98BOPWeqbdnU Ajc PcfjdDxi eC2Akywu/MsJ800xrp6epQTkwi5QmzYCZ8yJqYIKCYn6nTYefP1FATwt9Btto31y TVh16jMN8UQMOWCAnKtgeDaK SCnISGDx59CrW5PAeeLWhzmfVJ xe3rMx8yzVTPE KQSgpOmbD2cKMyBLTzoNK8LQkfcRkJWdKU9 SoolBKJeGS4gjlLZmbkrdupGA0rAqx e s1ImEPNVKR riYX 6EYCoTeqHJ/7XkggRhwGqFk1IYqjQo4fdZ/dSGDUPRTyfij4iZlviiGQSAkkDKPZFJplCMBEyHABuo9/BZlWq0Dbuo9/yfrn4xMi1DfFEC4ossAmBpk4qC01CwdLnts9TE5Ocfjt9wicwRx44CRttE SkHw dpaRoL4phoCpZuDURl0HKx9tQVuiW6ac25MMd/l3F79/9Q1WP7uP1vY6l/0YvZ8PEIf07J9yc/nYRAnqU9F1XP/jiAoUCZApAZkO0Npq4 KvMz5YFRJWcuzSdXz90x8A/uTjIz5TnwOnBHIVWlu3mG KUVoCCCQiOAd9KA0d5pohKJA6pVmSxsCQngAlG/K28ZwC1JfSMJjv/EaEVAFxq0QgLoHbfwlzfQdk2oN/4S3I7W 7D/gF01ckmOsduP3/mO/SJbW4BKkjGguKfgJ7fw3Df9/AO/OEwAxuvBGlshu3FFi7dxFcnjCf bYsxEB6RUovCSGrr58NYO9FsHY3ob93Aee5w52rhQuHuHzi1rX3bOjtFfjnR/w6Fop3wXRceikt3/9TABX1TgOt7Q12unnnV5icjBB65fhJlkExAHOtBaO9zOQfdV/BPZ1yUlFJgUgkAIFA V2QkLF2LRjt25BVC2HgI/LpuyCZiaTIkHUdiqYjIkP4F2dcsaiUDefeBSKBRQeIPFerpgJz3YRq1NlDhAlJIhDPxeR4AjKZm2U58BblgfTNFvPnWeHqLMQHQCYSnGd xeM0fwNWAGbPMv42rHqelx gVa/lcnnba1gkl5Wq53m587v8NyCOXfR7vgD4H8khvGFl000HAAAAAElFTkSuQmCC',       'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAFb0lEQVRYhY1YW28bRRT ZtbrS24mjVu3btPUDoiqFIEQ4gUh8dKX8hf4A/wT Am88cA7b5GgrxVPFIREL0rapHHbOHGcxM7Fa3u9c9BMZrZn1 umI43W2j2Xb75z5pwZi89/JLznEExMTFGhKb njtyUD KCZxaILOfTnvGIAfj3z5/hmjGcnpjyLosBPtPvtB yfsxIMBCuQWY4komnD09eRVHMoISc1R9jTH0EahcDhIisM5V6mhmugfz75t35qlgOyJTTxJQ3MCcqqIo8yhRBIcQQCmOrmYOPgvAgaYQedbCnXuPUgkhPYsBiBjjNzrGnp1hEUd7CCiTmqIsjtYsmnRllyfSMQTELKa5iQVTxsXcZp6qJJh0gAAwrbjgQWpc4gLTznKxjUSyhgR660Qu8hDLv8w5cCkBEZ4joBU4h0fNWsSjr IQWsKm2cDQlYQ2AdJKdO2 gIi5hhV6jpXYRAijpHLIzlwXAZAMQ6gBFGziWVxGIG2hIgW21iQ6TFe7JGYhjLmuY187VS7SoYwxr5wU78xaEZ VhaY2Mc2AEYKi/q10MxRgtHUI5wFDtoGd14qTMpTNeFOHLGupqD23qmBVp58XUzFsWOICxdT5g4AR1EFAJbW2TDvGYBnFSCs5AzIJcRZVGGKtX6AOYsasu2d8lxoafAhDalfPwmOTUtsQi5rXt6DFe8zqSTEIfnphBNdrAG sgb1fuAMzaZ7FxG40rNaxo5fYOtjefYZOtXrCtZkKjmuh4H E6fLQQGrbEBACvjjKFGFHXCMxaAJyB2cvXcOPre/h dgE33SpW7wCffoXmnw/w637LrJBYWExeUBdn2rb2Ea1j3wGQiV0wgzKdmAKSs9PnIOY/QOXb7/ADd 7G3AJu6m9ahoUpz3ZNztieQZn7lJwB4WOGjg2NcS1gIPJffoN7 SIW087d0N 0jJNPbVmpbQvfMCs4A2 TUKKAU0PZREXUhipV3J3m3A0rk2N6MmZa25YGWJyEMqUvSLGkTE0/j4WLAPgFI5Opz2zHIw2AbFDSbfW8k4U4uQhAODIymfrMdiYAgsIIcyZuxDpY5MrsYRtPLwJw2MYzm/1OT8UNSNtWplglWnC8YhqjL bNvlestrsKN3r0EA/sCqeu/tFD/OHkmb4Bom1rH/yAIhkaQh89MY 5RGN5W9sH3QPsPfwdPwd9tNPOg/75Ny1jC9LQ6oYOhLHdN/0g0Q1jBlQTPe8u6qIMSb2J2m4q3M42Nn/7BT/d/gx3KtXzetDZQ/PZv3hCyvT vp2B1TVMaJsij0K0HgMwIBIAKMCYBmjLZVSinqlWI9Z0XHmNSGH09B/8BeBvq897QcAAxCzIZVzWtrWPLAAOhFIbaMm7qMgaimrHKPNEdeV1eEE3HHAGtC1RRDH6D vsRAQHgG8VRQOMqY0tUcOHIsAbOjJG0rX9XeeBIZ9iEULUUFVtPNe2kTqkJkLgDOlckHm8kqtYVlvYoQMDImKrfPeJyNIuluDJOmrUxSttk23LRAjcEckdErSQUM/Rlg0or45bqowDtWkMhLy2pw lfOvKBsryEpbUIV7a45irC/GJOM2AYB MoFakE/TlMla8L1CmQxypFk4MuZNVVOn J6 Z45xuWMNoG09o3yTkGMnjOTJ3AYvn252xj9NoH09lHQtiCVdyVdwifScYYYjIynqmxRSEjwKNcUxdbKkXhjGVqoYqlXMTu4BnO88LqbZwiC10RQmeuI5ZUUAJecvCGIqOEag3OKMgEefM21F6F5hh72xkr2eJozPLD1AAQc9NELIup9x4VkOCu5ZN3A3dC 6MGZt2W06Pd92G3QITY9r1PEHTe/43wHWzfk8OAP8D28XBfaJJ48oAAAAASUVORK5CYII='     ]     // 设置每个状图的颜色     var colorList = ['#FCD298', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7'];     // 设置默认值     var defaultData = [100, 100, 100, 100, 100, 100, 100]     let option = {       grid: {         left: '5%',         right: '5%',         bottom: '5%',         top: '10%',         containLabel: true       ,
      backgroundColor: 'rgb(49,69,81)',
      xAxis: {
        show: false,
        type: 'value'
      },
      yAxis: [{
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#B9E4E6'
          },
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        data: className
      },
      {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: '12'
          },
          formatter: function (value) {
            return value + ' %';
          },
        },
        data: data
      }
      ],
      series: [{
        name: '停放车辆数',
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          data: serviceCount,
          normal: {
            barBorderRadius: 0,
            color: function (params) {
              // 大于等于50%的是黄色 反之为蓝色
              var colorList = [
                ['rgba(252, 210, 152, .2)', 'rgba(252, 210, 152, 1)'],
                ['rgba(36, 253, 231, .2)', 'rgba(36, 253, 231, 1)'],
              ];
              var colorItem
              if (params.data >= 50) {
                colorItem = colorList[0];
              } else {
                colorItem = colorList[1];
              }
              // 设置线条渐变色
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: colorItem[0]
              },
              {
                offset: 1,
                color: colorItem[1]
              }
              ], false);
            }

          },
        },
        barWidth: 4,
        data: data
      },
      {
        name: '背景',
        type: 'bar',
        barWidth: 4,
        barGap: '-100%',
        data: defaultData,
        itemStyle: {
          normal: {
            color: '#1B375E',
            barBorderRadius: 0,
          }
        },
      },
      {
        name: 'XXX',
        type: 'pictorialBar',
        symbol: function (params, value) {
          // 设置图片
          if (params >= 50) return circleList[0]
          return circleList[1]
        },
        symbolPosition: 'end',
        symbolSize: [30, 30],
        symbolOffset: [10, 0],
        z: 20,
        data: data
      }
      ]
    };
    myChart.setOption(option);
    window.onresize = () => {
      myChart.resize();
    };