Echarts 南丁格尔图

Echarts 南丁格尔图

var data = [
  { value: 10, name: 'rose1' },
  { value: 5, name: 'rose2' },
  { value: 15, name: 'rose3' },
  { value: 25, name: 'rose4' },
  { value: 20, name: 'rose5' },
  { value: 35, name: 'rose6' },
  { value: 30, name: 'rose7' },
  { value: 40, name: 'rose8' },
].sort((a, b) => {
  return a.value - b.value;
});

option = {
  title: {
    text: '南丁格尔玫瑰图',
    subtext: '二级标题',
    x: 'left',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} :<br/> {c} ({d}%)',
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
    extraCssText: 'box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.20); padding: 10px 14px;border-radius: 4px;',
    textStyle: {
      color: '#3c3c3c',
    },
  },
  legend: {
    x: 'center',
    y: 'bottom',
    data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8'],
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: {
        show: true,
        type: ['pie', 'funnel'],
      },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
  calculable: true,
  series: [
    {
      name: '半径模式',
      type: 'pie',
      radius: [20, 110],
      center: ['50%', '50%'],
      // 是否展示成南丁格尔图
      roseType: 'radius',
      // 是否启用防止标签重叠策略
      avoidLabelOverlap: true,
      label: {
        fontSize: 12,
        normal: {
          show: true,
        },
        emphasis: {
          show: true,
        },
      },
      lableLine: {
        normal: {
          show: false,
        },
        emphasis: {
          show: true,
        },
      },
      data: data,
    },
  ],
};