update right items

css/index.css

@@ -110,4 +110,31 @@ body {
 
 .item_title {
   margin-left: 6px;
+}
+
+.item_alarm_wrap {
+  padding: 0 10px;
+  overflow: auto;
+}
+
+.list {
+  height: 26px;
+  line-height: 26px;
+  margin-top: 12px;
+  width: 100%;
+  border-bottom: 1px dashed rgba(26, 202, 204, 0.4);
+  background: url('../imgs/Normal1@2x.png') no-repeat;
+  background-size: 100% 100%;
+  font-size: 12px;
+  padding-left: 50px;
+  box-sizing: border-box;
+}
+.list_blue {
+  background: url('../imgs/Normal1@2x.png');
+  background-size: 100% 100%;
+}
+
+.list_red {
+  background: url('../imgs/Normal2@2x.png');
+  background-size: 100% 100%;
 }
\ No newline at end of file

index.html

@@ -48,7 +48,7 @@
             <img class="item_img" src="./imgs/title@2x.png" alt="">
             <span class="item_title" >文本标题</span>
           </div>
-          <div class="item_wrap" ></div>
+          <div class="item_wrap" id="right1"></div>
         </div>
 
         <div class="item">
@@ -64,7 +64,20 @@
             <div class="item_title_alarm" >报警信息</div>
             <div class="item_subTitle" >当前报警数：<span class="red" >1</span></div>
           </div>
-          <div class="item_wrap" ></div>
+          <div class="item_wrap item_alarm_wrap" >
+            <!-- 渲染报警信息 -->
+            <div class="list">
+              <span>2021-11-11  12:36:30  越限报警越限报警1#...</span>
+            </div>
+            <div class="list list_blue">
+              <span>2021-11-11  12:36:30  越限报警越限报警1#...</span>
+            </div>
+
+            <div class="list list_red">
+              <span>2021-11-11  12:36:30  越限报警越限报警1#...</span>
+            </div>
+
+          </div>
         </div>
       </div>
     </div>

js/index.js

@@ -5,6 +5,89 @@
 /* 左侧第三个 */
 
 /* 右侧第一个 */
+let rightChart1 = echarts.init(document.getElementById('right1'));
+let rightOption1 = {
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {
+    data: ['类型1', '类型2'],
+    textStyle: {
+      color:'#fff'
+    },
+    right: 0,
+  },
+  grid: {
+    top: 30,
+    left: 35,
+    bottom: 40,
+    right: 20,
+  },
+  xAxis: {
+    type: 'category',
+    // boundaryGap: false,//这里表示是否补齐空白
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: '#fff'
+    },
+    axisLine: {
+      show: false,//不显示坐标轴线
+    },
+    data: ['12:34', '12:44', '12:54', '13:04','13:14','13:24'],
+  },
+  yAxis: [{
+    type: 'value',
+    axisTick: {
+      show:false
+    },
+    axisLabel: {
+      color: '#fff'
+    },
+    axisLine: {
+      show: false,//不显示坐标轴线
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#2A3F61'
+      }
+    }
+  }],
+  series: [
+    {
+      name: '类型1',
+      data: [50, 26, 33, 22, 43,30],
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 2,
+      hoverAnimation: false,
+      areaStyle: {
+        opacity: 0.1,
+      },
+      itemStyle: {
+        color: '#FEB767'
+      }
+    },
+    {
+      name: '类型2',
+      data: [60, 16, 63, 32, 13,20],
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 2,
+      hoverAnimation: false,
+      areaStyle: {
+        opacity: 0.1,
+      },
+      itemStyle: {
+        color: '#2978C8'
+      }
+    }
+  ]
+}
+rightChart1.setOption(rightOption1);
 
 /* 右侧第二个 */
 let rightChart2 = echarts.init(document.getElementById('right2'));
@@ -49,9 +132,7 @@ let rightOption2= {
       axisLabel: {
         show: true,
         inside: false,
-        textStyle: {
-          color: '#F5BD5F',
-        },
+        color: '#F5BD5F',
       },
       splitArea: {
         show: false