antv g2繪制帶圓點的折線的時候，圖例legend一般顯示的是一條曲線而不帶圓點，正是因為默認結構不滿足需求，所以需要自定義圖例容器的模板。g2一般與react配合使用。

注意：自定義模板時必須包含各個 dom 節點的 class，樣式可以自定義。

chart.legend('type', {
      position: 'top-left',
      // itemGap: 20,//圖例之間的距離
      offsetY: -15,
      clickable: false,
      hoverable: false,
      useHtml: true, // 針對分類類型圖例，用于開啟是否使用 HTML 渲染圖例
      // containerTpl: '<div class="g2-legend"><div class="g2-legend-list"></div></div>',
      itemTpl: function itemTpl(value, color, checked, index) {
        // console.log(value, color, checked, index)
        let markerDom = '';
        if (value == '樓面地價（元/㎡）') {
          //正方形方塊
          markerDom = '<span class="g2-legend-list-icon" style="margin-right:5px;">' +
            '<svg width="10" height="10">' +
            '<rect width="8" height="8" style="fill:' + color + ';"/>' +
            '</svg>' +
            '</span>';
        } else {
          //線條+圓點
          markerDom = '<span class="g2-legend-list-icon" style="margin-right:5px;">' +
            '<svg width="20" height="10">' +
            '<rect rx="1" ry="1" y="4" width="20" height="2" style="fill:' + color + ';" />' +
            '<circle class="indi-svg-orange" cx="10" cy="5" r="3" stroke="' + color + '" stroke-width="2" fill="' + color + '" />' +
            '</svg>' +
            '</span>';
        }

        let valueDom = '<span class="legend-item-value">' + value + '</span>';
        return '<div class="g2-legend-list-item" data-value="' + value + '">' + markerDom + valueDom + '</div>';
      }
    })