如果名称重复,如何显示数据角度不显示

时间:2019-09-10 09:11:33

标签: javascript angular

如果数据名称重复超过20,如何显示,则不显示。名称已经显示时,它应该仅显示一个数据  list.component.ts

gaugeChart() {

        this.gaugeOption = [];

        this.global.getData(`/services/getData.php`)
          .pipe(take(1))
          .subscribe((res: any) => {
            this.rowData = res;
            this.rowData.forEach((room) => {
              this.gaugeOption.push({
                title: {
                  text: room.sensor,
                  left: '5%',
                  top: '5%',
                  textStyle: {
                    fontSize: 18,
                  }
                },
                tooltip: {
                  formatter: "{a} <br/>{b} : {c}°"
                },
                toolbox: {
                  show: true,
                  feature: {
                    mark: { show: false },
                    restore: { show: false },
                    saveAsImage: { show: false }
                  }
                },
                series: [
                  {
                    name: 'Temperature',
                    type: 'gauge',
                    center: ['40%', '70%'],
                    splitNumber: 10,
                    radius: '70%',
                    axisLine: {
                      lineStyle: {
                        color: [[0.2, '#48b'], [0.8, '#228b22'], [1, '#ff0000']],
                        width: 8
                      }
                    },
                    axisTick: {
                      splitNumber: 10,
                      length: 12,
                      lineStyle: {
                        color: 'auto'
                      }
                    },
                    axisLabel: {
                      textStyle: {
                        color: 'auto'
                      }
                    },
                    splitLine: {
                      show: true,
                      length: 30,
                      lineStyle: {
                        color: 'auto'
                      }
                    },
                    pointer: {
                      width: 5
                    },
                    title: {
                      show: true,
                      offsetCenter: [0, '65%'],
                      textStyle: {
                        fontWeight: 'bolder'
                      }
                    },
                    detail: {
                      formatter: '{value}°',
                      textStyle: {
                        color: 'auto',
                        fontWeight: 'bolder'
                      }
                    },
                    data: [{ value: room.temperature, name: "Temperature" }]
                  }
                ]
              });
            });

list.component.html

<ul class="cards">
        <li class="cards__item" *ngFor="let data of gaugeOption; let i = index">
          <div class="card">
            <div echarts [options]="data" id="{{'chart-' + i}}" [autoResize]="true"></div>
          </div>
        </li>
        <li>
      </ul>

输出将显示所有20个重复的名称,即Room 1。 如果有20条重复记录,则应仅显示一个名称。

0 个答案:

没有答案