Echarts Pie RoseType #南丁格尔玫瑰图 #玫瑰图极小值问题

有这样一组数据：

{
  "pie": {
    "dataSource": [
      { "name": "一组", "value": 742867 },
      { "name": "二组", "value": 655551 },
      { "name": "三组", "value": 85551 },
      { "name": "四组", "value": 200 },
      { "name": "五组", "value": 652 },
      { "name": "六组", "value": 96 }
    ]
  }
}

如果直接将这组数据用于展示：

roseType: true

可以看到，极小值数据，几乎看不到。

为了解决这种情况， 我们可以利用数学中的 幂函数 来解决：

y=x^0.5

y=x^0.8

该函数曲线的特点，即较小值对应的Y值，和大值对应的Y值，差距不大。 x值越大，y值变化越平缓。

所以，我们可以将数据做一下处理：

let a =   [
  { name: '一组', value: 742867 },
  { name: '二组', value: 655551 },
  { name: '三组', value: 85551 },
  { name: '四组', value: 200 },
  { name: '五组', value: 652 },
  { name: '六组', value: 96 },
].sort((a, b) => b.value - a.value)

let b = a.map((it) => {
  return {
    name: it.name,
    value: Math.pow(it.value, 0.099), // 值越大，数据差越小 最大值为0.5
  }
})

我们可以得到这样的数据：

[
  { "name": "一组", "value": 3.8125908000644397 },
  { "name": "二组", "value": 3.765685464082815 },
  { "name": "三组", "value": 3.0781535758618612 },
  { "name": "五组", "value": 1.8993741014853285 },
  { "name": "四组", "value": 1.6896702968622095 },
  { "name": "六组", "value": 1.5712484130901458 }
]

这样，我们就能放大极小值的占比，缩小极大值的占比。 需要注意的是tooltip 和 label 的formatter 需要重新设定。 因为渲染值和实际值不同。

以下是完整的组件代码：

数据值为：

[ { name: '一组', value: 3.8125908000644397 },
{ name: '二组', value: 3.765685464082815 },
{ name: '三组', value: 3.0781535758618612 },
{ name: '五组', value: 1.8993741014853285 },
{ name: '四组', value: 1.6896702968622095 },
{ name: '六组', value: 1.5712484130901458 } ]