echarts实现象形柱状图

实现的效果:

html部分:

 <div class="echarts-barLine">
        <div style="width:100%; height:100%" ref="XXEchart"></div>
      </div>

css(父盒子设置固定高宽)

 .echarts-barLine {
      width: 100%;
      height: vh(265);
    }

js部分:

//象形图 
XXEchart(dataSource) {
      console.log(dataSource);
      var myEchart = echarts.init(this.$refs["XXEchart"]);
      //要替换的柱子图片（base64）
      var base64Symbols =
        "image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNTJweCIgaGVpZ2h0PSIxNDhweCIgdmlld0JveD0iMCAwIDUyIDE0OCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5hcnJvd+Wkh+S7vSAyPC90aXRsZT4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iMTAwJSIgeTE9IjUwJSIgeDI9IjAlIiB5Mj0iNTAlIiBpZD0ibGluZWFyR3JhZGllbnQtMSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMyMEFERkYiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzI5NjBBQiIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IummlumhtS3nnIEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNDQuMDAwMDAwLCAtODYxLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzguMDAwMDAwLCA3NDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iYXJyb3flpIfku70tMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzA2LjAwMDAwMCwgMTE4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0i6Lev5b6ELTciIGZpbGw9IiMwMTNCOUMiIHBvaW50cz0iMjcuODU3MTQyOSAwIDIyLjM2NDE4NTEgMCAwIDI0LjY2NjY2NjcgNS40OTI5NTc3NSAyNC42NjY2NjY3IDEwLjk4NTkxNTUgMjQuNjY2NjY2NyAxMC45ODU5MTU1IDE0OCAxNi4wODY1MTkxIDE0OCAxNi4wODY1MTkxIDI0LjY2NjY2NjciPjwvcG9seWxpbmU+CiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9Iui3r+W+hCIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgZmlsbC1ydWxlPSJub256ZXJvIiBwb2ludHM9IjUyIDE4Ljg2Mjc0NTEgMjcuOTMwNjcwMSAwIDQuNjQyODU3MTQgMjQuNjY2NjY2NyAxNi4wODc1IDIzLjY5OTM0NjQgMTYuMDg3NSAxNDggNDAuOTUgMTQ0LjYxNDM3OSA0MC45NSAyMS43NjQ3MDU5Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==";
      var option = {
        tooltip: {
          show: true,
          trigger: "axis",
          showContent: true,
          // extraCssText: `width:${this.getFontSize()}px;height:${this.getFontSize(160)}px;background:rgba(0,0,0,0.3);padding:${this.getFontSize(20)}px;`,
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            color: "#ffffff",
            fontSize: this.getFontSize(14),
          },
          formatter: function (data) {
            let title = `<p style="text-align: center;margin-bottom: 5px;">${data[0].name}项目带动融资</p>`;
            let str = "";
            data.forEach((item) => {
              item.value
                ? (str += `<p style="margin-bottom: 5px;padding-left: 10px;padding-right: 10px;"> ${item.seriesName}：${item.value}百万</p>`)
                : (str += `<p style="margin-bottom: 5px;padding-left: 10px;padding-right: 10px;"> ${item.seriesName}：--</p>`);
            });
            return title + str;
          },
        },
        // legend: {
        //     data: ['江西增速', '全国增速'],
        //     icon: 'roundRect',
        //     itemWidth: this.getFontSize(26),
        //     itemHeight: this.getFontSize(8),
        //     itemGap: this.getFontSize(40),
        //     textStyle: {
        //         color: '#ffffff',
        //         fontSize: this.getFontSize(32),
        //         fontFamily: 'pf'
        //     },
        //     right: this.getFontSize(50),
        //     top: '3%'
        // },
        // color: ,
        grid: {
          left: this.getFontSize(20),
          right: this.getFontSize(29),
          bottom: "0%",
          top: "20%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            axisLabel: {
              textStyle: {
                fontSize: this.getFontSize(14),
                color: "#AAD3FF",
                fontFamily: "pf",
              },
              interval: 0,
              formatter: function (value) {
                var ret = "";
                var maxLength = 5;
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength);
                if (rowN > 1) {
                  for (var i = 0; i < rowN; i++) {
                    var temp = "";
                    var start = i * maxLength;
                    var end = start + maxLength;
                    temp = value.substring(start, end) + "\n";
                    ret += temp;
                  }
                  return ret;
                } else {
                  return value;
                }
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: this.getFontSize(1),
                color: "rgba(255,255,255,0.48)",
              },
            },
            data: dataSource.times,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：亿",
            nameTextStyle: {
              fontSize: this.getFontSize(14),
              fontFamily: "pf",
              color: "#AAD3FF",
              align: "righrt",
              padding: [0, 0, 0, this.getFontSize(-10)],
            },
            // nameGap: this.getFontSize(40),
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: this.getFontSize(1),
                color: "rgba(255,255,255,0.48)",
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: this.getFontSize(14),
                color: "#AAD3FF",
                fontFamily: "pf",
              },
              // margin: this.getFontSize(20),
            },
            splitLine: {
              show: false,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["rgba(50, 197, 255, 0.08)", "rgba(6, 17, 47, 0)"],
              },
            },
          },
        ],
        series: [
          {
            name: "融资",
            type: "pictorialBar",
            symbol: base64Symbols, //象形图
            symbolSize: ["60%", "100%"],
            itemStyle: {
              opacity: 1,
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            data: dataSource.values,
            z: 1,
          },
        ],
      };
      myEchart.clear();
      myEchart.setOption(option);
      window.addEventListener("resize", () => {
        myEchart.resize();
      });
    }

注意:PNG、GIF、JPG、SVG、PSD、BMP、ICO、TTF、WOFF、EOT 等格式转换base64使用图片转base64。