Echarts在线免费图表

 
            let menNum = 650; //男性
let womenNum = 350; //女性
let xbRate = [65, 35]; // 占比

/* 函数 */
// 数字分割：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',
      axisPointer: {
         type: 'none'
      },
      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]
         }else if (point[0] > size.contentSize[0]) {
            x = point[0] - size.contentSize[0]
         }else {
            y = "30%"
         }
         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 => {
         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;">${params.name}</span>
            </div>
            <div style="margin:12px 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 500;color: #FFFFFF;">${formatNum(params.value)}人<span style="margin-left:24px;">${xbRate[params.dataIndex]}%</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: '性别分布',
      type: "pie",
      radius: ['55%', '90%'],
      startAngle: 180,
      center: ['50%', '70%'],
      roseType: "radius",
      labelLine: {
         show: false
      },
      label: {
         show: false
      },
      data: [{
         value: menNum,
         name: "男",
         itemStyle: {
            color: "#73A0FB"
         }
      }, {
         value: womenNum,
         name: "女",
         itemStyle: {
            color: "#FACA42"
         }
      }, {
         value: menNum + womenNum,
         name: "空白占比",
         itemStyle: {
            color: "rgba(255,255,255,1)"
         },
         cursor: "default",
         tooltip:{
            show:false
         }
      }]
   }]
};