Circular Showcast

by kelvinau

HTML

<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
  <div id="main" style="width: 600px;height:600px;"></div>
  <div id="center-text" class="center-text">
    <div id="name">
      Virus - 0
    </div>
    <div id="value">

    </div>
  </div>
</body>

CSS

.center-text {
  position: absolute;
  top: 250px;
  left: 250px;
  font-size: 2em;
}

#icon img {
  width: 50px;
}

#value {
  text-align: center;
}

JavaScript

var ICONS = [
  'https://cdn3.iconfinder.com/data/icons/medcare/512/Virus-512.png',
  'https://image.flaticon.com/icons/png/512/5/5171.png',
  'https://cdn1.iconfinder.com/data/icons/medicine-1/512/biohazard-512.png',
  'https://cdn3.iconfinder.com/data/icons/online-marketing-vol-3/72/146-512.png',
  'https://orig00.deviantart.net/6876/f/2009/050/7/6/vista_inspired_error_icon_by_lethal_virus.gif',
  'http://al-taiclub.com/images/virus-spider-clipart-12.png',
  'http://cdn.onlinewebfonts.com/svg/img_493329.png',
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrz9D9v-SwECSO8pyCVuOnFVThhQSzse7EksDmDZ-IdYSfphQVnA',
  'https://cdn.iconscout.com/public/images/icon/premium/png-512/virus-scan-data-computer-hardware-technology-information-3f92aa7fd6ead302-512x512.png',
  'https://image.flaticon.com/icons/png/512/176/176492.png',
];
var COUNTS = [
  96406,
  69059,
  39556,
  79906,
  60003,
  50000,
  60794,
  69439,
  89049,
  70496,
];
// ADD symbol size based on count
var COLORS = ['#d4fbff', '#faffa5', '#fdc800', '#f86d00', '#fe0200'];
var myChart = echarts.init(document.getElementById('main'));

function createNodes(count) {
  var nodes = [];
  for (var i = 0; i < count; i++) {
    nodes.push({
      name: 'Virus-' + i,
      id: i,
      symbolSize: !i ? 150 : COUNTS[i] / 1000,
      count: COUNTS[i],
      itemStyle: {
        color: COLORS[i % COLORS.length]
      },
      label: {
        normal: {
          show: true,
          formatter: '{icon|}',
          rich: {
            icon: {
              width: 20,
              height: 20,
              backgroundColor: {
                image: ICONS[i]
              }
            }
          }
        },

      }
    });
  }
  return nodes;
}

function createEdges(count) {
  var edges = [];
  if (count === 2) {
    return [
      [0, 1]
    ];
  }
  for (var i = 0; i < count; i++) {
    edges.push([i, (i + 1) % count]);
  }
  return edges;
}

var datas = [];

datas.push({
  nodes: createNodes(10),
 ...