ngx-echarts renderItem-issue-166-example

app.component.html

<div style="text-align:center">
  <h1>
    Gizmo Viewer
  </h1>
</div>
<div echarts [options]="options" class="chart"></div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

import { EChartOption } from 'echarts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  options: any;
  d: any;
  mergeOption: any;
  loading = false;

  graphOption: Observable<EChartOption>;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.gizmo();
  }

  createRenderItem() {
    const d = this.d;
    return function (params, api) {
      console.log('renderItem params = ', params);
      console.log('renderItem api = ', api);
      console.log('renderItem d = ', d);
      const dCur = d.renderData[params.seriesId][params.dataIndex];
      console.log('renderItem dCur = ', dCur);

      const completeset = [];
      dCur.pointSet.forEach(function (ps) {
        completeset.push(api.coord(ps));
      });

      const ret = {
        type: 'polygon',
        z2: dCur.z,
        name: dCur.name,
        id: dCur.id,
        shape: {},
        silent: true,
        style: api.style(dCur.style)
      };
      if ( true ) {
        ret.shape = {
          points: completeset
        }
      } else {
        ret.shape = {
          points: echarts.graphic.clipPointsByRect(completeset, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          })
        };
      }
      console.log('renderItem return = ', ret);
      return ret;
    };
  }

  public gizmo() {
    this.http.get('/assets/exampleData1.json')
      .subscribe(data => {
        this.d = data;
        const renderData = {};
        let i = 0;
        this.d.diagramData.forEach(function (x) {
          Object.entries(x).forEach(([key, array]) => {
            const renderDataArray = [];
            array.forEach(function (y) {
              y.z = ++i;
              renderDataArray.push(y);
            });
            renderData[key] = renderDataArray;
          });
        });
        this.d.renderData = renderData;
        this.loadChart();
      });
  }

  public loadChart() {
    console.log('loadChart d = ', this.d);
    const renderItem = this.createRenderItem();
    this.options = {
      legend: {
        show: false
      },
      xAxis: {
        type: 'value',
        name: this.d.chartData.xLabel + ' (' + this.d.chartData.xUOM + ')',
        nameLocation: 'middle',
        nameGap: 25,
        position: 'top',
        min: this.d.chartData.xMin,
        max: this.d.chartData.xMax
      },
      yAxis: {
        type: 'value',
        name: this.d.chartData.yLabel + ' (' + this.d.chartData.yUOM + ')',
        nameLocation: 'middle',
        nameGap: 50,
        inverse: true,
        position: 'left',
        min: this.d.chartData.yMin,
        max: this.d.chartData.yMax
      },
      series: [
        {
          name: 'Set 1',
          id: 'Set1',
          data: this.d.renderData.Set1,
          type: 'custom',
          renderItem: renderItem
        },
        {
          name: 'Set 2',
          id: 'Set2',
          data: this.d.renderData.Set2,
          type: 'custom',
          renderItem: renderItem
        }
      ]
    };
    console.log('options = ', this.options);
  }
}

exampleData1.json

{
    "chartData": {
        "yMin": 0,
        "yMax": 1000,
        "yUOM": "m",
        "yLabel": "Height",
        "xMin": 0,
        "xMax": 1000,
        "xUOM": "m",
        "xLabel": "Width"
    },
    "diagramData": [
        {
            "Set1": [
                {
                    "name": "1.1",
                    "pointSet": [
                        [ 0, 0 ],
                        [ 200, 0 ],
                        [ 200, 200 ],
                        [ 0, 200 ]
                    ],
                    "style": {
                        "fill": "blue"
                    }
                },
                {
                    "name": "1.2",
                    "pointSet": [
                        [ 130, 130 ],
                        [ 800, 130 ],
                        [ 800, 800 ],
                        [ 130, 800 ]
                    ],
                    "style": {
                        "fill": "green"
                    }
                }
            ]
        },
        {
            "Set2": [
                {
                    "name": "2.1",
                    "pointSet": [
                        [ 50, 0 ],
                        [ 120, 0 ],
                        [ 120, 400 ],
                        [ 50, 400 ]
                    ],
                    "style": {
                        "fill": "red"
                    }
                },
                {
                    "name": "1.2",
                    "pointSet": [
                        [ 230, 230 ],
                        [ 360, 230 ],
                        [ 360, 1000 ],
                        [ 230, 1000 ]
                    ],
                    "style": {
                        "fill": "purple" 
                    }
                }
            ]
        }
     ]
}