左侧图表

index.html

@@ -23,10 +23,35 @@
             <img src="" alt="">
             <span>文本标题</span>
           </div>
-          <div class="item_wrap" ></div>
+          <div class="item_wrap" >
+            <div>
+              <div class="val" id="pro_eff">0</div>
+              <div class="name">生产效率</div>
+            </div>
+            <div>
+              <div class="val" id="per_eff">0</div>
+              <div class="name">合格率</div>
+            </div>
+            <div>
+              <div class="val" id="act_eff">0</div>
+              <div class="name">稼动率</div>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="item_header" >
+            <img src="" alt="">
+            <span>文本标题</span>
+          </div>
+          <div class="item_wrap" id="act_torque"></div>
+        </div>
+        <div class="item">
+          <div class="item_header">
+            <img src="" alt="">
+            <span>文本标题</span>
+          </div>
+          <div class="item_wrap" id="torque"></div>
         </div>
-        <div>2</div>
-        <div>3</div>
       </div>
       <div class="view view_right">
         <div>1</div>
@@ -36,6 +61,7 @@
     </div>
   </div>
 </body>
+<script src="./js/jquery.min.js"></script>
 <script src="./js/echarts.js"></script>
 <script src="./js/index.js"></script>
 </html>
\ No newline at end of file

js/index.js

+let baseUrl = 'http://192.168.1.80:8802/api/'
+
+//图表1
+getIndicators()
+setInterval(()=>{
+  getIndicators()
+}, 1000)
+function getIndicators(){
+  $.ajax({
+    type :"POST",
+    url : baseUrl + "/Base/PostRediusTest",
+    dataType :"json",
+    contentType: "application/json",
+    data: JSON.stringify( ["PRO_EFF","PER_EFF","ACT_EFF"]),
+    success :function(res) {
+      document.getElementById('pro_eff').innerText = res.data[0].Value
+      document.getElementById('per_eff').innerText = res.data[1].Value
+      document.getElementById('act_eff').innerText = res.data[2].Value
+    },
+  });
+}
+
+//图表2
+getProcess()
+function getProcess(){
+  let mycharts = echarts.init(document.getElementById('act_torque'))
+  let name = ['电机功率1', '电机功率2', '电机功率3', '电机功率4', '电机功率5']
+  let option = {
+    grid: {
+      top: 10,
+      right: 10,
+      bottom: 0,
+      left: 10,
+      containLabel: true
+    },
+    xAxis: {
+      show: false
+    },
+    yAxis: [{
+      show: true,
+      inverse: true,
+      data: name,
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        interval: 0,
+        color: '#fff',
+        fontSize: 12
+      },
+    }, {
+      triggerEvent: true,
+      show: true,
+      inverse: true,
+      data: name,
+      axisLine: {
+          show: false
+      },
+      splitLine: {
+          show: false
+      },
+      axisTick: {
+          show: false
+      },
+      axisLabel: {
+        interval: 0,
+        shadowOffsetX: '-20px',
+        color: '#F5BD5F',
+        align: 'left',
+        verticalAlign: 'center',
+        lineHeight: 40,
+        fontSize: 14,
+        formatter: function(value) {
+          return Number(value) ? value : 0
+        },
+      }
+    }],
+    series: [{
+      type: 'bar',
+      data: [0,0,0,0,0],
+      showBackground: true,
+      backgroundStyle:{
+        color: '#0C2648'
+      },
+      yAxisIndex: 0,
+      barWidth: 4,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+          { offset: 1, color: '#FC962C' },
+          { offset: 0, color: '#F5BE60' }
+        ])
+      },
+    }]
+  };
+  mycharts.setOption(option)
+  setInterval(function () {
+    $.ajax({
+      type :"POST",
+      url : baseUrl + "/Base/PostRediusTest",
+      dataType :"json",
+      contentType: "application/json",
+      data: JSON.stringify( ["ACT_TORQUE1","ACT_TORQUE2","ACT_TORQUE3","ACT_TORQUE4", "ACT_TORQUE5"]),
+      success :function(res) {
+        let data = []
+        name.forEach((item, i)=>{
+          data.push(res.data[i].Value)
+        })
+        mycharts.setOption({
+          yAxis: [
+            {},{
+              data: data
+            }
+          ],
+          series: [
+            {
+              data: data
+            }
+          ]
+        });
+      },
+    });
+  }, 1000);
+}
+
+//图表3
+getTorque()
+function getTorque(){
+  let mycharts = echarts.init(document.getElementById('torque'))
+  let xAxis = []
+  let data1 = []
+  let data2 = []
+  let dataScatter = []
+  let color = ['#2E86DF', '#F5BD5F'];
+  let option = {
+    color: color,
+    grid:{
+      top: 40,
+      right: 10,
+      bottom: 0,
+      left: 10,
+      containLabel: true
+    },
+    legend:{
+      right: 0,
+      icon: 'rect',
+      itemWidth: 20,
+      itemHeight: 2,
+      textStyle:{
+        color: '#fff'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxis,
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        color: '#fff'
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        color: '#fff'
+      },
+      splitLine: {
+        show: true,
+        lineStyle:{
+          color: 'rgba(50, 71, 106, .4)'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+    },
+    series: [
+      {
+        name: '转矩1',
+        data: data1,
+        type: 'bar',
+        stack: '1',
+        barGap: 10,
+        barWidth: 2,
+        label: {
+          show: true,
+          position: 'top',
+          color: color[0],
+          fontFamily: 'DIN',
+          fontWeight: 500,
+          fontSize: 14
+        }
+      },
+      {
+        name: '转矩2',
+        data: data2,
+        type: 'bar',
+        stack: '2',
+        barGap: 10,
+        barWidth: 2,
+        label: {
+          show: true,
+          position: 'top',
+          color: color[1],
+          fontFamily: 'DIN',
+          fontWeight: 500,
+          fontSize: 14
+        }
+      },{
+        type: 'scatter',
+        stack: '1',
+        symbolOffset: [-11, 0], //相对于原本位置的偏移量
+        data: dataScatter,
+        label: {
+            normal: {
+                show: false,
+            }
+        },
+        symbolSize: 6,
+        itemStyle: {
+            normal: {
+               color: color[0]
+            }
+        },
+        z: 2
+      },{
+        type: 'scatter',
+        stack: '2',
+        symbolOffset: [11, 0], //相对于原本位置的偏移量
+        data: dataScatter,
+        label: {
+          normal: {
+            show: false,
+          }
+        },
+        symbolSize: 6,
+        itemStyle: {
+          normal: {
+            color: color[1]
+          }
+        },
+        z: 2
+      }
+    ]
+  };
+  mycharts.setOption(option)
+  setInterval(()=>{
+    $.ajax({
+      type :"POST",
+      url : baseUrl + "/Base/PostRediusTest",
+      dataType :"json",
+      contentType: "application/json",
+      data: JSON.stringify( ["TORQUE1", "TORQUE2"]),
+      success :function(res) {
+        if(xAxis.length === 6){
+          data1.shift()
+          data2.shift()
+          xAxis.shift()
+          dataScatter.shift() 
+        }
+        data1.push(res.data[0].Value)
+        data2.push(res.data[1].Value)
+        dataScatter.push(0)
+        let now = new Date();
+        xAxis.push(now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds())
+        mycharts.setOption({
+          xAxis:{
+            data: xAxis
+          },
+          series: [
+            {
+              data: data1
+            },{
+              data: data2
+            },{
+              data: dataScatter
+            },{
+              data: dataScatter
+            }
+          ]
+        });
+      },
+    });
+  }, 1000)
+}
\ No newline at end of file