/* 数据 */ let nameList = ["岗位1", "岗位", "岗位3", "岗位4"]; let valueList = [50, 40, 30, 20]; /* 整合 */ let colorList = ["#73A0FB", "#73DEB4", "#FACA42", "#F98973", "#2F467A"]; let data = []; nameList.map((item,index) => { data.push({ name:item, value:valueList[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 = { color: colorList, 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 { x = "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 `

${params.name}

${formatNum(params.value)}人${[params.percent]}%

` }, 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: [{ type: 'pie', roseType: true, radius: ["20%", "70%"], label: { show: false, }, data: data }] };

Echarts在线免费图表