[JavaScript知识库]ECharts 条形图上方标题、侧方图片

问题：在ECharts 条形图中名称显示在条形图上方，尾部显示数量，头部显示图片
思路：做成一个双条形图，另一个条形图所有值设为0，将尾部显示的数据替换为另一个条形图需要显示的文本或图片
效果图：

话不多说，直接上代码：
先上全部代码，复制粘贴直接可以用：

let i = 4;
let name = ["公司类型一", "公司类型二", "公司类型三", "公司类型四",];
let option = {
		yAxis: [{
		     type: "category",
		     color: "#59588D",
		     data: [1, 2, 3, 4],
		     axisLabel: {
		         show: true,
		         margin: 10,
		         color: "#fff",
		         textStyle: {
		             fontSize: 12
		         },
		         formatter: _ => {
		             return '{i| }'
		         },
		         rich: {
		             i:{
		                 height: 30,
		                 width: 30,
		                 backgroundColor: {
		                     image: require('../img/pg.png')
		                 }
					}
				}
		     },
		     axisLine: {
		         show: false,
		     },
		     axisTick: {
		         show: false
		     },
		     splitLine: {
		         show: false
		     }
		 }],
		 xAxis: [{
		     axisLabel: {
		         color: "#fff",
		         show: false,
		         textStyle: {
		             fontSize: 12
		         }
		     },
		     axisLine: {
		         show: false,
		     },
		     axisTick: {
		         show: false
		     },
		     splitLine: {
		         show: false
		     }
		 }],
		 series: [{
		     type: "bar",
		     barWidth: 0,
		     barGap: 10,
		     data: [0, 0, 0, 0],
		     label: {
		         show: true,
		         position: [0, -15],
		         textStyle: {
		             color: "#fff"
		         },
		         formatter: _ => {
		             i--;
		             return name[i];
		         }
		     },
		 },
		     {
		         type: "bar",
		         data: [1, 2, 3, 4],
		         label: {
		             show: true,
		             position: 'right',
		             textStyle: {
		                 color: "#fff"
		             }
		         },
		         barGap: 10,
		         itemStyle: {
		             normal: {
		                 color: "#38A0FF",
		                 barBorderRadius: [30, 30, 30, 30],
		             }
		         }
		     }]
		}

• 这一段代码是将条形图左侧标题设为图片

formatter: _ => { return '{i| }'},
     rich: {
           i:{
               height: 30,
               width: 30,
               backgroundColor: {
                   image: require('../img/pg.png')
               }
			}
		}

• 作为工具的另一个条形图，所有值都设为零，这样他就没有长度，然后将他的label显示在后方，以为没有数据所以它显示在起始位置，当然位置要微调一下

let i = 4;
let name = ["公司类型一", "公司类型二", "公司类型三", "公司类型四",];

{
   type: "bar",
   barWidth: 0,
   barGap: 10,
   data: [0, 0, 0, 0],
   label: {
       show: true,
       position: [0, -15],
       textStyle: {
           color: "#fff"
       },
       formatter: _ => {
           i--;
           return name[i];
       }
   },
}

注意：
① 一定要设置barGap属性，不然会导致两个条形图的间距拉的太远，看起来有点异常
②这个办法会在legend，tooltip中出现另一个数据都为0的工具条形图，所以这两个属性要么不用，要么就自己formatter处理一下

以上就是我所遇到的问题及解决办法，不喜勿喷，谢谢