(() => {
  const chart = new G2.Chart();

  chart.options({
    type: 'interval',
    marginTop: 40,
    data: {
      type: 'fetch',
      value:
        'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
    },
    encode: {
      x: 'letter',
      y: 'frequency',
    },
    title: {
      align: 'center', // 图表标题的对齐方式
      size: 28, // 图表标题的高度，默认为 36
      spacing: 4, // 主标题和副标题之间的间距

      // 标题
      title: "我是一个标题 I'am a title", // 图表标题的文本
      titleFontSize: 28, // 图表主标题的字体大小
      titleFontFamily: 'sans-serif', // 图表主标题的字体
      titleFontWeight: 600, // 图表主标题的字体粗细
      titleFill: '#fff', // 图表主标题的文字颜色
      titleFillOpacity: 1, // 图表主标题的文字透明度
      titleStroke: '#000', // 图表主标题的文字描边颜色
      titleLineWidth: 2, // 图表主标题的文字描边线宽
      titleStrokeOpacity: 1, // 图表主标题的文字描边透明度

      // 副标题
      subtitle: "我是一个副标题 I'am a subtitle", // 图表副标题的文本
      subtitleFontSize: 16, // 图表副标题的字体大小
      subtitleFontFamily: 'Arial', // 图表副标题的字体
      subtitleFontWeight: 300, // 图表副标题的字体粗细
      subtitleFill: '#2989FF', // 图表副标题的文字颜色
      subtitleFillOpacity: 1, // 图表副标题的文字透明度
      subtitleStroke: '#000', // 图表副标题的文字描边颜色
      subtitleLineWidth: 1, // 图表副标题的文字描边线宽
      subtitleStrokeOpacity: 0.5, // 图表副标题的文字描边透明度
    },
  });

  chart.render();

  return chart.getContainer();
})();

(() => {
  const alignList = ['center', 'right', 'left'];
  const alignMap = alignList.map((p) => {
    return {
      label: p,
      value: p,
    };
  });
  const chart = new G2.Chart({
    width: 480,
    height: 160,
  });

  const data = [
    264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513,
    546, 983, 340, 539, 243, 226, 192,
  ];

  chart.options({
    data,
    type: 'interval',
    encode: {
      x: (_, idx) => idx,
      y: (d) => d,
    },
    title: {
      align: 'center',
      title: 'This is a chart title.',
      subtitle: 'Displayed are sampled values.',
    },
    axis: false,
  });
  const handleSetAlign = (align) => {
    chart.title({ align });
    chart.render(); // 重新渲染图表
  };

  const selectorContainer = document.createElement('div');
  selectorContainer.textContent = '选择标题对齐方式 ';
  const selector = document.createElement('select');
  selector.innerHTML = alignMap.map(
    (align, index) =>
      `<option value="${align.value}" ${index === 0 ? 'selected' : ''}>${
        align.label
      }</option>`,
  );
  selector.onchange = (e) => {
    handleSetAlign(e.target.value);
  };
  selectorContainer.appendChild(selector);
  const node = chart.getContainer();
  node.insertBefore(selectorContainer, node.childNodes[0]);
  chart.render();

  return node;
})();