水星的随笔

背景

画个环形图

初体验

画图

$.getJSON('http://localhost:7001/meta/size?type=f&tree1=2&tree2=3', function (result) {
  // console.log(result);

  console.log(result.code);
  if (result.code == 200) {
    var data1 = result.data;
    // console.log(data1);
  }

  var sum = 0;
  $.each(result.data, function (index, element) {
    sum += element['sizeInTb'];
  });

  $.each(result.data, function (index, element) {
    element['item'] = element['path'];
    element['count'] = element['sizeInTb'];
    element['percent'] = element['count'] / sum;
    element['label'] = element['item'] + ": "
      + element['sizeInTb'].toFixed(3) + 'TB'
    console.log(element);
  });

  var data = result.data;

  // var data = [
  //   { item: '事例一', count: 40, percent: 0.4 },
  //   { item: '事例二', count: 21, percent: 0.21 },
  //   { item: '事例三', count: 17, percent: 0.17 },
  //   { item: '事例四', count: 13, percent: 0.13 },
  //   { item: '事例五', count: 9, percent: 0.09 },
  // ];

  // console.log(data);

  const chart = new Chart({
    container: 'root',
    autoFit: true,
    height: 500,
  });


  // console.log(data);

  chart.coordinate('theta', {
    radius: 0.85
  });

  chart.scale('percent', {
    formatter: (val) => {
      val = (val * 100).toFixed(1) + '%';
      return val;
    },
  });
  chart.tooltip({
    showTitle: false,
    showMarkers: false,
  });
  chart.axis(false); // 关闭坐标轴
  const interval = chart
    .interval()
    .adjust('stack')
    .position('percent')
    .color('item')
    .label('label', {
      offset: -40,
      style: {
        // textAlign: 'center',
        shadowBlur: 2,
        shadowColor: 'rgba(0, 0, 0, .45)',
        fill: '#fff',
      },
    })
    .tooltip('item*percent', (item, percent) => {
      percent = (percent * 100).toFixed(1) + '%';
      return {
        name: item,
        value: percent,
      };
    })
    .style({
      lineWidth: 1,
      stroke: '#fff',
    });
  chart.interaction('element-single-selected');

  // render
  chart.data(data);
  chart.render();
  // 默认选择
  interval.elements[0].setState('selected', true);

}.bind(this));