Echarts在线免费图表

 
            //展示数据
const optionData = [];
//扇形图颜色数据
const colorList = [
   {color1:'#c5223b',color2:'#fa768a'},
   {color1:'#de7110',color2:'#fecd70'},
   {color1:'#d09f08',color2:'#FFD145'},
   {color1:'#238483',color2:'#55C27C'},
   {color1:'#45EAFF',color2:'#40ADAC'},
   {color1:'#12B3F8',color2:'#7DE8FF'},
   {color1:'#0176D3',color2:'#13B7FF'},
   {color1:'#015BD3',color2:'#138DFF'},
   {color1:'#7c94e7',color2:'#1e2783'},
];
//请求的数据
const resultData = [
   {
      name:'文书卷/件',
      value:95,
   },
   {
      name:'专业',
      value:98,
   },
   {
      name:'科技',
      value:90,
   },
   {
      name:'会计',
      value:100,
   },
   {
      name:'干部（死亡）',
      value:10,
   },
   {
      name:'实物',
      value:100,
   },
   {
      name:'照片',
      value:100,
   },
   {
      name:'录音',
      value:100,
   },
   {
      name:'录像',
      value:100,
   }
];
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: "",
   //你的代码
   legend:[
      {
         orient:'vertical',
         right:'30%',
         top:'26%',
         itemGap:30,
         textStyle:{
            color:'#ffffff',
            fontSize:12,
         },
         data:['文书卷/件','专业','科技','会计','干部（死亡）'],
      },
      {
         orient:'vertical',
         right:'20%',
         top:'26%',
         itemGap:30,
         textStyle:{
            color:'#ffffff',
            fontSize:12,
         },
         data:['实物','照片','录音','录像'],
      }
   ],
   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,
      }
   ]
};