使用 G2 3.x 建立餅圖（自定義圖例 、圖例餅圖聯動）

使用G2 3.x實現自定義餅圖。左側圖例可自定義html,右側餅圖可跟隨左側圖例點擊的狀況，激活對應的數據區域，展現選中狀態。

一、建立基礎餅圖

從G2官網拿到基本餅圖的示例代碼

const dataSource = [
  { reason: '分類一', ratio: '62.22', count: 28 },
  { reason: '分類二', ratio: '13.33', count: 6 },
  { reason: '分類三', ratio: '13.33', count: 6 },
  { reason: '分類四', ratio: '6.67', count: 3 },
  { reason: '分類五', ratio: '2.22', count: 1 },
  { reason: '其餘', ratio: '2.23', count: 1 },
];
const chart = new G2.Chart({
  container: 'pieChart',
  forceFit: true,
  height: 230,
});
chart.source(dataSource);
chart.coord('theta', {
  innerRadius: 0.6,
  radius: 0.85,
});
chart.tooltip({
  showTitle: false,
  containerTpl: '<div class="g2-tooltip">'
  + '<ul class="g2-tooltip-list"></ul></div>', // tooltip 容器模板
  itemTpl: '<li data-index={index}>'
  + '<span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;">'
  + '</span>{reason}: {ratio}</li>', // tooltip 每項記錄的默認模板,
});
chart.intervalStack()
.position('count')
.color('reason', ['#4BD3EE', '#3BA1FF', '#385EFB', '#26C686', '#F16D83', '#FFC847'])
.tooltip('reason*ratio', (reason, ratio) => {
  return {
    reason,
    ratio: `${ratio}%`,
  };
})
.style({
  lineWidth: 1,
  stroke: '#fff',
  shadowBlur: 14,
  shadowColor: 'rgba(75,175,238,0.35)',
});
chart.render();

二、自定義lengnd

默認圖例的樣式沒法知足，須要自定義html。api傳送門

chart.legend({
  title: null,
  position: 'left-center',
  slidable: false, // 關閉圖例篩選功能
  allowAllCanceled: true, // 圖例每一項都支持選擇、取消選擇
  useHtml: true, // 申明可支持html自定義
  containerTpl: '<div class="g2-legend">' +
  '<table class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></table>' +
  '</div>',
  itemTpl: (value, color, checked, index) => {
    checked = checked ? 'checked' : 'unChecked';
    const _data = dataSource;
    return (
      `<tr
        class="g2-legend-list-item item-${index} g2-legend-list-item-${checked}"
        data-value="${value}"
        data-color=${color}
        style="cursor: pointer;font-size: 14px;"
      >
        <td
          width=150
          style="border: none;padding:0;"
        >
          <i class="g2-legend-marker"></i>
          <span class="g2-legend-text ${`${index}`}">
            <span>${_data[index].reason}</span>
          </span>
        </td>
        <td style="text-align: right;border: none;padding:0;color:#343434;font-weight:500;">${_data[index].ratio}%</td>` +
      '</tr>'
    );
  },
});

三、圖例、餅圖點擊聯動

調用chart.legend.onClick方法，監聽圖例的點擊事件。
點擊事件觸發後獲取到圖表，並觸發圖表的setSelected方法，激活圖例選擇的對應圖形塊的選中狀態。
在調起激活狀態以前，先清除其他圖形塊的激活狀態。

// 點擊圖例觸發篩選
onClick: (val) => {
    const geom = chart.get('geoms')[0]; // 獲取全部的圖形
    const items = geom.get('data'); // 獲取圖形對應的數據
    const index = (val.currentTarget.classList[1]).split('-')[1];
    if (classname && classname == `pieChart-item-${index}`) {
      classname = '';
      document.getElementById('pieChart').className = '';
      geom.clearActivedShapes();
      geom.clearSelected();
    } else {
      classname = `pieChart-item-${index}`;
      document.getElementById('pieChart').className = `pieChart-item-${index}`;
      geom.clearActivedShapes(); // 選擇以前先清除其他圖形塊的激活狀態
      geom.clearSelected(); // 選擇以前先清除其他圖形塊的激活狀態
      geom.setSelected(items[index]); // 激活當前選中的圖例對應的圖形塊
    }
},

調用chart.on('interval:click', ev => {})，監聽圖表的點擊事件。api傳送門
拿到點擊事件回執的數據，計算當前圖形塊的下標位置，給對應的圖例添加選中樣式。

// 點擊圖表觸發篩選
chart.on('interval:click', ev => {
  const data = ev.data;
  const index = dataSource.findIndex(item => item.reason == data._origin.reason); // 計算當前點擊的圖形塊的下標位置
  if (classname && classname == `pieChart-item-${index}`) {
    classname = '';
    document.getElementById('pieChart').className = '';
  } else {
    classname = `pieChart-item-${index}`;
    document.getElementById('pieChart').className = `pieChart-item-${index}`;
  }
});

到此聯動的效果就完成了。
完整代碼傳送門