antv g2设置chart图例的legend为一条线与一个圆的组合

antv g2绘制带圆点的折线的时候，图例legend一般显示的是一条曲线而不带圆点，正是因为默认结构不满足需求，所以需要自定义图例容器的模板。g2一般与react配合使用。

注意：自定义模板时必须包含各个 dom 节点的 class，样式可以自定义。

chart.legend('type', {
      position: 'top-left',
      // itemGap: 20,//图例之间的距离
      offsetY: -15,
      clickable: false,
      hoverable: false,
      textStyle: {
        fill: 'rgba(255,255,255,.8)', // 文本的颜色
        fontSize: '12', // 文本大小
        fontWeight: 'bold', // 文本粗细
      },
      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>';
      }
    })