echarts 叠加柱状图柱顶显示百分比

最新推荐文章于 2024-07-29 14:40:31 发布

曾经沧海海

最新推荐文章于 2024-07-29 14:40:31 发布

阅读量2.3k

点赞数 2

分类专栏： vue 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/m0_37684037/article/details/112197549

版权

本文介绍了在Echarts中实现柱状图柱顶显示百分比的解决方案，包括遇到的坑，如formatter函数只能在setOption中使用，以及如何通过设置白色柱子并利用formatter展示百分比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

采坑：

formatter不起作用：使用 formatter: function (params) 只能直接setOption，不能使用this.option
柱顶的百分比其实是一个另一截的柱，只是颜色为白色，值小于1；然后使用 formatter: function展示为百分比

    renderChart () {
      // 线上问题总量柱状图，按产研部门统计（如教学、服务运营）
      var chart1Line = echarts.init(document.getElementById('chart1'))
      if (this.caughtStatus === '1') {
        // var optionChart2 = this.echarts.init(document.getElementById('allData'))
        if (this.departments.restData.length !== 0) {
          chart1Line.setOption({
            grid: {
              bottom: '25%'
            },
            title: {
              text: '线上问题拦截率（' + this.departments.caught + '%）',