echarts 气泡图配置

CrossPython / 2023-08-22 / 原文

// prettier-ignore
const hours = [
    '', '2022-09', '2022-10', '2022-11', '2022-12', '2023-01', '2023-02',
    '2023-03', '2023-04', '2023-05', '2023-06', '2023-07',
    '2023-08', 'YTD'
];
// prettier-ignore
const days = [
    'TF1', 'TF2'
];
// prettier-ignore
const data = [[0, 0, 0], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4],[0,13,8],[1, 0, 0], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2],[1,13,9]]
    .map(function (item) {
    return [item[1], item[0], item[2]];
});
option = {
  grid: {
    left: 100,
    bottom: 10,
    right: 200,
    containLabel: true
  },
  tooltip: {
    position: 'top',
    formatter: function (params) {
      return (
        params.value[2] +
        ' commits in ' +
        hours[params.value[0]] +
        ' of ' +
        days[params.value[1]]
      );
    }
  },
  xAxis: {
    type: 'category',
    data: hours,
    boundaryGap: false,
    splitLine: {
      show: true
    },
    axisLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    data: days,
    axisLine: {
      show: false
    }
  },
  series: [
    {
      name: 'Punch Card',
      type: 'scatter',
      symbolSize: function (val) {
        return val[2] * 15;
      },
      data: data,
      label: {
        show: true,
        position: 'inside',
        fontSize: 24,
        // color: '#000',
        formatter: function (params) {
          return params.value[2];
        },
      },
      animationDelay: function (idx) {
        return idx * 5;
      }
    }
  ]
};