Question

如何动态制作面积图，该图处于实时状态温度将根据tempGenerator()

更新

chart.component.ts

export interface templogRecord {
  dateandtime: string,
  sensor: string,
  temperature: string,
  humidity: string
    }

export class RoomListComponent implements OnInit, OnDestroy {

  rowData: templogRecord[] = [];

    trendChart() {
        let historyRefuelling = [["2018-08-15T10:04:01.339Z",50],
        ["2018-08-15T10:08:01.339Z",50],
        ["2018-08-15T12:01:13.914Z",7],["2018-08-15T13:14:13.914Z",3]]



        this.rowData = record.default.records;
        this.trendOption = [];

        this.trendOption = {
          title: {
            text: 'Humidity',
            x: '50%',
            y: '3%'
          },
          tooltip: {
            showContent: true,
          },
          legend: {
            show: false,
            y: '10%',
            data: [ 'Humidity']
          },
          calculable: false,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                formatter: function(data: Date){
                  return format(new Date(data), 'MMMM DD, YYYY [\n] HH:MM a')
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: 100,
              axisLabel : {
                  formatter: '{value} °C'
              }
            }
          ],
          series: [
            {
              name: 'Humidity',
              type: 'line',
              smooth: true,
              color: '#ff7b7b',
              itemStyle: { normal: { areaStyle: { type: 'default' } } },
              data: historyRefuelling
            }
          ]
        }

        console.log(this.rowData, ' -=--=--')
        console.log(this.trendOption)
        console.log(
          new Date(+(new Date()) + Math.floor(Math.random()*10000000000))
          )
      }

 tempGenerator() {
        var time = 12;
        var num = Math.random() * 100;
        var tempBase = Math.round(num);

        var fluc = [0, 1, 1, 2, 1, 1, 2.5, 3.5, 1, 1, 1, 1,
          1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

        return tempBase * fluc[time];
      }

data.json


{
    "records": [
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Heat 1",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Dash Seal Area",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Cloud Seal Area",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Nine Seal Area",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Sam",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Samp",
            "temperature": "25.9",
            "humidity": "99.9"
        },
        {
            "dateandtime": "2018-06-14 02:24:02",
            "sensor": "Sensing",
            "temperature": "25.9",
            "humidity": "99.9"
        }
    ]
}

Answer 1

如我的评论中所述，要更新图表，您需要在HTML中向图表提供marge输入。合并输入必须绑定到使用新图表选项更新的变量。

我对您的示例进行了一些修改，以使我可以更轻松地更新数据，但是您明白了。

在示例中，您将注意到两件事：

我在绑定到[merge]变量的html文件中添加了新的mergeOptions属性
我使用了setInterval（但是您可以使用Observable.timer采取更多的Angular方式），以mergeOtions函数中的数据更新tempGenerator。

EXAMPLE

如何以角度制作动态区域echarts

1 个答案: