echarts的雷达图(radar)鼠标移动到图标上面,如何给数据加单位

我们只需要在雷达图的data中,找到emphasis,这个是控制鼠标悬浮时高亮显示展示的雷达图中的具体数据的样式

在label项中,我们配置formatter为:

formatter: '{c}(单位)'

这样就可以展示出数据的单位了,比如我想要我的数据单位是“%”,那么我的formatter需要这样写formatter: '{c}%'

完整的代码:

series: [
        // 合同量:
        {
          type: 'radar',        // 雷达图
          data: [
            {
              name: '合同量',
              value: this.quantityList,

              // 鼠标悬浮时高亮显示,同时展示雷达图的数据样式

              emphasis: {       
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 32,
                  formatter: '{c}%',       // 鼠标悬浮时展示数据加上单位
                  backgroundColor: '#0D1B42',
                  borderRadius: 5,
                  padding: 3,
                  shadowBlur: 3
                }
              }
            }
          ],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(         // 设置渐变色
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgba(0, 230, 98, 1)' },
                { offset: 1, color: 'rgba(0, 155, 171, 1)' }
              ]
            )
          },
          areaStyle:                                          // 雷达图辐射区域的样式
          {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgba(0, 230, 98, 1)' },
                { offset: 1, color: 'rgba(0, 155, 171, 1)' }
              ]
            )
          },
        }
      ]

看一个大概的效果图,这边后端没有处理接口为百分比,大家重点看下标签的单位展示效果就好。 

猜你喜欢

转载自blog.csdn.net/qq_36451496/article/details/104003946