Echarts Pie RoseType #南丁格爾玫瑰圖 #玫瑰圖極小值問題

有這樣一組數據：

pie: {
    dataSource: [
        { 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),
},

如果直接將這組數據用於展示：

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 需要重新設定。 因爲渲染值和實際值不同。

以下是完整的組件代碼：

<template>
  <div />
</template>

<script>
// import resize from "@/views/dashboard/mixins/resize";

export default {
  // mixins: [resize],
  props: {
    dataSource: {
      // 不直接傳入軸數據 和 系列數據的原因是因爲tooltip 需要展示額外的數據字段，ringRatio
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chart: null,
    }
  },
  computed: {
    pieData: function () {
      return this.dataSource
    },
  },
  watch: {
    // 監聽數據變化，觸發圖表繪製刷新
    pieData: {
      handler(val) {
        this.drawChart()
      },
    },
  },
  mounted() {
    this.chart = this.$echarts.init(this.$el, 'macarons')
    this.drawChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    drawChart() {
      let _this = this
      this.chart.setOption({
        color: ['#f2f2f2', '#2772FB'],
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(255, 255, 255, 0.7)',
          formatter: (p) => {
            let target = this.dataSource.find((it) => it.name === p.name)
            let temp = 0
            this.dataSource.forEach((it) => {
              temp += it.value
            })
            let sum = temp
            let realVal = target.value
            let realPercent = (realVal / sum).toFixed(5)
            return target.name + ' ' + realVal + '￥\n (' + realPercent + '%)'
          },
        },
        title: {
          show: false,
          text: 'Income\nDistribution',
          // textAlign: 'center',
          // textVerticalAlign: 'middle',
          top: '43%',
          left: 'center',
          textStyle: {
            color: '#3C3B39',
            fontWeight: 'normal',
            fontFamily: '蘋方-簡',
            fontSize: 22,
          },
        },
        legend: {
          data: _this.pieData.map((it) => it.name),
          type: 'plain', // 普通圖例
          orient: 'horizontal', // 水平
          right: 0, // 左距離
          top: 0, // 下距離
          // itemGap: 20, // 間隔
          itemWidth: 22, // 圖形寬度。
          itemHeight: 4, // 圖形高度。
          itemStyle: {
            // color:''
          },
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            avoidLabelOverlap: true,
            radius: ['0%', '70%'],
            center: ['50%', '50%'],
            roseType: true,
            // minAngle: 5,
            label: {
              show: true,
              // bleedMargin: 0, // 放置文字被摺疊
              // alignTo: 'labelLine',
              formatter: (p) => {
                let target = this.dataSource.find((it) => it.name === p.name)
                let temp = 0
                this.dataSource.forEach((it) => {
                  temp += it.value
                })
                let sum = temp
                let realVal = target.value
                let realPercent = (realVal / sum).toFixed(5)
                return realVal + '￥\n (' + realPercent + '%)'
              },
              // formatter: ['{bs|{b}} {ds|{d}%}', '{cs|{c}(￥)}'].join('\n'),
              // rich: {
              //   bs: {
              //     color: '#000',
              //     fontSize: 14,
              //   },
              //   ds: {
              //     color: '#000',
              //     fontSize: 14,
              //   },
              //   cs: {
              //     color: '#000',
              //     fontSize: 12,
              //     align: 'center',
              //   },
              // },
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: '#f5f5f5',
              borderWidth: 2,
              label: {
                // position: 'inside',
                fontSize: '16',
                align: 'center',
                // fontWeight: 'bolder',
                fontFamily: '蘋方-簡',
                overflow: 'breakAll',
              },
              labelLine: {
                show: true,
              },
            },

            data: _this.pieData.map((it) => {
              // 這裏爲了放大數據的差距，在roseType:true時，讓小值能夠較好的展示出來，如果roseType爲false。 直接賦值_this.pieData，需要注意的時候，label和 tooltip的展示值需要調整
              return {
                name: it.name,
                value: Math.pow(it.value, 0.099), // 值越大，數據差越小 最大值爲0.5
              }
            }),
          },
        ],
      })
      _this.resize() //首次繪製 resize
    },
    resize() {
      this.chart.resize({
        width: 'auto', //自動獲取dom寬度
        height: (() => {
          return 'auto'
        })(),
      })
    },
  },
}
</script>

數據值爲：

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