echarts柱状堆叠图使用引入图标代替

效果图：

代码：

<template>
	<div  refs="testchart"></div>
</template>
<script>
// 方式1.引入图片
import yellowlike from './yellowlike .png'
import greenlike from './greenlike .png'
export default {
	data() {
		return {
			yellowlike ,
			greenlike 
		}
	},
	methods: {
		drawright() {
        let mychart = echarts.init(this.$refs.testchart);
        // 方式2.转换成base64格式
        const yellowlike = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAABmJLR0QA/wD/AP+gvaeTAAABYklEQVRIibWSzytEYRSGn/e7FLFkIUtlZWGj2GkmWdlozMJWyl8h/BNTNvYYTWg2xs4CiewkWSqKDEWMe4/FEGN+XjP3rL5zzvs95+10IGRYOr5t6didpeNz9bQKB57sg4+br9THNKJE7qya3oWBI3/gV+aB1XQfDh4Ew6XDbKh1cGn2T97bErhtxWLAWGmRfNNwWx/vxpSq0HpoCm7rMx6etwYMVmif/xtuhnD3KSBRUSAd1/ov25iI4+znxMzeCJRRMpe3zdgq0nyN/4ug23JqUMBTtg0X7AIdPw3AC5aAZdBoLWfAClh51QQfduFAr+WT1VUH2kCo34E9Ng+qGNeu3q3+P3TpcETk3I4cFhFcOnIokrW809556iAS54ea2nlxmCKAaw8gmrWY/wUPWg5/JOg5KcJbf4r7Sm74Rbiv6s5lT+HZWvt+OZx/BTyXCuyuqGtbAA6AQoPkDNO57HfyCTjZcPNTwPDNAAAAAElFTkSuQmCC"
        const greenlike = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAABmJLR0QA/wD/AP+gvaeTAAABhklEQVRIibWSsWoUURSGv//sKoJiZyEpA4LRwkIhtvoGstPYrhHxDWxEfYnAwpoHGISgkkbsLEwIisVGkWApaCGJionZ3fktTCSOu2MmO3Oqe+75/++eeziiZLR7yWPkWaM7D2fSbpFWZcA3166dHhIfd9Mh9qXuuUevx+mjDHzgxvS+tGGpXaQvBVdwIWc+Xxkc+/pfKZyqBH6jl1wBLueuNyeG3+4lJ6xsfkTpy0TwxEljO7wAOpOvSbwp8jYLyUYn33oeaI2sZ6wU2dXuta4q9GfFTPazcTQWO9PpZnut1QHmxprhLtKnfx91n+zIUhPx1Pax/ZbBju8B9wWzLvwYD/AIhcDRfxfAVr4W9vEC5oFCYiqAjUlBY+gfgv/s6uHD72vrXLAcoFrgWablANcxlp3m1varANfQuV52Lj75EXIdY/EzgLCqH0vmXTiufBU3vs/EKkAoKh6L9TxVOgQIZ+M7t/W1NFws7B0DZevAtxz082/h4BbwAugfkLzYPZsu7WW/AKSMiLabhbAhAAAAAElFTkSuQmCC"
		var maxData = 2000;
		let option = {
		  tooltip: {},
		  xAxis: {
		    // max: maxData,
		    axisLabel: {show:false},
		    splitLine: { show: false },
		  },
		  yAxis: {
		    data: ['2013', '2014', '2015', '2016','2017'],
		    inverse: false,
		    axisTick: { show: false },
		    axisLine: { show: false },
		    axisLabel: { show:false }
		  },
		  grid: {
		    top: 'center',
		    height: 600,
		    left: 70,
		    right: 100
		  },
		  series: [
		    {
		      // green data
		      type: 'pictorialBar',
		      stack: 'total',
		      // 方式1.import图片
		      // symbol: "image://" + this.yellowlike,
		      // 方式2.base64格式
		      symbol: yellowlike,
		      symbolRepeat: 'fixed',
		      symbolMargin: '20%',
		      symbolClip: true,
		      symbolSize: 30,
		      symbolBoundingData: maxData,
		      data: [891, 1220, 660, 1670,688],
		      markLine: {
		        symbol: 'none',
		        label: {
		          formatter: 'max: {c}',
		          position: 'start'
		        },
		        lineStyle: {
		          color: 'green',
		          type: 'dotted',
		          opacity: 0,
		          width: 2
		        },
		        data: [
		          {
		            type: 'max'
		          }
		        ]
		      },
		      z: 10
		    },
		    {
		      // yellow data
		      type: 'pictorialBar',
		      stack: 'total',
		      // 方式1.import图片
		      // symbol: "image://" + this.greenlike,
		      // 方式2.base64格式
		      symbol: greenlike,
		      symbolRepeat: 'fixed',
		      symbolMargin: '20%',
		      symbolClip: true,
		      symbolSize: 30,
		      symbolBoundingData: maxData,
		      data: [891, 122, 66, 160,765],
		      markLine: {
		        symbol: 'none',
		        label: {
		          formatter: 'max: {c}',
		          position: 'start'
		        },
		        lineStyle: {
		          color: 'green',
		          type: 'dotted',
		          opacity: 0,
		          width: 2
		        },
		        data: [
		          {
		            type: 'max'
		          }
		        ]
		      },
		      z: 10
		    },
		  ]
		};
        mychart.setOption(option);
      },
	}
	
}
</script>

注意事项：需将网络图片转换为base64格式，转换地址为：图片base64转换
如果不想对图片进行base64转换则import pic from './pic.png’图片，之后data = “image://” + this.pic也可以。
思路参考：官网柱状堆叠图柱状堆叠图以及精灵图精灵图标