Echarts在线免费图表

 
            /* 数据 */
let nameList = ["中国", "美国", "英国", "法国", "俄罗斯", "新加坡", "泰国", "菲律宾", "印度尼西亚", "韩国", "日本"];
let valueList = [1000, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10];

/* 整合 */
let maxNum = Math.max(valueList); // 最大值
// 样式
let maxColor = "#73A0FB"; // 最大值颜色
let maxFontSize = 20; // 最大值字号
let colorList = ['#73DEB4', '#F9CA41', '#2F467A', '#F98973', '#F98973']; // 颜色系列
let fontSizeList = [16, 14, 12, 10]; // 字号系列
let data = [];
// 添加数据
data.push({
   name: nameList[0],
   value: valueList[0],
   label: {
      color: maxColor,
      fontSize: maxFontSize
   },
})
// 数组四等分
let currentIndex = 0;
for (let i = 1; i < nameList.length; i += Math.floor(nameList.length / 4)) {
   for (let j = i; j < i + Math.floor(nameList.length / 4); j++) {
      data.push({
         name: nameList[j],
         value: valueList[j],
         label: {
            color: colorList[currentIndex],
            fontSize: fontSizeList[currentIndex]
         }
      })
   }
   currentIndex++;
}

/* 函数 */
// 数字分割：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.data.label["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)}人</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: [
      {
         type: 'graph',
         layout: 'force',
         force: {
            repulsion: 50, // 斥力
            gravity: 0.05,
            edgeLength: [10, 80],
            layoutAnimation: false, // 不展示牵引动画
         },
         roam: false,
         symbol: '',
         symbolSize: 0,
         label: {
            show: true,
            color: 'auto',
         },
         draggable: false,
         itemStyle: {
            color: "rgba(225,225,225,0)"
         },
         data: data
      }
   ]
}