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

loadChart() {
    // console.log(this.chart)
    this.chartObj = echarts.init(this.chart)
    const option = {
      tooltip: {
        show: false,
      },
      grid: {
        top: '20%',
        left: '5%',
        right: '5%',
        bottom: '15%',
      },
      xAxis: {
        data: ['平均CPU\n利用率', '平均内存\n利用率', '平均硬盘\n利用率'],
        offset: 15,
        axisTick: {
          show: false,
        },

initCharts(nodeInfoDataList) {
      this.buildEchartsData(nodeInfoDataList);
      let series = this.buildSeries(this.echartsData);
      var erd = elementResizeDetectorMaker();
      var start = new Date().getTime();
      if (isEmpty(this)) {
        return;
      }
      let infoItemObj = document.getElementById(this.infoItem);
      if (isEmpty(infoItemObj)) {
        return;
      }
      var chart = echarts.init(infoItemObj);

      // 绘制图表
      chart.clear();
      chart = echarts.init(infoItemObj);
      let title = this.infoItem;
      if (
        title == "used_memory" ||
        title == "used_memory_rss" ||
        title == "used_memory_overhead" ||
        title == "used_memory_dataset"
      ) {
        title += "(MB)";
      }

      chart.setOption({
        title: {

mounted: function () {
      const _this = this;
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart'));
      _this.f_getTotal();
      _this.f_getChart(function (data) {
        // 绘制图表
        myChart.setOption({
          color: ['#ff0000'],
          title: {
            text: '过去24小时访问数变化',
            subtext: '实时统计',
            textAlign: 'left'
          },
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            show: true,
            feature: {

export const drawChart = function(that,config,userConfig) {
  const chartTextColor = '#a1a1a2'
  let originConfig = {
    title: true,
    eye: true,
    dataZoom: true,
    clear: false,
    editTitle: false,
    lineBarSwitch: false,
    chartType: 'line',
    zoomCallback: false // 选择区域后是否需要重新请求数据
  }
  let finalConfig = Object.assign(originConfig, userConfig)
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(that.elId))
  myChart.resize()
  if (originConfig.clear) {
    myChart.clear()
  }
  let option = {
    backgroundColor: '#f5f7f9',
    title: {
      textStyle: {
        fontSize: 16,
        fontWeight: 'bolder',
        color: chartTextColor          // 主标题文字颜色
      },
      // text: config.title,
      left:'10%',
      top: '10px'
    },

componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        title: { text: 'ECharts 入门示例' },
        tooltip: {},
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
  }
  change(){

drawPie(id) {
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 0
          },
          xAxis: {
            type: 'category'
            // show: false,
          },
          yAxis: {
            // type: 'value',
            show: false
          },
          series: [{

drawTrafficGraph(datasets) {
    if (!datasets || datasets.length < 1) {
      return;
    }
    const chart = echarts.init(this.$trafficGraph);
    const formatValue = (value) => {
      const [num, unit] = formatBytes(value, { output: 'array' });
      return num.toFixed(2) + unit;
    };
    chart.setOption({
      grid: {
        top: 20,
        bottom: 30,
        left: '15%',
        right: 20,
      },
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          const markers = [
            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#BFCCD6;"></span>',

initChart() {
      this.chart = echarts.init(this.$el)
      this.chart.setOption({
        title: {
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: '50px',
          right: '10px',
          bottom: '25px',

initLine(id) {
    let {intl, data} = this.props;
    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart === undefined) {
      myChart = echarts.init(document.getElementById(id));
    }
    config.txOverviewChart.title.text = intl.formatMessage({id:'TRX_transaction_chart'});
    config.txOverviewChart.xAxis[0].data = [];
    config.txOverviewChart.series[0].data = [];
    config.txOverviewChart.yAxis[0].name = intl.formatMessage({id: 'transactions_per_day'});
    config.txOverviewChart.tooltip.formatter = function (datas) {
      let date = new Date(parseInt(datas[0].data.date)).toLocaleString().split(' ')[0];
      return (
          intl.formatMessage({id: 'date'}) + ' : ' + date + '<br>' +
          intl.formatMessage({id: 'total_transactions'}) + ' : ' + datas[0].data.totalTransaction + '<br>' +
          intl.formatMessage({id: 'avg_blockTime'}) + ' : ' + datas[0].data.avgBlockTime + '<br>' +
          intl.formatMessage({id: 'avg_blockSize'}) + ' : ' + datas[0].data.avgBlockSize + '<br>' +
          intl.formatMessage({id: 'total_BlockCount'}) + ' : ' + datas[0].data.totalBlockCount + '<br>' +
          intl.formatMessage({id: 'new_address_seen'}) + ' : ' + datas[0].data.newAddressSeen + '<br>'
      )

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

    let myChart = echarts.getInstanceByDom(document.getElementById(id));
    if (myChart === undefined) {
      myChart = echarts.init(document.getElementById(id));
    }
    config.ringPieChart.title.text = intl.formatMessage({id: message.id}) + ' Top 10';

    config.ringPieChart.series[0].data = [];
    config.ringPieChart.series[1].data = [];
    config.ringPieChart.legend.data = [];

    function compare(property) {
      return function (obj1, obj2) {

        if (obj1[property] > obj2[property]) {
          return 1;
        } else if (obj1[property] < obj2[property]) {
          return -1;
        } else {
          return 0;