Echarts在线免费图表

 
            //请求的数据
const resultData = [
   {
      dept:'研发部',
      age:'21-30',
      num:'10'
   },
   {
      dept:'研发部',
      age:'31-40',
      num:'5'
   },
   {
      dept:'研发部',
      age:'41-50',
      num:'1'
   },
   {
      dept:'研发部',
      age:'51-60',
      num:'0'
   },
   {
      dept:'质检部',
      age:'21-30',
      num:'15'
   },
   {
      dept:'质检部',
      age:'31-40',
      num:'2'
   },
   {
      dept:'质检部',
      age:'41-50',
      num:'1'
   },
   {
      dept:'质检部',
      age:'51-60',
      num:'1'
   },
   {
      dept:'市场部',
      age:'21-30',
      num:'20'
   },
   {
      dept:'市场部',
      age:'31-40',
      num:'10'
   },
   {
      dept:'市场部',
      age:'41-50',
      num:'11'
   },
   {
      dept:'市场部',
      age:'51-60',
      num:'1'
   },
   {
      dept:'财务部',
      age:'21-30',
      num:'3'
   },
   {
      dept:'财务部',
      age:'31-40',
      num:'5'
   },
   {
      dept:'财务部',
      age:'41-50',
      num:'1'
   },
   {
      dept:'财务部',
      age:'51-60',
      num:'0'
   }
];
option = {
   backgroundColor: "#001829",
   //你的代码
   dataset:{
      dimensions:['dept','age'],
      source:resultData
   },
   xAxis:[
      {
         type:'category',
         axisTick:{
            show:false
         },
         axisLine:{
            show:true,
            lineStyle:{
               color:'#004B97',
               width:1,
               type:'solid',
            }
         },
         splitLine:{
            show:true,
            lineStyle:{
               color:'#004B97',
               type:'solid',
            }
         },
         axisLabel:{
            color:'#fff',
            fontSize:13,
         }
      }
   ],
   yAxis:[{
      type:'category',
      nameTextStyle:{
         color:'#fff',
      },
      axisTick:{
         show:false,
      },
      axisLine:{
         show:true,
         lineStyle:{
            color:'#004B97',
            width:1,
            type:'solid',
         }
      },
      splitLine:{
         show:true,
         lineStyle:{
            color:'#004B97',
            width:1,
            type:'solid',
         }
      },
      axisLabel:{
         interval:0,
         color:'#fff'
      },
   }],
   series:[
      {
         type:'scatter',
         symbolSize(data){
            let result = parseInt(data.num)*5;
            if(result >0 && result < 25){
               result = 25;
            }
            if(result > 70){
               result = 50;
            }
            return result;
         },
         label:{
            show:true,
            position:'inside',
            color:'#fff',
            formatter(param){
               let result = '';
               if(param.value.num !== '0'){
                  result = `${param.value.num}人`;
               }
               return result;
            }
         },
         itemStyle:{
            color(param){
               let color = '';
               const num = parseInt(param.value.num);
               if(num <=10){
                  color = '#534bdc';
               }else if(num >10 && num <=20){
                  color = '#6ed2c5';
               }else{
                  color = '#4098cf';
               }
               return color;
            }
         }
      }
   ]
};