How to use the echarts/lib/echarts.graphic function in echarts

* @type {Array.}
     */
    this.views = [];

    this._picking = new RayPicking({
        renderer: this.renderer
    });

    this._viewsToDispose = [];

    /**
     * Current accumulating id.
     */
    this._accumulatingId = 0;

    this._zrEventProxy = new echarts.graphic.Rect({
        shape: {x: -1, y: -1, width: 2, height: 2},
        // FIXME Better solution.
        __isGLToZRProxy: true
    });

    this._backgroundColor = null;
};

getGeoBoundingRect: function () {
        if (this._geoRect) {
            return this._geoRect;
        }
        var rect;

        var regions = this.regions;
        for (var i = 0; i < regions.length; i++) {
            var regionRect = regions[i].getBoundingRect();
            rect = rect || regionRect.clone();
            rect.union(regionRect);
        }
        // FIXME Always return new ?
        return (this._geoRect = rect || new echarts.graphic.BoundingRect(0, 0, 0, 0));
    },

initBar(id) {
    let {intl, data} = this.props;

    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart === undefined) {
      myChart = echarts.init(document.getElementById(id));
    }
    config.barChart.title.text = '';
    config.barChart.yAxis.data = [];
    config.barChart.series[0].data = [];
    config.barChart.series[0].itemStyle = {
      normal: {
        color: new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              {offset: 0, color: '#ed213a'},
              {offset: 1, color: '#93291e'}
            ]
        )
      },
      emphasis: {
        color: new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              {offset: 0, color: '#0052d4'},
              {offset: 1, color: '#0052d4'}
            ]
        )
      }

{
                    offset: 0,
                    color: 'rgba(205, 52, 42, 0.5)',
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(235, 235, 21, 0)',
                  },
                ],
                false,
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10,
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(205, 52, 42, 1)',
                },
                {
                  offset: 1,
                  color: 'rgba(235, 235, 21, 1)',
                },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: 'rgb(99, 250, 235)',
                borderColor: 'rgba(99, 250, 235, 0.2)',
                extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                borderWidth: 10,

},
            },
            axisLabel: {
              color: 'rgb(170, 170, 170)',
              formatter: '{value} %',
            },
          },
        ],
        series: [
          {
            name: 'A',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#18FFFF',
                  },
                  {
                    offset: 0.5,
                    color: '#29B6F6',
                  },
                  {
                    offset: 1,
                    color: '#2962FF',
                  },
                ]),
              },
            },
            data: seriesData,

],
        series: [
          {
            name: 'Simulation Data',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              normal: {
                color: 'rgb(255, 70, 131)',
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(255, 158, 68)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(255, 70, 131)',
                  },
                ]),
              },
            },
            data,
          },
        ],
      };

}
    config.barChart.title.text = '';
    config.barChart.yAxis.data = [];
    config.barChart.series[0].data = [];
    config.barChart.series[0].itemStyle = {
      normal: {
        color: new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              {offset: 0, color: '#ed213a'},
              {offset: 1, color: '#93291e'}
            ]
        )
      },
      emphasis: {
        color: new echarts.graphic.LinearGradient(
            0, 0, 1, 0,
            [
              {offset: 0, color: '#0052d4'},
              {offset: 1, color: '#0052d4'}
            ]
        )
      }
    }

    let dataOpt = [];
    let others = {name: 'Others', total: 0};
    data.map((val) => {
      if (val.total > 10 && val.name !== null) {
        dataOpt.push(val)
      }
      else {

textStyle: {
          color: 'rgb(246, 152, 153)',
        }
      },
      itemStyle: {
        normal: {
          color: "#28ffb3",
        }
      },
      tooltip: {
        show: true
      },
      areaStyle: { //区域填充样式
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{
            offset: 0,
            color: 'rgba(0,154,120,0.3)'
          },
          {
            offset: 1,
            color: 'rgba(0,0,0, 0)'
          }
          ], false),
          shadowColor: 'rgba(53,142,215, 0.5)', //阴影颜色
          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        }
      }
    }

    const { series, title, xAxisData } = this.props.options

},
      axisTick: {
        show: false
      }
    },
    series: [
      {
        id: 'a',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        data: dataY,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(54,112,227,0.4)' },
              { offset: 1, color: 'rgba(54,112,227,0.03)' }
            ])
          }
        },
        itemStyle: {
          normal: {
            label: {
              show: true,
              fontSize: 10,
              color: '#3670E3',
              fontWeight: '540',
              textBorderColor: '#fff',
              textBorderWidth: 2
            },
            borderColor: '#3670E3',

);
                }
                else {
                    var x = isForClipping ? -r : cx - r;
                    var y = isForClipping ? -r : cy - r;
                    if (symbol === 'pin') {
                        y += r;
                    }
                    else if (symbol === 'arrow') {
                        y -= r;
                    }
                    return symbolUtil.createSymbol(symbol, x, y, r * 2, r * 2);
                }
            }

            return new echarts.graphic.Circle({
                shape: {
                    cx: isForClipping ? 0 : cx,
                    cy: isForClipping ? 0 : cy,
                    r: r
                }
            });
        }
        /**