Echarts在线免费图表

 
            //展示数据
const optionData = [];
//扇形图颜色数据
const colorList = [
   {color1:'rgba(76,167,163,0.9)',color2:'rgba(90,255,223,1)'},
   {color1:'rgba(65,149,99,0.9)',color2:'rgba(115,255,145,1)'},
   {color1:'rgba(98,167,131,0.9)',color2:'rgba(153,255,179,1)'},
   {color1:'rgba(127,177,108,0.9)',color2:'rgba(193,255,138,1)'},
   {color1:'rgba(190,164,75,0.9)',color2:'rgba(255,207,74,1)'},
   {color1:'rgba(165,123,98,0.9)',color2:'rgba(254,178,128,1)'},
   {color1:'rgba(105,123,186,0.9)',color2:'rgba(151,176,255,1)'},
   {color1:'rgba(106,102,173,0.9)',color2:'rgba(164,151,255,1)'},
   {color1:'rgba(106,76,178,0.9)',color2:'rgba(159,110,254,1)'},
   {color1:'rgba(134,109,188,0.9)',color2:'rgba(180,143,241,1)'},
   {color1:'rgba(54,122,194,0.9)',color2:'rgba(76,174,254,1)'},
   {color1:'rgba(97,145,197,0.9)',color2:'rgba(131,199,255,1)'},
];
//请求的数据
const resultData = [
   {
      name:'1月',
      value:95,
   },
   {
      name:'2月',
      value:100,
   },
   {
      name:'3月',
      value:98,
   },
   {
      name:'4月',
      value:90,
   },
   {
      name:'5月',
      value:100,
   },
   {
      name:'6月',
      value:97,
   },
   {
      name:'7月',
      value:100,
   },
   {
      name:'8月',
      value:100,
   },
   {
      name:'9月',
      value:100,
   },
   {
      name:'10月',
      value:100,
   },
   {
      name:'11月',
      value:100,
   },
   {
      name:'12月',
      value:80,
   }
];
let sum = 0;
resultData.forEach(item=>{
   sum += item.value;
})
resultData.forEach(item=>{
   optionData.push({value:item.value,name:item.name});
   optionData.push({name:'',value:sum/100,itemStyle:{color:'transparent'}});
})
option = {
   backgroundColor: "#001829",
   //你的代码
   legend:[
      {
         orient:'vertical',
         right:'22%',
         top:'35%',
         itemGap:30,
         textStyle:{
            color:'#ffffff',
            fontSize:12,
         },
         data:['1月','2月','3月','4月','5月','6月'],
      },
      {
         orient:'vertical',
         right:'3%',
         top:'35%',
         itemGap:30,
         textStyle:{
            color:'#ffffff',
            fontSize:12,
         },
         data:['7月','8月','9月','10月','11月','12月'],
      }
   ],
   tooltip:{
      trigger:'item',
      formatter(params){
         let res = '';
         const {marker,name,value} = params;
         if(name !== ''){
            res += `${marker}${name}:${value}%`
         }
         return res;
      }
   },
   series:[
      {
         type:'pie',
         roseType: 'radius',
         radius:['20%','60%'],
         center:['30%','50%'],
         label:{
            position:'inside',
            formatter(item){
               if(item.name === ''){
                  return '';
               }
               return `${item.value}%`;
            },
            textStyle:{
               fontSize:16,
               color:'#ffffff'
            }
         },
         labelLine:{
            show:false,
         },
         itemStyle:{
            normal:{
               color(params){
                  return colorList[parseInt(params.dataIndex/2)].color1;
               }
            }
         },
         z:3,
         data:optionData,
      },
      {
         type:'pie',
         roseType: 'radius',
         radius:['20%','62%'],
         center:['30%','50%'],
         label:{
            show:false,
         },
         labelLine:{
            show:false,
         },
         itemStyle:{
            normal:{
               color(params){
                  return colorList[parseInt(params.dataIndex/2)].color2;
               }
            }
         },
         z:2,
         data:optionData,
      }
   ]
};