echarts南丁格尔图设置最小半径

 放大数据再还原之前的值----->最大值的0.5倍

 

 const other = [

      { name: 'rose1', value: 0, color: '#5573e1' },

      { name: 'rose2', value: 20, color: '#7fd160' },

    ];

 

export const otherPie = {

  option: {

    grid: {

      top: '8%',

      left: '2%',

      right: '2%',

      bottom: '3%',

      containLabel: true,

    },

    legend: {

      show: false,

    },

    tooltip: {

      trigger: 'item',

      // formatter: '{b}:
{c}（{d}%）',

    },

    series: [

      {

        type: 'pie',

        roseType: 'area',

        radius: ['15rem', '70rem'],

        center: ['50%', '55%'],

        avoidLabelOverlap: false,

        startAngle: -90, //起始角度

        label: {

          show: true,

          overflow: 'none',

          width: 50,

          align: 'left',

          // margin: '50%',

          fontSize: '16px',

          margin: 0,

          color: '#fff',

          // color: 'auto',

          rich: {

            a: {

              fontSize: '13px',

              padding: [

                0, // 上

                0, // 右

                5, // 下

                0, // 左

              ],

            },

            b: {

              fontSize: '16px',

            },

          },

        },

        labelLine: {

          normal: {

            show: false,

            length2: 20, //第一条线

            length: 10, //第二条线

            lineStyle: {

              width: 1, // 线条的宽度

              // color: '#000', //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色

            },

          },

        },

        data: [],

      },

    ],

  },

};

import { otherPie} from './config';

[otherData, setOtherData] = useState(otherPie);

为零时显示

    //饼图值放大
    let pieData = other;
    let showData = [];
    let sum = 0,
      max = 0;
    pieData.forEach((item) => {
      sum += item.value;
      if (item.value >= max) max = item.value;
    });
    // 放大规则
    let number = Math.round(max * 0.5);
 
    showData = pieData.map((item) => {
      return {
        // value: item.value !== 0 ? number + item.value : item.value,
        value: number + item.value,
        name: item.name,
        itemStyle: item.itemStyle,
      };
    });
    const otherResult = _.cloneDeep(otherData);
    otherResult.option.series[0].data = showData;
 
    otherResult.option.tooltip.formatter = (param) => {
      /*  let text = '';
      if (param.value === 0) {
        text = param.name + '
' + param.value;
      } else {
        text = param.name + '
' + (param.value - number);
      } */
      let text = param.name + '
' + (param.value - number);
      return text;
    };
    otherResult.option.series[0].label.formatter = (v) => {
      /* let text = '';
      if (v.data.value === 0) {
        text = '{a|' + v.data.name + '}' + '\n' + '{b|' + v.data.value + '}';
      } else {
        text = '{a|' + v.data.name + '}' + '\n' + '{b|' + (v.data.value - number) + '}';
      } */
      let text = '{a|' + v.data.name + '}' + '\n' + '{b|' + (v.data.value - number) + '}';
      return text;
    };
setOtherData({ ...otherResult });

 

 

为零时不显示 

  //饼图值放大
    let pieData = other;
    let showData = [];
    let sum = 0,
      max = 0;
    pieData.forEach((item) => {
      sum += item.value;
      if (item.value >= max) max = item.value;
    });
    // 放大规则
    let number = Math.round(max * 0.5);
 
    showData = pieData.map((item) => {
      return {
        value: item.value !== 0 ? number + item.value : item.value,
        name: item.name,
        itemStyle: item.itemStyle,
      };
    });
    const otherResult = _.cloneDeep(otherData);
    otherResult.option.series[0].data = showData;
 
    otherResult.option.tooltip.formatter = (param) => {
      let text = '';
      if (param.value === 0) {
        text = param.name + '
' + param.value;
      } else {
        text = param.name + '
' + (param.value - number);
      }
      return text;
    };
    otherResult.option.series[0].label.formatter = (v) => {
      let text = '';
      if (v.data.value === 0) {
        text = '{a|' + v.data.name + '}' + '\n' + '{b|' + v.data.value + '}';
      } else {
        text = '{a|' + v.data.name + '}' + '\n' + '{b|' + (v.data.value - number) + '}';
      }
      return text;
    };
    setOtherData({ ...otherResult });