JSFiddle - React, Tailwind, and code Playground

by ma_ss_ai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/6.1.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/6.1.0/echarts.min.js"></script>
<div id="hint">
  <strong>Pie repro</strong>
  <ol>
    <li>Две доли на круге</li>
    <li>Apply filter (OLD)</li>
  </ol>
</div>
<div id="main"></div>
<p id="status">Загрузка…</p>
<p id="offsets"></p>
<div id="actions">
  <button type="button" id="apply">Apply filter (OLD)</button>
  <button type="button" id="applyFixed">Apply + unselect + reset x/y</button>
  <button type="button" id="reset">Reset</button>
</div>

CSS

body { font: 14px sans-serif; max-width: 560px; margin: 12px auto; }
#hint { background: #f5f5f5; padding: 10px; border-radius: 6px; margin-bottom: 8px; }
#main { width: 520px; max-width: 100%; height: 380px; border: 2px solid #333; margin: 0 auto; background: #fff; }
#status, #offsets { margin: 8px 0; }
#offsets { font-family: monospace; color: #b00; }
#actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
button { padding: 8px 12px; }

JavaScript

(function () {
  var FULL = [
    { name: 'Sector A', value: 120 },
    { name: 'Sector B', value: 80 },
    { name: 'Sector C', value: 60 },
    { name: 'Sector D', value: 40 },
    { name: 'Sector E', value: 25 }
  ];

  function getSize(length) {
    return length <= 3 ? 45 : 100;
  }

  function piePosition(dataLength) {
    return { left: '8%', right: '8%', top: 10, bottom: getSize(dataLength) };
  }

  function makeOption(data) {
    return {
      tooltip: { trigger: 'item' },
      legend: { bottom: 0, data: data.map(function (d) { return d.name; }) },
      series: [{
        type: 'pie',
        left: piePosition(data.length).left,
        right: piePosition(data.length).right,
        top: piePosition(data.length).top,
        bottom: piePosition(data.length).bottom,
        radius: '75%',
        selectedMode: 'multiple',
        selectedOffset: 10,
        label: { show: true, formatter: '{b}' },
        data: data.map(function (d) { return { name: d.name, value: d.value }; })
      }]
    };
  }

  function boot() {
    var status = document.getElementById('status');
    var main = document.getElementById('main');
    if (!main) {
      if (status) status.textContent = 'Нет #main — вставь HTML в панель HTML.';
      return;
    }
    if (typeof echarts === 'undefined') {
      if (status) status.textContent = 'ECharts не загрузился (CDN / adblock).';
      return;
    }

    var chart = echarts.init(main, null, { renderer: 'canvas' });
    var dataset = FULL.slice();

    function getSelectedNames() {
      var sm = chart.getModel().getSeriesByIndex(0);
      if (!sm) return [];
      var data = sm.getData();
      var names = [];
      sm.eachData(function (idx) {
        if (data.getItemModel(idx).get('selected')) names.push(data.get('name', idx));
      });
      return names;
    }

    function readOffsets() {
      var sm = chart.getModel().getSeriesByIndex(0);
      if (!sm)...