echarts在data里定义的formatter函数失效问题

最新推荐文章于 2024-09-17 07:23:55 发布

魏知非

最新推荐文章于 2024-09-17 07:23:55 发布

阅读量1w

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_40302929/article/details/119384903

版权

工具专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在echarts官方运行的时候是生效的，拿到项目里循环之后就失效了

后来井排查发现，是因为循环的时候使用了JSON.stringify(this.eqpOption)函数，导致 echarts的option里默认itemStyle的方法都为空了

所以要重新赋值一下，即使在 this.eqpOption 里声明了也不会生效，赋值后才会生效。

eqpOption: {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return params.name + ': ' + params.data.statusRunTimeStr + '(' + params.percent + '%)'
          }
        },
        series: [
          {
            type: 'pie',
            radius: [40, '68%'], //饼图半径大小
            avoidLabelOverlap: true,
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                length: 5
              },
              show: true
            },
            itemStyle: {
              normal: { //饼图上的文字显示
                label: {
                  // formatter: '{b} {c}分',
                  formatter: function(params) {
                    return params.name + ' ' + params.data.statusRunTimeStr
                  }
                }
              }
            },
            data: []
          }
        ]
      },

打印数据截图：

未经过JSON格式化之前的 this.eqpOption

经过JSON格式化之后的 this.eqpOption

所以要赋值的时候给formatter重新构建一下就可以了。

item.eqpOption.series[0].itemStyle = {
          normal: { 
            label: {
              formatter: function(params) {
                return params.name + ' ' + params.data.statusRunTimeStr
              }
            }
          }
        }