如何使用Angular向Ngx-Echarts添加更多系列

时间:2019-01-29 14:18:13

标签: angular charts

我需要知道如何在Ngx-Echarts中动态添加新数据系列,该数据系列是EChart的Angular包装器。使用Ngx-Echarts我无法弄清楚。使用带有简单setSeries函数的普通Echart显然更容易。但是我在Ngx-Echarts的文档中找不到任何addSeries函数。

我现在可以实现这一点,以便每次添加新系列时都必须重新初始化整个图表对象实例。但是必须有一种更轻松,更聪明的方式来做到这一点。当前方式的核心如下所示:

<div echarts [options]="options" [merge]="updateOptions1" class="demo-chart" 
    (chartInit)="onChartInit($event)">
</div> 

public seriesMap: Map<number, any[]> = new Map<number, any[]>();

 public sensorList: Sensor[] = [
 {
 sensorId: 1, samplingFreaquence: 5, unitOfMeasure: "rpm", sensorValueType: 1, sensorValueHigh: 1000,
        sensorDescription: "Akselin pyörimisnopeusanturi",
        sensorValueLow: 200
      },
      {
        sensorId: 2, samplingFreaquence: 5, unitOfMeasure: "C", sensorValueType: 1, sensorValueHigh: 1000,
        sensorDescription: "Öljyn lämpötila",
        sensorValueLow: 200
      },
      {
        sensorId: 3, samplingFreaquence: 5, unitOfMeasure: "Bar", sensorValueType: 1, sensorValueHigh: 1000,
        sensorDescription: "Järjestelmä paine",
        sensorValueLow: 200
      }
    ];

    private echartsIntance;

    public updateOptions1 = null;
    public options: any;
    private chosenSensors = new Set<number>()
    private dataPointCount: number = 15;

    constructor() {
    }

    ngOnInit() {
      // initialize hashmap with sensor ids-values
      this.sensorList.forEach(sensor => {
        this.seriesMap.set(sensor.sensorId, null);
      });
    }

    initChart(xAxisData: string[]) {
      this.options = null;
      this.options = {
        title: {
          left: 'center',
          text: 'Generated Device Data Per Sensor',
        },
        legend: {
          data: [],
          // align: 'left',
          x: 100,
          y: 30
        },
        calculable: true,
        // tooltip: { trigger: 'axis'},
        dataZoom: {
          show: true,
          realtime: true,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [...xAxisData],
            splitLine: {
              show: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: true
            },
            axisLabel: {
              formatter: '{value}'// °C'
            },
            name: 'Sensor values',
            nameLocation: 'middle',
            nameGap: 50
          },
        ],


      };
    }


    createXAxisData() {
      let xAxisData: string[] = [];
      for (let i = 0; i < this.dataPointCount; i++) {
        xAxisData.push('2013-03-' + i);
      }
      return xAxisData;
    }


    buildSeries(chosenSensors: Set<number>) {

      this.initChart(this.createXAxisData());

      // empty all data-arrays in value-property
      this.seriesMap.forEach((val: any[], key: number) => {
        val = null
      })

      // for each chosen sensor generate dataArray and add it to the emptied value-property
      chosenSensors.forEach((chosenSensor, j) => {
        this.seriesMap.set(chosenSensor, []);
        for (let i = 0; i < this.dataPointCount; i++) {
          this.seriesMap.get(chosenSensor).push(
            (Math.sin(i / 5) * (i / 5 - 10 * j) + i / 6) * (j + 3) * 3
          );
        }
      });
      this.updateData()
    }


    updateData() {

      // dataobject must be nulled/emptied
      this.updateOptions1 = null;
      this.options.legend.data.length = 0;

      // loop each chosen sensor
      this.chosenSensors.forEach((chosenSensor: number) => {

        // accrue existing series if any
        let existingData = [];
        if (this.updateOptions1 != null) {
          existingData = [...this.updateOptions1.series];
        }

        // add / update legends also
        const sensor = this.sensorList.find(sensor => sensor.sensorId === chosenSensor);
        this.options.legend.data.push(sensor.sensorDescription + ' (' + sensor.unitOfMeasure + ')');

        // update series and legend data in chart
        this.updateOptions1 = {

          series: [...existingData, {
            name: sensor.sensorDescription + ' (' + sensor.unitOfMeasure + ')',
            type: 'line',
            data: [...this.seriesMap.get(chosenSensor)],
        ],

          legend: {
            data: [...this.options.legend.data]
          },
          tooltip: { trigger: 'axis' },
        };
      });
    }

因此,我需要添加序列而不重新创建整个图表对象。

0 个答案:

没有答案