echarts柱状图如何将在y轴定位图片？

Question

如何将这个小皇冠放到如图所示的位置

Answer 1

在Echarts柱状图中，可以借助 yAxis 中的 axisLabel formatter 函数来自定义坐标轴刻度标签的内容。你可以利用这个函数返回一个带有图片的 div 字符串，来实现在 y 轴上定位图片。

以下是一个示例代码：

option = {
  // ... 其他配置 ...
  yAxis: {
    type: 'value',
    // 自定义 y 轴上的标签
    axisLabel: {
      formatter: function (value, index) {
        if (index === 0) {
          // 第一个刻度标签，设置为你想要的图片
          return "<div style='background-image:url(https://echarts.apache.org/examples/data/thumb/ECharts_Bar_Overlap.gif);width:100%;height:50px;background-size:100% 100%;background-repeat:no-repeat;'></div>";
        } else {
          // 其他刻度标签，返回数值
          return value;
        }
      }
    }
  },
  // ... 其他配置 ...
};

以上代码中的 axisLabel formatter 函数，可以根据你实际需要进行修改，比如可以用一个 switch...case 语句来判断不同的 index，并返回不同的图片。

需要注意的是，以上方法只是一种折中的解决方案，Echarts 并没有官方地支持在坐标轴上直接放置图片的功能。