效果

散点图.png

代码

  1. const data = [{
  2.   "catalogName": "测试一",
  3.   "total": 17,
  4.   "ratio": 34.00
  5. }, {
  6.   "catalogName": "测试一测试",
  7.   "total": 16,
  8.   "ratio": 32.00
  9. }, {
  10.   "catalogName": "测试二",
  11.   "total": 8,
  12.   "ratio": 16.00
  13. }, {
  14.   "catalogName": "测试三",
  15.   "total": 4,
  16.   "ratio": 8.00
  17. }, {
  18.   "catalogName": "测试四",
  19.   "total": 3,
  20.   "ratio": 6.00
  21. }, {
  22.   "catalogName": "测试无",
  23.   "total": 2,
  24.   "ratio": 4.00
  25. }]
  26. const colors = ['#4983F5', '#3D993D', '#525CCC', '#3344FF', '#39ACE5', '#008099', '#2985CC']
  27. const seriesData = data.map((item, index) => {
  28.   return {
  29.     "name": item.catalogName,
  30.     "value": item.total,
  31.     "ratio": item.ratio,
  32.     "symbolSize": item.ratio * 2 + 60,
  33.     "draggable": true,
  34.     itemStyle: {
  35.       normal: {
  36.         color: {
  37.           type: 'linear',
  38.           colorStops: [{
  39.             offset: 0,
  40.             color: colors[index % colors.length],
  41.           }, ],
  42.           global: true,
  43.         },
  44.       },
  45.     },
  46.   }
  47. });
  49. const option = {
  50.   tooltip: {
  51.     formatter: (params) => `${params.marker}${params.data.name}：${params.data.value} ${params.data.ratio}%`,
  52.   },
  53.   series: [{
  54.     type: 'graph',
  55.     layout: 'force',
  56.     force: {
  57.       repulsion: [80, 240],
  58.     },
  59.     roam: true,
  60.     label: {
  61.       normal: {
  62.         show: true,
  63.         color: '#FFFFFF',
  64.         fontWeight: 'bolder',
  65.       }
  66.     },
  67.     data: seriesData
  68.   }]
  69. }