【echarts】双重层叠南丁格尔玫瑰图

效果图如下:

思路：玫瑰图里层叠加普通饼图，颜色使用代码自动生成对应深色的颜色，里层普通饼图数据大小一样（数据大小不一致会导致从小到大排序，不等分且颜色错乱）

颜色获取

浅色、深色的颜色都能够使用该方法获取，本文中用到的是深色（正数为浅色，负数为深色）

function lightenDarkenColor(color, amt) {
    let usePound = false;
    if (color[0] == "#") {
        color = color.slice(1);
        usePound = true;
    }
    let num = parseInt(color,16);
    let r = (num >> 16) + amt;
    if (r > 255) r = 255;
    else if (r < 0) r = 0;

    let b = ((num >> 8) & 0x00FF) + amt;
    if (b > 255) b = 255;
    else if (b < 0) b = 0;

    let g = (num & 0x0000FF) + amt;
    if (g > 255) g = 255;
    else if (g < 0) g = 0;
    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}

饼图数据的处理

原始数据

color:["#3D7FFF","#62F4FF","#44D7B6","#FFB77E","#8277E9"],
      pieData:[
        {name:'Ⅰ类',value:28},
        {name:'Ⅱ类',value:40},
        {name:'Ⅲ类',value:15},
        {name:'Ⅳ类',value:10},
        {name:'Ⅴ类',value:7},
      ],

数据处理（双层饼图数据处理）

 changePieStyle(){
      let echartsData = {}
      let outer = []
      let inner = []
      let data = this.pieData
      for(let i = 0;i <data.length;i++) {
        outer.push(
            {
              value: data[i].value,
              name: data[i].name,
              itemStyle: {
                color: this.color[i]
              }
            }
        )
        inner.push(
            {
              value: 1,
              name: data[i].name,
              itemStyle: {
                color: lightenDarkenColor(this.color[i], -30)+'aa'
              }
            }
        )
      }
      echartsData.outer=outer
      echartsData.inner=inner
      return echartsData
    },

最后实现

 pieInit(){
      let echartsData = this.changePieStyle()
      let pieDom = document.getElementById('pieD')
      if (echarts.getInstanceByDom(pieDom)) {
        echarts.dispose(pieDom);
      }
      let pie = echarts.init(pieDom)
      let option = {
        legend:{show:false},
        series:[
          {
            name:'',
            type:'pie',
            center: ['50%', '55%'],
            radius: ['30%', '85%'],
            roseType: 'area',
            data:echartsData.outer,
            labelLine: {
              length: 10
            },
            label: {
              formatter:'{b}：{d}%',
              color:'rgba(255,255,255,0.8)',
              fontSize:16
            }
          },
          {
            name:'',
            type:'pie',
            // roseType: 'area',
            center: ['50%', '55%'],
            radius: ['15%', '30%'],
            data:echartsData.inner,
            hoverAnimation:false,
            labelLine: {
              show: false
            },
            label: {
              show: false
            },
          }
        ]
      }
      option && pie.setOption(option)

    }