echarts横向柱状图数值显示在最右侧的解决方案

echarts本身好像没有直接实现这个样式的配置项，所以可以自己写个方法实现：

//计算柱状图数值应该显示的位置
calculationLocation(chart) {
   setTimeout(() => {
      //整个图表的宽度
      let chartWidth = chart.getWidth();
      //计算完毕的配置项
      let option = chart.getOption();
      //grid
      let grid = option.grid[0];
      //grid的left、right
      let gLeft = grid.left;
      let gRight = grid.right;
      //计算left和right的距离
      gLeft = (chartWidth * parseFloat(gLeft)) / 100;
      gRight = (chartWidth * parseFloat(gRight)) / 100;
      //label横向偏移的距离
      let x = chartWidth - gLeft - gRight;
      //更新lable的配置之后init配置项，然后重渲染图表
      this.label = { ...this.label, offset: [x - 37, 0] };
      this.initOption();
      chart.setOption({ series: this.options.series });
   });
},复制

因为是vue框架，option配置项是用initOption方法提出来写的。

图表series包含多个系列的柱状图，label配置项都是重复的，所以也提出来写了。

label配置项更新后重新调一下initOption方法，重设配置项，然后setOption重渲染series。

偏移的位置x根据自己的图表去修改，不固定。

最重要的一点：要把label配置项中的position配置为：'left'，这时候数值会显示在y轴左侧，这时候上面的方法里的位置计算才准确。

label: {
    show: true,
    color: "#02b0d9",
    fontSize: 8,
    fontWeight:'bold',
    position: "left",
    height: 100,
    offset: [0, 0],
},复制

以上是横向柱状图的解决方案，如果是竖向柱状图，稍微改一下一些地方就ok，差不多的。

以上，记录一下，有不对的地方欢迎指正