echarts横向个性化柱状图

先看一下效果图：

横向柱状图，顶部小圈是一个图片，下面我们就来看看如何实现
1.第一步，先把柱状图中需要插入的图片，转换成base64格式，百度搜一下，可以搜到在线工具直接转换
2.html中定义一个div，用来盛放柱状图

<div style="width: 500px; height: 400px" id="barChartSix"></div>

3.引入echarts

import * as echarts from "echarts";

4.写js

//这个方法很重要，是处理小圆圈的数据和位置的
getSymbolData() {
      this.arr = [];
      for (var i = 0; i < this.Ydata.length; i++) {
        this.arr.push({
          value: this.Ydata[i],
          symbolPosition: "end",
        });
      }
    },
getBarChart() {
      this.getSymbolData();
      var myChart = this.echarts.init(document.getElementById("barChartSix"));
      var salvProMax = []; //背景按最大值
      let maxData = Math.max(...this.Ydata);
      for (let i = 0; i < this.Ydata.length; i++) {
        salvProMax.push(maxData + 20);
      }

      var option = {
        backgroundColor: "rgb(0,0,0,0)",
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#319899",
              },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            interval: 0,
            data: this.Xdata,
            z: 3,
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: () => {
                  return new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "rgba(0,195,153,0)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,255,200)",
                    },
                  ]);
                },
              },
            },
            z: 2,
            barWidth: 8,
            data: this.Ydata,
          },
          {
            name: "XXX",
            type: "pictorialBar",
            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA0klEQVQokaWSsUoDQRRFT7bQbsFE82OxtbM1SWevkM8TiY2Vf2DILpJNpsix2NllZ1eDxAMXhjvvvscwD5WOrtWVulb3Ua/qU7xra7uhmbr1d4pYkwRn6vFEqOHYhFFvYre/UqjTDHgAciIBWFQwKWFc1udAQg4siY9vWVTKNtVjNZi6Hql74LJpNylhYzpiPILPPLFCxnmEDHjvOncXw6r7ofeB9ee2HNT5Tq+KWvNd7fVYoU7P+Y5/LUCjW7U8ESr9YeX6S/6mBvVLfVGf7S35N3HsEHSsKx9TAAAAAElFTkSuQmCC",
            symbolSize: [15, 15],
            symbolOffset: [5, 0],
            z: 3,
            itemStyle: {
              normal: {
                color: "#0A74FF",
              },
            },
            data: this.arr,
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 8,
            barGap: "-100%",
            data: salvProMax,
            itemStyle: {
              normal: {
                color: "#1C5C75",
                barBorderRadius: 30,
              },
            },
            z: 1,
          },
        ],
      };
      myChart.setOption(option);
    },

如此，便制作完成了。