echart-gl, 配置项series.bar3D,formatter使用模板字符串不生效?

echart 版本: 5.0.2
echart-gl 版本:2.0.8

 let series = [];

 // ...
 let labelSeries = {
      id: 'labelSeries',
      type: 'bar3D',
       barSize: [0.1, 0.1],
      data: [],
      itemStyle:{
          color:'#000'
      },
      label: {
         show:true,
         distance:10,
         backgroundColor: '#fff',
        // 这里不生效,直接显示字符串
         formatter:function(params){
            return `<span style="color:red">${params.name}</span>`
         },
 },


for (let i = 0; i < series.length; i++) {
     // ...省略一些无关内容

       let labelRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
       labelSeries.data.push({
           name: series[i].name,
           value: [Math.cos(labelRadian), Math.sin(labelRadian), 1.2, series[i].pieData.value],
          itemStyle:{
            opacity:1
         }
       });
   }

 series.push(labelSeries);

然而效果如下:
image.png
有什么办法可以改变bar3D的label 的样式吗?

阅读 3.1k
2 个回答

尽力了,靠这样子勉强度日。

/**
data=[{
                    name: '已响应终端',
                    value: data.covered_terminal,
                    itemStyle: {
                        color:'#41ce7e'
                    }
                }, {
                    name: '未响应终端',
                    value: data.uncovered_terminal,
                    itemStyle: {
                        color:'#acacac'
                    }
                }
            ]
**/  


 let labelSeries = {
      id: 'labelSeries',
      type: 'bar3D',
      barSize: [0.1, 0.1],
      data: [],
      bevelSize:0.5,
      distance:1,
      itemStyle: {
         opacity:1,
         // + 自定义颜色
         color: params=>params.data.color
      },
      label: {
         show: true,
        // + 格式化
         formatter: (params) =>{
            return  `\n  ${params.name}: ${params.value[3]} ${sumValue !== 0 ? '(' + ((params.value[3] / sumValue) * 100).toFixed(2) + '%)' : ''}  \n`
            // return  `\n  ${params.value[3]}  \n`
         },
         backgroundColor:'#fff',
         textStyle: { 
            fontSize: 13,
            fontWeight: 'bold'
        }
      },
   };

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题