提交

css/index.css

@@ -351,11 +351,13 @@ body {
 .skeleton .rightBody .skeleton-body {
     width: 100%;
     height: calc(100% - 44px);
-    background-color: #fff;
     overflow-y: auto;
 }
 
 .skeleton .iframe{
+    border: 1em solid #000;
+    background-color: #fff;
+    border-radius: 5px;
     width: 400px;
     height: 720px;
     margin:  20px auto;

item.html

@@ -49,30 +49,20 @@
         <div class="col-md-6">
             <div class="panel panel-default">
                 <div class="panel-heading">传播量趋势</div>
-                <div class="panel-body">
-                    <canvas id="container" style="width: 100%;height: 100%;" class=""></canvas>
-                </div>
+                <canvas id="container" style="width: 100%;height: 100%;" class=""></canvas>
             </div>
         </div>
         <div class="col-md-6">
             <div class="panel panel-default">
-                <div class="panel-heading">Panel heading without title</div>
-                <div class="panel-body">
-                </div>
+                <div class="panel-heading">部门传播量</div>
+                <canvas id="barChart" style="width: 100%;height: 100%;" class=""></canvas>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-md-6">
             <div class="panel panel-default">
-                <div class="panel-heading">传播量趋势</div>
-                <div class="panel-body">
-                </div>
-            </div>
-        </div>
-        <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">Panel heading without title</div>
+                <div class="panel-heading">任务统计</div>
                 <div class="panel-body">
                 </div>
             </div>
@@ -142,6 +132,33 @@
         chart.render();
     }
 
+    function bar1(li){
+        const chart = new F2.Chart({
+            id: 'barChart',
+            pixelRatio: window.devicePixelRatio
+        });
+
+        chart.source(li, {
+        sales: {
+            tickCount: 5
+        }
+        });
+        chart.tooltip({
+        showItemMarker: false,
+        onShow: function onShow(ev) {
+            const items = ev.items;
+            items[0].name = null;
+            items[0].name = items[0].title;
+            items[0].value = '¥ ' + items[0].value;
+        }
+        });
+
+        chart.interval()
+        .position('year*sales')
+        .color('l(90) 0:#1890ff 1:#70cdd0'); // 定义柱状图渐变色
+        chart.render();
+    }
+
     function getAllData() {
         require('GET', {
             url: "/topic/overview",
@@ -173,11 +190,11 @@
     }
 
     function getread(){
-        require('GET', {
+        require('POST', {
             url: "/topic/read",
             data: {
-                topic: searchObj.topic,
-                depRange: "MONTH"
+                depRange: "ALL",
+                title: searchObj.topic
             }
         }).then(li => {
             console.log('--', li);