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,差不多的。

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐