实现的效果:
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。
