setChartOptions does not exist

[sukeshlaghate]

Hi When using EChartsLayer from ol-echarts in my Angular7 app, compiler throws multiple errors: I get this error

 error TS2554: Expected 0 arguments, but got 2.  

when I use

this.echartslayer = new EChartsLayer(this.chartOption, {
      hideOnMoving: false,
      hideOnZooming: false,
      forcedPrecomposeRerender: true
    });

When I specify

this.echartslayer.appendTo(this.map);

I get error

 error TS2339: Property 'appendTo' does not exist on type 'EChartsLayer'.

and finally following error when I want to update the chart option on data change

 error TS2339: Property 'setChartOptions' does not exist on type 'EChartsLayer'.

Could you please help in resolving these errors?

[sakitam-fdd]

@sukeshlaghate Hi, I tested it in the React environment. I think we can work,so I don't know what's wrong with your code. If you can, please give me the complete code.

import 'ol/ol.css';
import '../assets/style/index.scss';
import * as React from 'react';
// @ts-ignore
import { Map, View } from 'ol';
// @ts-ignore
import { Tile } from 'ol/layer';
// @ts-ignore
import { OSM } from 'ol/source';
// @ts-ignore
import EChartsLayer from 'ol-echarts';

import { Props, Context } from '../interface/common';
import { getJSON } from '../helper';

class Index extends React.Component <Props, Context> {
  private container: any;
  // @ts-ignore
  private map: Map | undefined;
  private chart: any;
  constructor (props: Props, context: Context) {
    super(props, context);
  }

  componentDidMount () {
    this.map = new Map({
      target: this.container,
      layers: [
        new Tile({
          preload: 4,
          source: new OSM({
            url: 'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png',
          }),
        }),
      ],
      loadTilesWhileAnimating: true,
      view: new View({
        zoom: 5,
        projection: 'EPSG:4326',
        center: [116.4066765, 39.9079326],
      }),
    });

    getJSON('./static/json/scatter.json', (res: {
      locations: any;
      coordinates: any;
    }) => {
      if (res) {
        const data = res.locations;
        const geoCoordMap = res.coordinates;
        // @ts-ignore
        const convertData = function (data) {
          // @ts-ignore
          const res = [];
          // @ts-ignore
          for (let i = 0; i < data.length; i++) {
            const geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };
        const option = {
          title: {
            text: '全国主要城市空气质量',
            subtext: 'data from PM25.in',
            sublink: 'http://www.pm25.in',
            left: 'center',
            textStyle: {
              color: '#fff',
            },
          },
          tooltip: {
            trigger: 'item',
          },
          openlayers: {},
          legend: {
            orient: 'vertical',
            y: 'top',
            x: 'right',
            data: ['pm2.5'],
            textStyle: {
              color: '#fff',
            },
          },
          series: [
            {
              name: 'pm2.5',
              type: 'scatter',
              data: convertData(data),
              symbolSize (val: any) {
                return val[2] / 10;
              },
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false,
                },
                emphasis: {
                  show: true,
                },
              },
              itemStyle: {
                normal: {
                  color: '#ddb926',
                },
              },
            },
            {
              name: 'Top 5',
              type: 'effectScatter',
              data: convertData(data.sort((a: {
                value: any;
              },                           b: {
                value: any;
              }) => {
                return b.value - a.value;
              }).slice(0, 6)),
              symbolSize (val: any) {
                return val[2] / 10;
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke',
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true,
                },
              },
              itemStyle: {
                normal: {
                  color: '#f4e925',
                  shadowBlur: 10,
                  shadowColor: '#333',
                },
              },
              zlevel: 1,
            }],
        };
        this.initChart(option);
        window.setTimeout(() => {
          this.chart.remove();
          window.setTimeout(() => {
            this.initChart(option);
          }, 5000);
        }, 5000);
      }
    });
  }

  initChart (option: object) {
    // @ts-ignore
    const echartslayer = this.chart = new EChartsLayer(option, {
      hideOnMoving: false,
      hideOnZooming: false,
      forcedPrecomposeRerender: true,
    });
    echartslayer.appendTo(this.map);
  }

  componentWillUnmount () {
    // this.map.remove()
  }

  setRef = (x = null) => {
    this.container = x;
  }

  render () {
    // @ts-ignore
    return (<div ref={this.setRef} className="map-content"/>);
  }
}

export default Index;

[sakitam-fdd]

@sukeshlaghate I found the problem. The reason is that the type definition of ol-echarts is incorrect.You can ignore the tslint check for a while, like the following:

    // @ts-ignore
    const echartslayer = new EChartsLayer(option, {
      hideOnMoving: false,
      hideOnZooming: false,
      forcedPrecomposeRerender: true,
    });
    echartslayer.appendTo(this.map);

[sukeshlaghate]

Hi @sakitam-fdd ,

Thanks for quick response. I was able to proceed ahead. However I am facing two more issues,

1. Scatter chart and map do not superimpose properly there is a scale and shift issue that is being observed (map projection being used is 3857) please find attached the screen shot

2. chart is too slow in rendering there are more than 20K points. Even after filtering and reducing them to 5k, chart rendering is slow.

Would appreciate any pointers on how to resolve this.

[sakitam-fdd]

@sukeshlaghate As for the first point, it's convenient for me to test some of the raw data if possible (probably because the BD09 projection system supported by echarts is built-in, so there will be offset).

The second problem is that there is no good solution for the time being. What ol-echarts does is to synchronize the redrawing of openlayers in real time. The display of massive data may need the help of other schemes, which may be better.

[sakitam-fdd]

@sukeshlaghate fixed link