对于动态数据，增加server端，从server端获取动态数据，更新图表

Author: navono

Diff for: echarts/ReadME.md

@@ -0,0 +1,6 @@
+# 动态数据
+在dynamicData.js中，实时从服务端获取数据。因此需要将server.js运行起来
+运行的方式
+```js
+node server.js
+```

Diff for: echarts/dynamicData.js

@@ -1,35 +1,42 @@
 import echarts from 'echarts';
+import io from 'socket.io-client';
 
 let myChart = echarts.init(document.getElementById('root'));
 
-let now = +new Date(2010, 10, 10);
-let value = Math.random() * 1000;
+let now = +Date.now();
+// let value = Math.random() * 1000;
 const oneSecond = 1000 * 60;
 
-let data = [];
+const socket = io('http://localhost:3000');
+
+let analogData = [];
+let digitalData = [];
 
 // 初始化
 // 原有的 data 的大小，决定了在时间轴上的数据量的大小，也就是间隔大小
 // 如：目前的跳变精度为 1 秒，那么设置为 60 时，即想要在时间轴上保持 1 分钟的数据。
-for (let index = 0; index < 120; index++) {
-  data.push(randomData());
+for (let index = 0; index < 60; index++) {
+  now = new Date(+now + oneSecond);
+  analogData.push(randomData(now, 0, 500));
+  digitalData.push(randomData(now, 0, 1));
 }
 
-function randomData() {
-  now = new Date(+now + oneSecond);
-  value = value + Math.random() * 21 - 10;
+function randomData(time, lower, upper) {
+  const diff = upper - lower + 1;
+  const value =  Math.floor(Math.random() * diff + lower);
   return {
     name: now.toString(),
     value: [
-      now,
-      Math.round(value)
+      time,
+      value
     ]
   }
 }
 
 let option = {
   title: {
-    text: '动态数据 + 时间坐标轴'
+    text: '动态数据 + 时间坐标轴',
+    x: 'center',
   },
   tooltip: {
     trigger: 'axis',
@@ -43,6 +50,10 @@ let option = {
       animation: false
     }
   },
+  legend: {
+    data:['模拟量数据', '开关量数据'],
+    x: 'left'
+  },
   dataZoom: [
     {
       type: 'slider',
@@ -68,37 +79,94 @@ let option = {
     splitNumber: 3,
     // boundaryGap: ['20%', '20%']
   },
-  yAxis: {
-    type: 'value',
-    boundaryGap: [0, '100%'],
-    splitLine: {
-      show: false
+  yAxis: [
+    {
+      name: '模拟量',
+      type: 'value',
+      boundaryGap: [0, '100%'],
+      splitLine: {
+        show: false
+      }
+    },
+    {
+      name: '开关量',
+      max: 8,
+      type: 'value'
     }
-  },
-  series: [{
-    name: '模拟数据',
-    type: 'line',
-    showSymbol: false,
-    hoverAnimation: false,
-    data: data
-  }]
+  ],
+  series: [
+    {
+      name: '模拟量数据',
+      type: 'line',
+      showSymbol: false,
+      hoverAnimation: false,
+      data: analogData
+    },
+    {
+      name: '开关量数据',
+      yAxisIndex: 1,
+      type: 'line',
+      showSymbol: false,
+      hoverAnimation: false,
+      data: digitalData
+    }
+  ]
 }
 
-setInterval(() => {
-  //for (let i = 0; i < 1; i++) {
-  // data.shift();
-  // data.push(randomData());
-  //}
+socket.on('Analog', (msg, time) => {
+  now = new Date(time);
+  const point = {
+    name: now.toString(),
+    value: [
+      now,
+      msg
+    ]
+  }
+  analogData.shift();
+  analogData.push(point);
 
-  data.shift();
-  data.push(randomData());
+  // myChart.setOption({
+  //   series: {data}
+  // });
+  myChart.setOption(
+    {
+      series: [
+        {
+          data: analogData
+        },
+        {
+          data: digitalData
+        }
+      ]
+    }
+  )
+});
 
-  myChart.setOption({
-    series: [
-      {data}
+socket.on('Digital', (msg, time) => {
+  now = new Date(time);  
+  const point = {
+    name: now.toString(),
+    value: [
+      now,
+      msg
     ]
-  });
+  }
+  digitalData.shift();
+  digitalData.push(point);
+
+  myChart.setOption(
+    {
+      series: [
+        {
+          data: analogData
+        },
+        {
+          data: digitalData
+        }
+      ]
+    }
+  )
+});
 
-}, 1000);
 
 myChart.setOption(option);

Diff for: echarts/server.js

@@ -0,0 +1,49 @@
+const app = require('express')();
+const http = require('http').Server(app);
+const io = require('socket.io')(http);
+
+app.get('/', (req, res) => {
+  // res.send('<h1>Hello, world!</h1>');
+  res.sendFile(__dirname + '/index.html');
+});
+
+
+io.on('connection', (socket) => {
+  console.log('a user connected');
+  socket.on('disconnect', () => {
+    console.log('user disconnected');
+  });
+
+  socket.on('chat message', msg => {
+    console.log(`message: ${msg}`);
+    io.emit('chat message', msg);
+  })
+});
+
+function rd(n, m) {
+  const v = m - n + 1;
+  return Math.floor(Math.random() * v + n);
+}
+
+let now = +Date.now();
+const oneSecond = 1000 * 60;
+
+function mockDigital(time) {
+  io.emit('Digital', rd(0, 1), +time);
+}
+
+function mockAnalog(time) {
+  io.emit('Analog', rd(0, 500), +time);
+}
+
+function mockData() {
+  now = new Date(+now + oneSecond);
+  mockDigital(now);
+  mockAnalog(now);
+}
+
+setInterval(mockData, 1000);
+
+http.listen(3000, () => {
+  console.log('listening on *:3000');
+});

Diff for: package.json

@@ -47,6 +47,7 @@
     "react-addons": "^0.9.1-deprecated",
     "redux": "^3.7.2",
     "sass-loader": "^6.0.6",
+    "socket.io-client": "^2.0.3",
     "style-loader": "^0.18.2",
     "uuid": "^3.1.0",
     "webpack": "^3.0.0",

Diff for: react/components/HOC/PeopleList.js

@@ -2,26 +2,6 @@ import React from 'react';
 import DataComponent from './DataComponent'
 
 const PeopleList = ({data}) => {
-
-  let testA = {
-    a: 1,
-    b: {
-      b1: 2,
-      b2: {
-        b3:3
-      }
-    }
-  }
-
-  let ccc = {...testA, b: {b2: {b3: 5}}};
-  console.log(ccc);
-  ccc.b.b1 = 5;
-  
-  // let ddd = Object.assign({}, testA, {b: {b1: 3, b2: {b3: 5}}});
-  // console.log(ddd);
-
-  console.log(testA);
-
   return (
     <ol className="people-list">
       {data.results.map((person, i) => {

Diff for: webpack.config.js

@@ -8,8 +8,8 @@ const PORT = 9999;
 module.exports = {
   devtool: 'source-map',
   // entry: path.resolve(__dirname, './react/components/HOC/index.js'),
-  entry: path.resolve(__dirname, './echarts/twoGrid.js'),
-  // entry: path.resolve(__dirname, './echarts/dynamicData.js'),
+  // entry: path.resolve(__dirname, './echarts/twoGrid.js'),
+  entry: path.resolve(__dirname, './echarts/dynamicData.js'),
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, './build')