JSFiddle - React, Tailwind, and code Playground

by ma_ss_ai

HTML

<p id="status">Загрузка…</p>
<div id="main"></div>

CSS

body { font: 14px sans-serif; max-width: 560px; margin: 12px auto; }
#main { width: 520px; max-width: 100%; height: 400px; border: 2px solid #333; margin: 0 auto; background: #fff; }
#status { text-align: center; margin: 8px 0; }

JavaScript

(function () {
  var FULL = [
    { name: 'Сектор A', value: 120 },
    { name: 'Сектор B', value: 80 },
    { name: 'Сектор C', value: 60 },
    { name: 'Сектор D', value: 40 },
    { name: 'Сектор E', value: 25 }
  ];

  var WIDTH_LT_600 = true;
  var LEGEND_BOTTOM = true;
  var myChart;
  var dataset = FULL.slice();
  var selectionFromEvent = [];
  var manualSelected = {};

  function getSize(length) {
    var heightContainer = 300;
    if (heightContainer <= 400) return length <= 3 ? 45 : 100;
    return length <= 3 ? 40 : 70;
  }

  function piePosition(dataLength) {
    var grid = { left: '8%', right: '8%' };
    if (!WIDTH_LT_600) return Object.assign({}, grid, { top: 40, bottom: 40 });
    var edge = getSize(dataLength);
    if (LEGEND_BOTTOM) return Object.assign({}, grid, { top: 10, bottom: edge });
    return Object.assign({}, grid, { bottom: 10, top: edge });
  }

  function makeOption(data) {
    var pos = piePosition(data.length);
    return {
      color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
      tooltip: { trigger: 'item' },
      legend: {
        type: 'scroll',
        bottom: 0,
        data: data.map(function (d) { return d.name; })
      },
      series: [{
        name: 'Группировка',
        type: 'pie',
        left: pos.left,
        right: pos.right,
        top: pos.top,
        bottom: pos.bottom,
        radius: '80%',
        selectedMode: 'multiple',
        selectedOffset: 10,
        emphasis: { scale: true },
        label: {
          show: true,
          position: 'inside',
          formatter: '{d}%'
        },
        data: data.map(function (d) { return { name: d.name, value: d.value }; })
      }]
    };
  }

  function isSliceSelected(idx) {
    var sm = myChart.getModel().getSeriesByIndex(0);
    if (!sm) return false;
    var data = sm.getData();
    if (data.getItemModel(idx).get('selected')) return true;
    var el =...