Echarts在线免费图表

 
            let numList = [1002,540]; // 数量
let nameList = ["教学科研岗","非教学科研岗"]; // 类别

const pieData = [];
nameList.map((item,index) => {
   pieData.push({
      name: item,
      value: numList[index]
   })
});

// 数字分割：1653 => 1,653
const formatNum = (value) => {
  if(!value&&value!==0) return 0;
  let str = value.toString();
  let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
  return str.replace(reg,"$1,");
}

option = {
   tooltip: {
      trigger: "item",
      position: function (point, params, dom, rect, size) { // 提示框位置
         let x = 0;
         let y = 0;
         //固定在中间
         if (point[0] + size.contentSize[0] > size.viewSize[0]) {
            x = point[0] - size.contentSize[0]
         } else {
            x = point[0]
         }
         if (point[1] > size.contentSize[1]) {
            y = point[1] - size.contentSize[1]
         } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
            y = point[1]
         } else {
            y = "30%"
         }
         return [x, y];
      },
      formatter: params => {
         console.log(params)
         let pieColor = params.color;

         return `
            <div style="position:relative;">
               <div style="width: 9px;height: 9px;background: ${pieColor};border: 1px solid #FFFFFF;position:absolute;top:50%;transform:translateY(-50%);left:0;border-radius:50%;"></div>
               <span style="margin:0 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 400;color: #FFFFFF;">在岗在编</span>
            </div>
            <div style="margin:12px 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 500;color: #FFFFFF;">${params.name}<span style="margin-left:24px;">${formatNum(params.value)}</span></div>
         `
      },
      extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
   },
   series: [{
      name: 'pie',
      type: 'pie',
      center: ['50%', '50%'],
      radius: '50%',
      color: ["#73A0FB", "#73DEB4"],
      label: {
         show: false
      },
      itemStyle: {
         borderColor: "#fff",
         borderWidth: 2
      },
      data: pieData
   }]
};