React+Echarts 实时数据监控刷新

àì夳堔傛蜴生んèń 2022-11-26 15:52 429阅读 0赞

import echarts from 'echarts/lib/echarts';
    // 引入柱状图
    import 'echarts/lib/chart/line';
    // 引入提示框和标题组件
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    // 使用样式
    import 'echarts/theme/macarons'
    import axios from 'axios'
    class edg1 extends React.Component { 
    
      componentDidMount() { 
        var container = document.getElementById('charts');
        // 初始化echarts对象
        var myContainer = echarts.init(container);
        var base = + new Date();
        var oneDay = 1000;
        var date = [];
    
        var data = [100];
        var data1 = [10];
        var data2 = [30];
        var now = new Date(base);
        var day = 30;
        var a = 10;
        var b = 100;
        var c = 10;
        function addData(shift) { 
          now = [now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours()].join('/') + ":" + now.getMinutes() + ":" + now.getSeconds();
          console.log(now)
          date.push(now);
          a = a + 1;
          b = b - 1;
          data.push(b);
          data1.push(a);
          axios.get('/asd/getJiankongData',)
            .then(function (response) { 
              console.log(response.data.height);
              c=response.data.height;
            });
          data2.push(c);
          if (shift) { 
            date.shift();
            data.shift();
            data1.shift();
            data2.shift();
          }
          now = new Date();
    
        }
    
        for (var i = 0; i < day; i++) { 
          addData();
        }
        //设置图标配置项
        myContainer.setOption({ 
          legend: { 
            data: ['出油油位', '入油油位', '管道油位']
          },
          tooltip: { 
            trigger: 'axis'
          },
          grid: { 
            left: '0%',
            right: '5%',
            bottom: '2%',
            containLabel: true
          },
          title: { 
            text: '油罐油位监控'
          },
          xAxis: { 
            type: "category",
            boundaryGap: false,
            data: date,
            name: '时间',
            axisLabel: { 
              interval: 0,
              rotate: 90
            }
          },
          yAxis: { 
            boundaryGap: [0, '10%'],
            type: 'value',
            name:'油位/m'
          },
          series: [{ 
            name: '出油油位',
            type: 'line',
            smooth: true, //数据光滑过度
            symbol: 'none', //下一个数据点
    
            areaStyle: { 
              normal: { 
                color: 'pink'
              }
            },
            data: data
          },
          { 
            name: '入油油位',
            type: 'line',
            smooth: true, //数据光滑过度
            symbol: 'none', //下一个数据点
    
            areaStyle: { 
              normal: { 
                color: 'pink'
              }
            },
            data: data1
          },
          { 
            name: '管道油位',
            type: 'line',
            smooth: true, //数据光滑过度
            symbol: 'none', //下一个数据点
    
            areaStyle: { 
              normal: { 
                color: 'pink'
              }
            },
            data: data2
          }
          ]
        })
    
        setInterval(function () { 
          addData(true);
          myContainer.setOption({ 
            xAxis: { 
              data: date
            },
            series: [{ 
              name: '出油油位',
              data: data
            },
            { 
              name: '入油油位',
              data: data1
            },
            { 
              name: '管道油位',
              data: data2
            }]
          });
        }, 1000)
    
        // 绘制图表
    
      }
      render() { 
        return (
          <div id="charts" style={ {  width: '80%', height: '80%' }}></div>
        )
      }
    }
    export default edg1